Подобрать и конвертировать цвет

Введите или выберите цвет, получите его в двенадцати нотациях, постройте гармоничные сочетания и шкалу 50–900 и проверьте контраст по WCAG.

Как скопировать цвет

1
Выберите цвет или вставьте значение
Введите любую нотацию, которую понимает браузер: hex-код, rgb(), hsl(), oklch() или даже имя CSS-цвета. Главное здесь — текстовое поле: образец цвета и пипетка лишь дают короткий путь к тому же значению.
2
Скопируйте цвет в любом формате
Все двенадцать нотаций показаны сразу, у каждой есть кнопка копирования. Ничего не спрятано в выпадающих списках, поэтому конвертировать HEX в RGB — один щелчок, а не три.
3
Экспортируйте палитру как CSS или JSON
Базовый цвет, его шкала из десяти шагов и все цвета, извлеченные из изображения, экспортируются вместе: как CSS custom properties, фрагмент темы Tailwind, переменные SCSS или обычный JSON.

Почему рабочее пространство — OKLCH

У HSL есть одно удобство и один серьезный недостаток. Удобство в том, что тон, насыщенность и светлота — это отдельные числа, с которыми легко работать. Недостаток в том, что светлота в HSL не совпадает с тем, как светлым выглядит цвет: hsl(60 100% 50%) — ослепительно желтый, а hsl(240 100% 50%) — темно-синий, хотя оба якобы на пятьдесят процентов. Поэтому при вращении тона в HSL гармоничные схемы разваливаются: один образец выпрыгивает, другой пропадает. OKLCH это исправляет — его светлота привязана к человеческому восприятию, так что при смене одного только тона яркость почти не меняется. Все схемы и шкалы на этой странице считаются в OKLCH, а затем конвертируются обратно в sRGB для вывода.

Что означают числа контраста

WCAG выражает контраст как отношение относительной яркости двух цветов: от 1:1 для одинаковых цветов до 21:1 для черного по белому. Основному тексту нужно 4.5:1, чтобы пройти уровень AA. Крупный текст — от 18.66 пикс или 14 пикс жирным — и элементы интерфейса вроде иконок и рамок инпутов требуют 3:1. Для AAA нужен контраст 7:1 у основного текста. Это не вопрос вкуса: именно эти пороги отделяют страницу, которую можно прочитать на солнце или с неидеальным зрением, от страницы, которую нельзя. Если пара не дотягивает, кнопка рядом с вердиктом понижает светлоту в OKLCH, пока цвет не пройдет проверку. Так вы получаете максимально близкий к исходному цвет, а не совсем другой.

Палитры из фотографий

Загрузите изображение, и его доминирующие цвета будут извлечены методом median cut: облако пикселей многократно делится по каналу с наибольшим разбросом, а среднее значение в каждом получившемся «ящике» становится образцом цвета. Затем почти дубликаты отбрасываются с помощью CIEDE2000, перцептивной метрики расстояния между цветами, чтобы вы получили шесть разных оттенков, а не шесть вариаций одного и того же неба. Картинка сначала уменьшается до 400 пикс по ширине или высоте и никогда не покидает ваш браузер.

Цвета и изображения остаются в этой вкладке

Все конвертации — это простая арифметика в JavaScript на вашем устройстве, без единого запроса к серверу. Изображение, которое вы перетащите для палитры, декодируется, уменьшается и просматривается локально, оно не загружается и не сохраняется. Закройте вкладку — и ничего не останется.

Частые вопросы

Почему OKLCH лучше, чем HSL?

Потому что его светлота совпадает с тем, как ее видит глаз. В HSL два цвета с одинаковым значением lightness могут выглядеть совсем разной яркости, из-за чего разваливаются гармоничные схемы и тональные шкалы. OKLCH спроектирован как перцептивно равномерное пространство, поэтому равные шаги выглядят равными.

Почему значение CMYK только для справки?

Реальное разделение на CMYK зависит от печатной машины, красок и бумаги. Все это описывается ICC-профилем. Здесь показан результат простой арифметической конвертации: его хватает для общего представления, но не для тиража. Попросите у типографии числа, посчитанные с учетом нужного профиля.

Как читать контраст вроде 4.5:1?

Это отношение яркости двух цветов. 4.5:1 — минимальный контраст по WCAG AA для основного текста, 3:1 достаточно для крупного текста и элементов интерфейса, а 7:1 соответствует AAA. Чем выше число, тем лучше читаемость; 21:1 — это черный по белому.

Работает ли пипетка в Safari и Firefox?

Пока нет — EyeDropper API есть только в Chromium. В других браузерах кнопка так и скажет и предложит другой путь: загрузить картинку и взять нужный цвет из получившейся палитры.

Как получить палитру из фото?

Откройте настройки, выберите изображение и укажите, сколько цветов нужно — от трех до двенадцати. Доминирующие цвета появятся в виде образцов, которые можно копировать по одному или экспортировать вместе со всей палитрой.

Мое изображение куда-нибудь загружается?

Нет. Браузер декодирует файл, рисует его на canvas в размере 400 пикс и считывает оттуда образцы. Ничего не передается по сети, сам файл нигде не сохраняется.

Зачем нужна шкала 50–900?

Это тональная линейка, к которой привыкли дизайн-системы и Tailwind: десять шагов одного тона от почти белого до почти черного. Насыщенность постепенно уменьшается на обоих концах, потому что полная насыщенность при очень высокой или очень низкой светлоте выходит за пределы sRGB и после обратного пересчета выглядит грязно.