Softonic

Инструмент выбора цветов HEX

Шаг 1 / 4 Hex color

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

Как выбрать цвет

  1. 1

    Выберите цвет

    Перетащите вертикальный слайдер цвета по полному диапазону от 0 до 360°.

  2. 2

    Настройка насыщения и значения

    Нажмите или перетащите по двумерному квадрату, чтобы установить яркость и насыщенность цвета.

  3. 3

    Тонко настройте параметры с использованием входных данных

    Вводите точные значения в форматах HEX, RGB, HSL, HSV или CMYK — все пять полей будут синхронизированы.

  4. 4

    Проверьте доступность и выполните копирование

    Коэффициенты контраста в чёрно-белом формате отображаются внутри текста; одним кликом вы можете скопировать нужную нотацию.

Практические указания по цветовой нотации

Каждая модель цвета отвечает на несколько иной вопрос.

Ссылка на обозначение

Обозначение Компоненты Место применения
HEX #RRGGBB CSS, инструменты для дизайна, руководства по бренду
RGB красный — 0–255, зелёный — 0–255, синий — 0–255 CSS rgb(), программы для редактирования изображений
HSL цветовой интенсивность (0–360°), степень насыщения, степень светлости CSS hsl(), системы дизайна
HSV/HSB цветовой диапазон 0–360°, степень насыщения (%), значение/яркость (%); инструменты выбора цветов в Photoshop и Figma
CMYK циан %, магента %, жёлтый %, ключевой цвет/чёрный % Друкарство, преддрукарство
OKLCH доля света (%), цветовой интенсивность, цветовой оттенок Палитры модуля цветов современного CSS версии 4

Конфигурация контраста доступности

WCAG 2.2 определяет минимальные значения коэффициентов контраста между текстом и фоном:

– АА для обычного текста: ≥ 4,5:1 – «АА для крупного текста» (жирный шрифт размером 18 или 14 пунктов): соотношение ≥ 3:1 – «AAA» для обычного текста: соотношение ≥ 7:1

Инструмент для выбора расчитывает соотношение между белым и чёрным цветами в реальном времени. Если использование пользовательского цвета переднего плана имеет особое значение, примените специализированный инструмент проверки контраста для каждой пары цветов.

советы

В большинстве дизайнерских инструментов используется формат HEX как стандарт; однако краткая трёхзначная шестномерная форма (например, #F60) эквивалентна #FF6600, а не #F06060. HSL удобнее для создания палитр: удерживайте цветовой оттенок и регулируйте светлость для получения различных тонов и оттенков. Цветовые форматы CMYK и RGB нельзя полностью преобразовать друг в друга; печать в формате CMYK зависит от профиля печатной машины. Обязательно проверяйте результат печати на реальной бумаге. – Если вы разрабатываете интерфейс с использованием современного CSS, рекомендуется использовать кодировку OKLCH для обеспечения перцептивно единообразных уровней света.

Часто задаваемые вопросы

Photoshop использует цветовой профиль (обычно sRGB для экрана; для печати он часто отличается от этого значения). Браузеры отображают необозначенные значения в формате HEX как sRGB. Если документ настроен на формат Adobe RGB или ProPhoto, значения пикселей остаются одинаковыми, однако воспринимаемый цвет изменяется.

Да — оба значения описывают полный красный цвет: красный — при значении 255, а зелёный и синий — при значении 0. HEX представляет собой двухзначную шестнадцатеричную нотацию для каждого значения канала в диапазоне от 0 до 255.

Выберите основной цвет, перейдите в систему HSL и изменяйте светлость по шагам в 10 %, сохраняя цветовой оттенок и насыщенность неизменными. В результате получается последовательная шкала тонов и оттенков, расположенных на одном цветовом уровне.

Пользовавшиеся в последнее время цвета сохраняются в локальном хранилище браузера и сохраняются после обновления страницы. Ни что не передаётся на сервер, а историю использования палитры можно очистить в любой момент.