Color Picker

Color Picker Web — лучшая бесплатная онлайн-выборка цветов в 2026 году. поддерживает более 20 цветовых форматов, включая HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB и другие. Он включает в себя живой цветовой круг, контрастность WCAG. чекер, симулятор дальтонизма, генератор палитр, цвет изображения инструмент выбора и 6 типов гармоний — все совершенно бесплатно и без регистрации. требуется.

Чтобы найти HEX-код цвета на изображении, используйте палитру цветов изображения. на веб-сайте Color Picker. Загрузите любую фотографию, наведите курсор на нужную область для выборки и щелкните, чтобы извлечь точные коды HEX, RGB и HSL. из любого пикселя. Вы также можете автоматически создать полную цветовую палитру из изображение в один клик.

Инструмент выбора цвета позволяет выбирать, преобразовывать и анализировать цвета. Это показывает значения цвета в нескольких форматах (HEX, RGB, HSL, CMYK), генерирует дополнительные цветовые палитры, проверяет доступность WCAG коэффициенты контрастности, имитирует дальтонизм и извлекает цвета из загруженные изображения. Это важно для веб-дизайнеров, разработчиков и дизайнеры брендов.

Чтобы преобразовать HEX в RGB, используйте инструмент преобразования, указанный выше. Введите любой HEX код (например, #9333ea) и получите мгновенный вывод RGB (147, 51, 234). Вручную: разделите HEX на 3 пары (93, 33, ea), конвертируйте каждую из шестнадцатеричный в десятичный. Р=147, Г=51, Б=234. Color Picker Web делает это мгновенно для всех 20+ форматов.

Согласно WCAG 2.2, минимальный коэффициент цветовой контрастности для нормального текст — 4,5:1 (уровень AA) и 7:1 (уровень AAA). Для крупного текста (18pt+ или 14pt+жирный), минимум — 3:1 для AA и 4,5:1 для AAA. пользовательский интерфейс компоненты и значки требуют контраста не менее 3:1 по отношению к соседним. цвета. Используйте описанную выше программу проверки контрастности WCAG, чтобы проверить цвета.

Чтобы выбрать цвет на веб-сайте: (1) Используйте DevTools браузера — щелкните правой кнопкой мыши любой элемент, осмотрите его и щелкните образец цвета в CSS-панель. (2) Используйте расширение браузера, например ColorZilla. (3) Возьмите снимок экрана и загрузите его в палитру цветов изображений Color Picker Web, чтобы образец любого пикселя. Chrome DevTools также имеет встроенную пипетку. панель выбора цвета.

HSL означает оттенок, насыщенность и яркость. Оттенок (0°–360°) – это цветотип на цветовом круге. Насыщенность (0–100 %) — насколько ярко или серый цвет. Яркость (0–100 %) — насколько темный или светлый объект. появляется цвет. Пример: hsl(270, 81%, 56%) — средний фиолетовый. ХСЛ — лучший формат для CSS-анимации и динамических цветовых тем. потому что каждое свойство можно настроить независимо.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Инструмент выбора цвета — это цифровая утилита, которая позволяет пользователям выбирать цвета. любого цвета и получить его точный код в нескольких форматах — HEX, RGB, HSL, CMYK и другие. Он ежедневно используется дизайнерами UI/UX для выбирать цвета интерфейса, веб-разработчики кодировать значения цветов CSS, дизайнерам брендов — поддерживать цветовую последовательность, фотографам — извлекать цвета из изображений и цифровых художников для палитры создание. Color Picker Web — наиболее полный бесплатный набор цветов. инструмент выбора доступен в 2026 году, поддерживает более 20 цветовых форматов, WCAG проверка доступности, симуляция цветовой слепоты и 18 языки.

Цветовой код HEX — это 6-значное шестнадцатеричное представление цвет, используемый в веб-дизайне и CSS. Он начинается с символа #, за которым следует тремя парами символов (00–FF), каждая из которых представляет интенсивность красного, зеленого и синего каналов. Например: #FF0000 чистый красный (R=255, G=0, B=0), #FFFFFF — белый (все каналы на максимум), а #000000 — черный (все каналы на нуле). стенография 3-digit HEX codes like #F00 expand to #FF0000. HEX - самый универсально поддерживаемый цветовой формат в HTML, CSS, SVG и дизайне. такие инструменты, как Figma.

Чтобы выбрать цвета для веб-сайта: (1) Начните с основных цветов вашего бренда. раскрасьте и создайте полную 9-ступенчатую цветовую шкалу (50–900) с помощью HSL. корректировки. (2) Примените правило 60-30-10 — 60% нейтрального фона, 30 % второстепенный цвет, 10 % акцент для призывов к действию. (3) Проверьте все Комбинации текста и фона соответствуют контрастности WCAG AA (минимум 4,5:1). for normal text). (4) Создайте гармоничные акцентные цвета, используя Инструмент «Цветовая гармония» — работают триадные или расщепленно-дополнительные схемы. лучше всего подходит для веб-сайтов. (5) Проверьте каждую цветовую комбинацию с помощью цвета. симулятор слепоты, обеспечивающий доступность для всех пользователей.

Чтобы выбрать цвета бренда: (1) Изучите психологию цвета — синий цвет строится доверие, зеленый сигнализирует о росте, красный вызывает срочность, фиолетовый предполагает роскошь и творчество. (2) Проанализируйте свою отрасль — технологические бренды. предпочитают синий и серый цвета, бренды здоровья используют зеленый цвет, бренды класса люкс используют золотой, черный или темно-фиолетовый. (3) Choose a primary brand color that отражает основную эмоцию вашего бренда. (4) Создайте полную цветовую шкалу от вашего основного с помощью метода HSL. (5) Выберите второстепенный и Акцентный цвет с использованием теории гармонии. (6) Убедитесь, что все комбинации пройдены. Стандарты доступности WCAG. Документ как маркеры дизайна для согласованность на всех платформах.

HEX, RGB и HSL — это три способа представления одного и того же цвета: ШЕСТИГР. (#9333ea) — компактный 6-значный шестнадцатеричный формат, идеально подходящий для CSS и HTML — наиболее широко поддерживается. RGB (rgb(147, 51, 234)) определяет цвет по значениям красного, зеленого и синего каналов от 0 до 255 — лучший вариант для холста JavaScript, SVG и рендеринга экрана. HSL (hsl(270, 81%, 56%)) defines color by Hue angle (0–360°), Saturation (0–100%) и Легкость (0–100%) — наиболее интуитивно понятны для дизайнеров, поскольку каждое свойство настраивается независимо, что делает его идеальным для CSS-анимации. и динамическая тематика. Все три описывают одинаковые цвета, но служат разным рабочие процессы.

RGB и CMYK — это принципиально разные цветовые модели для разных output types. RGB (красный, зеленый, синий) — аддитивный цвет. модель, используемая для цифровых экранов — сочетание цветов добавляет света, а смешивание все каналы на максимуме выдают белый цвет. CMYK (голубой, пурпурный, Yellow, Key/Black) — субтрактивная цветовая модель, используемая в физической печати. — смешивание красок поглощает свет, а объединение всех красок дает черный цвет. Всегда дизайн в RGB для цифрового/экранного вывода. Конвертируйте в CMYK перед отправкой файлы в коммерческие принтеры. Преобразование никогда не бывает идеальным — некоторые RGB цвета (особенно яркие насыщенные цвета) невозможно воспроизвести в Печать CMYK.

HSB (оттенок, насыщенность, яркость) и HSV (оттенок, насыщенность, значение) это одна и та же цветовая модель с разными названиями. Оттенок (0°–360°) идентифицирует цветовое семейство. Насыщенность (0–100%) контролирует яркость. от серого до полностью яркого. Яркость/значение (0–100 %) управляет тем, как much light the color appears to emit, from black (0%) to fully яркий (100%). HSB — модель по умолчанию в Adobe Photoshop. Illustrator и палитра цветов Figma, что делает его незаменимым для дизайнеры, использующие эти инструменты. Он отличается от HSL тем, как легкость и Яркость рассчитываются — в HSL 50% яркости — это чистая цвет, а в HSB яркость 100% — это чистый цвет.

LAB (CIELAB) и XYZ (CIEXYZ) не зависят от устройства, воспринимаются единые цветовые пространства, основанные на науке о человеческом зрении. XYZ — это основа всей современной науки о цвете: он отображает цвета так, как человеческий глаз воспринимает их с помощью трех колбочек (X, Y, Z, соответствующих примерно до чувствительности к красному, зеленому и синему). LAB является производным от XYZ и спроектировано таким образом, чтобы равные числовые расстояния представляли равные воспринимаемые цветовые различия, что делает его идеальным для сравнения цветов, изображений обработка, машинное обучение и контроль качества печати. Оба используются в профессиональном управлении цветом, цветовых профилях ICC и расширенных изображениях редактирование рабочих процессов. CSS теперь поддерживает синтаксис color(xyz…) и lab(…). в современных браузерах.

Средство выбора цвета изображения на веб-сайте Color Picker позволяет точно цвета из любой фотографии, скриншота, логотипа или произведения искусства. Загрузите любой файл изображения, затем щелкните любой пиксель, чтобы мгновенно извлечь его HEX, Значения RGB и HSL. Инструмент также автоматически генерирует Полная цветовая палитра из доминирующих цветов вашего изображения. Это полезен для подбора фирменных цветов из существующих материалов, создание палитр из мудбордов, извлечение цветов из продукта фотографии и реверс-инжиниринг цветовых схем конкурентов. веб-сайты. Не требуется учетная запись или установка программного обеспечения — работает полностью в браузере.

Color Picker Web поддерживает все шесть основных типов цветовой гармонии на основе Теория цветового круга: Дополнительный — два цвета напрямую напротив (на расстоянии 180°), максимальный контраст. Раздельно-комплементарный — один базовый цвет плюс два цвета, смежных с ним (150° и 210°). Триадический — три равноотстоящих друг от друга цвета (120° друг от друга), сбалансированный и динамичный. Аналогичный — три соседних цвета (30° друг от друга), гармоничны и естественны. Монохроматический — вариации одного оттенка на разных уровнях насыщенности и яркости. Тетрадический — четыре цвета, расположенные на равном расстоянии (90° друг от друга), сложный и богатый. Все гармонии рассчитываются математически в режиме реального времени. как вы выбираете цвета.

Да, Color Picker Web можно использовать совершенно бесплатно — все функции включая палитру цветов, генератор палитры, палитру цветов изображения, Проверка контрастности WCAG, симулятор цветовой слепоты, цветовые гармонии, Генератор оттенков и теней, а также все преобразования более чем 20 цветовых форматов. доступен бесплатно. Никакая учетная запись, адрес электронной почты или регистрация не требуется. Здесь нет рекламы, ограничений на использование и премиум-уровня — все функции бесплатны навсегда. Инструмент также доступен в 18 языки: английский, хинди, испанский, русский, французский, немецкий, Итальянский, португальский, бенгальский, японский, корейский, малайский, польский, Индонезийский, арабский, болгарский, турецкий и шведский.

WCAG (Руководство по обеспечению доступности веб-контента) цветовой контраст требования гарантируют, что текст будет удобен для чтения пользователями со слабым зрением, дальтонизм или старение глаз. Коэффициент контрастности измеряет разница яркости между цветом текста и его фоном — в диапазоне от 1:1 (без контраста) до 21:1 (максимум, черное по белому). ВКАГ 2.2 Уровень AA требует минимального соотношения 4,5:1 для обычного текста и 3:1 для большой текст. Уровень AAA требует 7:1 для обычного текста. Несоответствие может повлечь за собой юридическую ответственность в соответствии с ADA (США), EAA (Европа) и Статья 508. В США подано более 4600 исков о доступности. только в 2023 году, при этом неудачи с контрастированием входят в число наиболее часто упоминаемых проблемы.

Color Picker Web имитирует 8 типов нарушений цветового зрения: Протанопия — красная слепота (1,3% мужчин). Протаномалия — уменьшено чувствительность к красному цвету (1,3% мужчин). Дейтеранопия — зеленая слепота (1,2% мужчин). Дейтераномалия — понижена чувствительность к зеленому (5% мужчин, самый распространенный тип). Тританопия — синий слепота (0,001% населения). Тританомалия — уменьшено чувствительность к синему цвету (редко). Ахроматопсия — полный цвет слепота, видит только оттенки серого (0,003% населения). Ахроматомалия — снижение цветовосприятия по всем каналам (очень редко). Каждая симуляция использует клиническую матрицу преобразования цветов, примененную к выбранному вами цвету в реальном времени.

Психология цвета в дизайне пользовательского интерфейса изучает, как цвета влияют на пользователя. эмоции, восприятие и поведение. Ключевые ассоциации: Синий — доверие, надежность, спокойствие (используется Facebook, Twitter, PayPal, LinkedIn). Зеленый — рост, здоровье, природа, успех (используется Spotify, WhatsApp, бренды цельнопищевых продуктов). Красный — срочность, страсть, энергия, аппетит (используется для продажи баннеров, продуктовых брендов, призывов к действию). Фиолетовый — роскошь, творчество, мудрость (используется Cadbury, Hallmark, косметическими брендами). Желтый — оптимизм, теплота, внимание (используется для предупреждений, основные моменты продажи). Оранжевый — энтузиазм, дружелюбие (используется от Amazon, Fanta, Harley-Davidson). Психология цвета влияет на конверсию ставки, восприятие бренда и удержание пользователей.

Создание цветовой палитры дизайн-системы включает 5 шагов: (1) Определите основной цвет вашего бренда и преобразуйте его в HSL. (2) Создайте 9-ступенчатая цветовая шкала (50–900) путем систематической регулировки яркости — более светлые стопы (50–300) для фона и оттенков, более темные стопы (600–900) для текстового и темного режима. (3) Повторите для второстепенного акцента, успех, предупреждение, ошибка и нейтральные цвета. (4) Создать семантику токены (--color-primary, --color-primary-hover, --color-surface) это ссылка на остановки ваших весов. (5) Проверьте каждый текст/фон. комбинация проходит WCAG AA. Используйте Color Picker Web для создания масштабируйте, проверяйте контрастность и экспортируйте значения HEX/HSL в качестве маркеров дизайна. для Figma или CSS.

Правило 60-30-10 — это классический принцип дизайна для создания сбалансированные, визуально привлекательные цветовые схемы. 60% — доминантный/нейтральный цвет (фон, стены, большие поверхности) — обычно светлый нейтральный, задает общий тон. 30% — вторичный цвет (мебель, заголовки, боковые панели) — дополняет доминанту и добавляет глубины. 10% — цвет акцента (призывы к действию, кнопки, выделение, важные ссылки) — создает визуальный интерес и привлекает внимание к ключевым действиям. В веб-дизайне это переводится как: 60% фоновых и базовых поверхностей, 30% областей содержимого и вторичные элементы пользовательского интерфейса, 10% основных кнопок, активные состояния и важные основные моменты. Такое соотношение предотвращает визуальное перегруженность, сохраняя при этом иерархию.

Относительная яркость измеряет воспринимаемую яркость цвета на масштаб от 0 (черный) до 1 (белый). Расчет: (1) Преобразование каждого Канал RGB (0–255) в десятичное число (0–1) путем деления на 255. (2) Удалить гамма-коррекцию: если значение ≤ 0,04045, разделить на 12,92; в противном случае примените (значение + 0,055) / 1,055, возведенное в степень 2,4. (3) Примените взвешенную формулу: L = 0,2126 × R + 0,7152 × G + 0,0722. × B. Веса отражают чувствительность человеческого глаза. чувствителен к зеленому, меньше к красному и меньше всего к синему. (4) Коэффициент контрастности = (L_светлее + 0,05) / (L_темнее + 0,05). Смещение 0,05 представляет окружающее освещение на обычном дисплее. Color Picker Web выполняет это расчет моментально.

HSL (оттенок, насыщенность, яркость) и HSB/HSV (оттенок, насыщенность, Яркость/Значение) используют оттенок и насыщенность, но различаются третий канал. В ХСЛ, яркость 50% — это чистый, полностью насыщенный цвет; 0% — черный, 100% — белый. Это симметричный. В HSB/HSV, Яркость/Значение 100 % чистый цвет; 0% всегда черный независимо от других значений. ВШБ более интуитивно понятен для выбора цвета, поскольку вы можете сначала выбрать яркий цвет со 100% яркостью, а затем затемнить его — делая его по умолчанию в Photoshop, Figma и Illustrator. HSL — это больше интуитивно понятен для CSS, потому что вы можете плавно интерполировать между темным и светлые версии того же оттенка.

Аддитивное смешение цветов (RGB) и субтрактивное смешение цветов (CMYK) две основные цветовые модели. Добавка (RGB) — используется светоизлучающими устройствами (экранами, проекторами, светодиодами). Цвета созданы добавив света. Объединение всех трех каналов на максимуме (R=255, G=255, B=255) дает белый цвет. Отсутствие света (R=0, G=0, B=0) не дает черного цвета. Субтрактивный (CMYK) — используется при печати. Чернила поглощают (вычитают) длины волн света. Объединение все чернила по максимуму поглощают весь свет, создавая черный цвет (в теории — в На практике добавляются ключевые/черные чернила, поскольку смешивание чернил несовершенно). Практическое значение: проектируйте цифровые работы в RGB, а затем конвертируйте их в CMYK. для печати, отметив, что некоторые яркие цвета RGB невозможно воспроизвести в CMYK.

Цветовая температура описывает теплоту или прохладу цвета. измеряется в Кельвинах (К) для источников света и воспринимается перцептивно для дизайнерских цветов. Теплые цвета (красные, оранжевые, желтые — оттенки 0–60° и 300–360°) кажутся энергичными, актуальными и манящими. Они выдвигайтесь визуально — элементы теплых тонов кажутся ближе. Холодные цвета (синий, зеленый, фиолетовый — оттенки 120–240°) чувствуют себя спокойными, заслуживающими доверия и профессиональный. Визуально они отступают — дальше появляются элементы холодных цветов. прочь. Нейтральный (белые, серые, бежевые, бирюзовые около 90–120°) сбалансированы и универсальны. В дизайне пользовательского интерфейса теплые цвета стимулируют действие (CTA), холодные цвета вызывают доверие (заголовки, фон), а нейтральные создают структуру. В разделе «О цвете» веб-сайта Color Picker отображается воспринимаемая температура. любого выбранного цвета.