Дизайн и цвет

Конвертер цветов

Переводите цвета между HEX, RGB, HSL, CMYK, LAB и OKLCH, проверяйте контраст и стройте оттенки.

Выбор цвета

Ползунки

Форматы

Вставьте цвет в любом формате в любое поле.

#2563EB≈ royalblue

Оттенки

Шкала от 50 до 950 вокруг вашего цвета (★). Нажмите на оттенок, чтобы выбрать его.

Гармонии

Комплементарная

Аналоговая

Триада

Раздельно-комплементарная

Квадрат

Монохромная

Проверка контраста

Текст на вашем цвете (или ваш цвет как текст). Контраст по WCAG 2.

Крупный текст

Съешь же ещё этих мягких французских булок да выпей чаю

5.17: 1

Обычный текстAAAAA
Крупный текстAAAAA
Значки и рамкиAA

Дальтонизм

Как цвет и текст видят люди с нарушением цветового зрения.

Код

Готово для вставки в ваш проект.

:root {
  --brand: #2563EB;
  --brand-rgb: 37 99 235;
  --brand-oklch: oklch(54.61% 0.2152 262.9);
}

.brand {
  color: var(--brand);
}
Как пользоваться
  1. 1Выберите цвет в квадрате, возьмите его с экрана или с картинки или вставьте код в любом формате.
  2. 2Все форматы обновляются сразу: HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH и ближайшее имя цвета CSS.
  3. 3Подстройте ползунками RGB, HSL или OKLCH и задайте непрозрачность.
  4. 4Используйте оттенки (50–950) и гармонии, проверьте контраст текста (WCAG AA/AAA) и посмотрите, как цвет видят люди с дальтонизмом.
  5. 5Скопируйте формат или готовый код для CSS, Tailwind, SCSS, Swift, Android, Flutter или GLSL. Ссылка хранит цвет, её можно отправить.
Вопросы и ответы
Какие форматы можно вставлять?
Почти любые: #f60, #ff6600, #ff660080, rgb(255 102 0), rgba(255, 102, 0, 0.5), hsl(), hsv(), hwb(), cmyk(), lab(), lch(), oklab(), oklch() и имена CSS вроде «tomato». Вставляйте в любое поле.
Что такое OKLCH и зачем он нужен?
OKLCH описывает цвет светлотой, насыщенностью и оттенком так, как их видит человек. Если менять только светлоту, цвет остаётся «тем же» — это отлично подходит для построения оттенков. Современные браузеры понимают oklch() в CSS.
Как считается CMYK?
По простой формуле из RGB, без профиля принтера. Это хорошая отправная точка, но для точных цветов печати попросите профиль у типографии.
Какой контраст нужен для текста?
WCAG 2 требует не меньше 4,5:1 для обычного текста (AA) и 3:1 для крупного текста и значков. Для AAA нужно 7:1. Кнопки «Исправить» находят ближайший цвет текста, который проходит.
Как строятся оттенки?
В OKLCH вокруг вашего цвета, со светлотой, близкой к шкале Tailwind от 50 до 950. Ваш цвет занимает ступень, которая подходит лучше всего (отмечена звёздочкой).
Моя картинка загружается, когда я беру с неё цвет?
Нет. Картинка открывается прямо в браузере и не покидает ваше устройство.