Студия преобразования цвета
Введите hex-код, ключевое слово CSS или целую функцию oklch() и мгновенно получите все остальные записи. Затем постройте шкалу, проверьте контраст, посмотрите, как цвет читается при дальтонизме, и заберите палитру с собой.
Hex из 3, 4, 6 или 8 знаков, а также rgb() и hsl() распознаются и без помощи браузера.
CMYK здесь — простой арифметический пересчёт, а не разделение по профилю ICC. Готовый к печати CMYK зависит от бумаги, краски и профиля вывода, и его нельзя вывести из одного значения sRGB.
Крупный заголовок, 24 пикселя
Подзаголовок, 16 пикселей, полужирный
Основной текст, 13 пикселей. Именно этот размер решает, годится ли пара цветов на деле.
Наоборот, фон в роли цвета текста: Lc -60.3
Ниже ΔE 0,05 два образца для такого зрителя — один и тот же цвет, и палитра, построенная на их различии, разваливается. Моделирование следует работе Вьено, Бреттеля и Моллона (1999) и выполняется в линейном свете.
Расстояние — это ΔE в OKLab, и около 0,02 большинство людей начинает видеть два образца как разные цвета. Щёлкните по строке, чтобы перейти именно к этому цвету.
Как это работает
Принесите цвет
Введите любую запись CSS, воспользуйтесь экранной пипеткой, вставьте целую палитру или откройте изображение и щёлкните нужный пиксель.
Придайте форму
Ползунки светлоты, цветности и тона, которые ведут себя одинаково на жёлтом и на синем, плюс шкалы, гармонии и смешение.
Проверьте
WCAG 2.1 и APCA на любом фоне, а также моделирование дальтонизма, которое предупредит, когда два образца сливаются в один.
Заберите с собой
Скопируйте одну запись, экспортируйте CSS, Tailwind, SCSS, JSON, SVG или лист образцов, либо передайте палитру следующему инструменту.
Весь синтаксис цвета CSS
Hex из 3, 4, 6 или 8 знаков, ключевые слова, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() и display-p3. Читает собственный разборщик браузера, поэтому ничего не остаётся за бортом.
Шкалы с ровным шагом
Одиннадцать ступеней, построенных в OKLCH: каждая держит постоянное зрительное расстояние до предыдущей вместо неровных скачков шкалы в HSL.
WCAG 2.1 и APCA
Классическое отношение плюс знаковое значение Lc из черновика WCAG 3, измеренные на выбранном вами фоне, а не только на белом и чёрном.
Проверка на дальтонизм
Протанопия, дейтеранопия и тританопия, смоделированные в линейном свете, с наименьшим расстоянием между двумя образцами: сразу видно, когда палитра рассыпается.
Пипетка и изображения
Возьмите цвет из любой точки экрана там, где браузер это разрешает, или откройте изображение, приблизьте пиксель под курсором и заберите его точное значение.
Гармонии и смешение
Дополнительные, аналогичные, триадные, разделённые, тетрадные и монохромные наборы, повёрнутые в OKLCH, плюс перцептивное смешение по короткой дуге тона.
Экспорт куда угодно
Пользовательские свойства CSS, блок @theme для Tailwind, переменные SCSS, JSON, лист образцов в SVG или PNG и файл палитры GIMP.
Ничего не покидает вкладку
Ни загрузок, ни обращений к API, ни учётной записи. Каждое преобразование, каждое число контраста и каждую палитру считает ваш собственный браузер.
Мгновенная локальная обработка
Каждое преобразование — это арифметика над тремя числами, так что ждать нечего и отправлять некуда. Чтение вашего ввода отдано движку CSS самого браузера, поэтому ключевые слова, color-mix() и записи с расширенным охватом понимаются, а не отвергаются. Перцептивная часть — шкалы в OKLCH, приведение к охвату, расстояния ΔE, моделирование дальтонизма — это несколько сотен операций с плавающей точкой, и даже извлечение палитры из большой фотографии сводится к одному проходу k-средних по уменьшенной копии, который укладывается заметно меньше чем в секунду.
Самое неудобное в работе с цветом редко бывает самим пересчётом: это получить шкалу, которая идёт ровным шагом, доказать, что пара цветов читается, и отдать результат в том виде, которого ждёт ваш код. Инструмент закрепляет одиннадцатиступенчатую шкалу на цвете, который у вас уже есть, показывает, какие ступени пришлось вернуть в sRGB и насколько, называет ближайшее ключевое слово CSS и токен Tailwind с измеренным расстоянием и экспортирует всю палитру как пользовательские свойства, блок темы Tailwind, SCSS, JSON или лист образцов.
У этого инструмента нет серверной части. Цвета, которые вы вводите, палитры, которые вставляете, и изображения, которые открываете, остаются во вкладке: изображение раскодируется в холст, который никогда не покидает ваше устройство, а закрытие вкладки стирает всё. Наружу уходит только то, что вы сами поместили в адресную строку — палитра кодируется там, чтобы вы могли поделиться ссылкой, и больше ничего о вашем сеансе не записывается.
Частые вопросы
QКакие форматы цвета можно вставлять?+
Hex из 3, 4, 6 или 8 знаков, 148 ключевых слов CSS, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() и color(display-p3 …). Ввод проходит через разборщик CSS самого браузера, поэтому работает всё, что ваш браузер принимает в таблице стилей. Без этого разборщика инструмент по-прежнему читает hex, rgb() и hsl().
QПочему инструмент предпочитает OKLCH, а не HSL?+
В HSL два цвета с одинаковым значением светлоты могут выглядеть совершенно по-разному: жёлтый на 50% читается куда светлее, чем синий на 50%. OKLCH построен так, чтобы его светлота совпадала с тем, что сообщает глаз, поэтому шкалы, гармонии и смешение здесь вращаются и интерполируются именно в этом пространстве.
QЧто означает число ΔE?+
Это расстояние между двумя цветами в OKLab. Около 0,02 большинство людей начинает видеть два образца как по-настоящему разные цвета, так что мера удобна: она показывает, насколько сместилась ступень шкалы, когда её пришлось вернуть в sRGB, насколько на самом деле близок ближайший токен Tailwind и переживут ли два цвета палитры моделирование дальтонизма.
QСоответствует ли проверка контраста стандарту WCAG?+
Отношение по WCAG 2.1 считается ровно так, как задано спецификацией, на выбранном вами фоне, и метка отличает основной текст от более мягкого порога для крупного текста вместо одного значка «пройдено». Рядом идёт APCA — перцептивная мера, предложенная для WCAG 3: полезная на практике, но всё ещё черновик, а не критерий соответствия.
QГодится ли выданный CMYK для печати?+
Нет, как и у любого браузерного инструмента. Вы получаете обычный арифметический пересчёт, которого хватает для приблизительного представления или для программы, ожидающей эти четыре числа. Настоящее цветоделение зависит от бумаги, красок и профиля вывода ICC, поэтому его делают в вёрстке или в графическом редакторе.
QОтправляется ли куда-нибудь то, что я вставляю?+
Нет. Серверной части нет, аналитики по вашим цветам нет, и сетевых запросов при преобразовании не происходит вовсе. Изображения раскодируются локально в холст и выбрасываются, когда вы их закрываете. Палитра записывается в адрес страницы, чтобы вы могли поделиться ею или сохранить в закладках — это единственное место, где остаются ваши цвета, и оно не покидает ваше устройство, пока вы сами не отправите ссылку.