Поиск названий цветов
Найдите ближайший цвет с названием CSS для любого значения цвета. Вставьте до 100 цветов в любом формате CSS и получите для каждого ближайшие 148 именованных цветов CSS, отсортированные по цветовому различию CIEDE2000, с названием, шестнадцатеричным кодом, значением Delta E и оценкой сходства. Для каждого цвета можно показать до 10 совпадений. Удобно для создания названий дизайн-токенов, описания цветов в документации и быстрого поиска ключевого слова.
Часто задаваемые вопросы
Какие названия цветов ищутся?
В наборе CSS Color 4 есть 148 именованных цветов: от aliceblue до yellowgreen, включая rebeccapurple. Названия с одинаковым значением, например aqua и cyan, fuchsia и magenta, а также варианты написания gray и grey, объединены в одной строке, поэтому остается 139 уникальных цветов. transparent и системные цвета не включены.
Как определяется ближайшее название?
С помощью цветовой разницы CIEDE2000, Delta E 2000, вычисляемой в CIELAB библиотекой culori. Это отраслевой стандарт оценки того, насколько различаются два цвета для среднего наблюдателя; чем меньше значение, тем точнее совпадение.
Что означают оценки совпадения?
«Точное» означает, что у именованного цвета тот же HEX-код. «Очень близкое» означает Delta E меньше 2: различие трудно заметить. «Похожее» означает значение меньше 5: цвета различимы при сравнении рядом. «Далекое» означает 5 или больше: название указывает лишь на общую цветовую группу.
Сколько совпадений я получу?
От 1 до 10 на каждый цвет; по умолчанию — 3, от ближайшего к самому далекому. Дополнительные совпадения полезны, если у ближайшего названия подходящая светлота, но неверный оттенок, или наоборот.
Как вводить цвета?
Введите по одному цвету в строке или несколько в одной строке, разделив их запятыми или точками с запятой; запятые внутри rgb() или hsl() не служат разделителями. Поддерживаются HEX-коды с # или без него, CSS названия цветов, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() и cmyk(); не более 100 цветов за один запуск.
Что происходит с прозрачными цветами?
Именованные цвета непрозрачны, поэтому альфа-канал игнорируется, а цвет сравнивается так, как если бы он был полностью непрозрачным. В столбце HEX отображается сравнивавшийся 6-значный код.
Что происходит с цветами широкого цветового охвата?
Цвета за пределами sRGB, например яркие цвета Display P3 или значения OKLCH, сначала преобразуются в sRGB по алгоритму CSS Color 4, поскольку все CSS именованные цвета относятся к sRGB. Затем в столбце HEX отображается преобразованное значение, с которым сравниваются названия.
Можно ли использовать название вместо моего HEX-кода?
Только при точном совпадении; в противном случае именованный цвет выглядит иначе. Близкое название все равно может служить понятной подсказкой в токене дизайна или документации, например для синего цвета, близкого к steelblue.
Почему используются только CSS названий, а не более широкий список?
CSS названия понимают все браузеры, и их можно напрямую вводить в таблицу стилей. Более крупные списки названий различаются у разных поставщиков и часто лицензируются, а эти 148 названия определены стандартом CSS.
Почему совпадение с большим Delta E может казаться мне более близким?
Delta E 2000 моделирует восприятие среднего наблюдателя при стандартных условиях просмотра. На то, какой цвет кажется ближайшим, влияют ваш дисплей, его калибровка, окружающие цвета и индивидуальные особенности цветового зрения, поэтому воспринимайте ранжирование как надежную подсказку, а не как абсолютную истину.