Color Picker

Выберите любой цвет и мгновенно получите его код

Цветовые коды встречаются повсюду в веб-дизайне, графическом дизайне и программировании. Увидев цвет, который хочется использовать или воспроизвести, вам нужен именно его код — будь то значение HEX для CSS, тройка RGB для Photoshop или запись HSL для программного управления цветом. Этот инструмент выдаёт сразу все три формата для любого выбранного вами цвета.

Три формата цветового кода

HEX (шестнадцатеричный): самый распространённый формат в веб-разработке. Строка из шести символов — цифр 0–9 и букв A–F — с решёткой впереди. Каждая пара символов задаёт один цветовой канал: #RRGGBB. Например, у #FF5733 максимум красного (FF = 255), умеренное количество зелёного (57 = 87) и немного синего (33 = 51). HEX-коды можно записывать и сокращённо, когда оба символа в каждой паре совпадают: #FF5500 превращается в #F50.

RGB (Red, Green, Blue — красный, зелёный, синий): задаёт каждый цветовой канал целым числом от 0 (совсем нет) до 255 (максимум). Это родной формат для цифровых экранов, которые излучают свет именно в красном, зелёном и синем диапазонах. rgb(255, 87, 51) — тот же самый цвет, что и #FF5733. Значения RGB используются в CSS, JavaScript, Python и большинстве программ для редактирования изображений.

HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота): формат, более интуитивно понятный человеку. Тон — это чистый цвет, выраженный углом от 0° до 360° на цветовом круге: 0° = красный, 120° = зелёный, 240° = синий. Насыщенность — это то, насколько цвет яркий или блёклый (0% = серый, 100% = максимально насыщенный). Светлота — насколько цвет светлый или тёмный (0% = чёрный, 100% = белый, 50% = "нормальный" полностью насыщенный цвет). HSL отлично подходит для системной корректировки цветов: увеличивайте светлоту, чтобы получить более светлые оттенки, уменьшайте — чтобы получить более тёмные.

Как пользоваться инструментом

Нажмите на образец цвета, чтобы открыть встроенный в браузер выбор цвета, выберите цвет визуально или введите известное значение — и коды HEX, RGB и HSL сразу же обновятся все вместе, готовые к копированию в любой инструмент или код, с которым вы работаете. Поскольку выбор цвета использует собственный встроенный интерфейс браузера, а не кастомный виджет, он ведёт себя ровно так, как вы и ожидаете, и надёжно работает на любых устройствах.

Какой формат использовать

CSS и веб-дизайн: HEX и RGB широко поддерживаются оба, но HSL всё чаще предпочитают именно потому, что его так интуитивно легко корректировать. Сделать цвет на 10% светлее просто в HSL; в RGB для этого пришлось бы пересчитывать значения всех трёх каналов.

Печатный дизайн: для печати обычно используется CMYK (голубой, пурпурный, жёлтый, чёрный), который этот инструмент не охватывает. Для перевода цвета из цифрового вида в печатный используйте профессиональное ПО вроде Adobe Illustrator.

Программирование: RGB — родной формат для большинства графических библиотек. HSL удобен, когда нужно программно генерировать цветовые палитры.

Основы теории цвета

Понимание цвета помогает эффективнее пользоваться этим инструментом:

Комплементарные (дополнительные) цвета: цвета, расположенные друг напротив друга на цветовом круге (на расстоянии 180°), создают максимальный контраст. Красный (0°) и голубой (180°).

Аналоговые цвета: соседние на цветовом круге цвета (на расстоянии 30–60°) создают гармоничные, малоконтрастные палитры.

Триадные цвета: три цвета, равномерно расположенные с интервалом в 120°, создают яркие, сбалансированные сочетания.

Оттенки и затемнения: увеличьте светлоту HSL выше 50%, чтобы получить более светлый оттенок (tint). Уменьшите её ниже 50% для более тёмного варианта (shade).

Доступность и контраст

Стандарты веб-доступности требуют достаточного контраста между текстом и фоном. Рекомендации WCAG 2.1 устанавливают минимальное соотношение контраста 4,5:1 для обычного текста и 3:1 для крупного текста. Используйте коды цветов из этого инструмента в специализированном чекере контраста, чтобы проверить доступность.

Цветовые гармонии для дизайна

Помимо уже упомянутых базовых пар, в дизайне часто встречаются и другие сочетания. Монохромная схема использует разные оттенки, тона и затемнения одного и того же цвета, создаваемые изменением светлоты HSL при неизменных тоне и насыщенности — надёжный способ собрать целостную палитру без риска цветового конфликта. Раздельно-комплементарная схема берёт базовый цвет плюс два цвета, соседних с его дополнительным, — так получается почти тот же визуальный контраст, что и у прямой комплементарной пары, но с более мягким, нюансированным ощущением.

Веб-доступность и контраст цвета

Руководство по доступности веб-контента определяет требования к коэффициенту контрастности для читаемого текста: стандарт AA требует минимум 4,5:1 для обычного текста и 3:1 для крупного текста (18 пунктов и больше, либо 14 пунктов полужирным), тогда как более строгий стандарт AAA требует 7:1 и 4,5:1 соответственно. Высокий контраст между текстом и фоном важен для людей со слабым зрением и особенно для примерно 8% мужчин и 0,5% женщин с тем или иным видом нарушения цветовосприятия, для которых некоторые пары цветов, кажущиеся различными большинству людей, выглядят почти одинаковыми.

Именованные цвета CSS

В CSS определено 147 именованных цветов, которые можно использовать напрямую вместо шестнадцатеричного или RGB-значения — от очевидных имён вроде red, blue и black до более необычных, таких как cornflowerblue, papayawhip и rebeccapurple — последнее было названо в 2014 году в память о Ребекке Мейер, дочери разработчика CSS Эрика Мейера. Выбрав цвет этим инструментом и сравнив его с ближайшим именованным цветом CSS, можно быстро понять, есть ли уже стандартное имя для примерно того оттенка, который вы задумали.

Приватно и мгновенно

Выбор цвета выполняется полностью в вашем браузере с использованием встроенного ввода цвета браузера, поэтому результаты появляются мгновенно, а выбранный вами цвет никогда не отправляется на сервер, не логируется и не передаётся кому-либо ещё.