В этой статье
Почему поиск названий цветов важен
Цвета в цифровом дизайне обычно выражаются как hex-коды, значения RGB или значения HSL. Хотя они точны, эти числовые представления ничего не значат для большинства людей. Название цвета вроде 'Coral' или 'Steel Blue' передаёт информацию мгновенно, делая обсуждения дизайна, документацию и ревью кода более эффективными.
CSS поддерживает 148 именованных цветов, которые можно использовать непосредственно в таблицах стилей. Нахождение ближайшего именованного цвета для данного hex-кода помогает разработчикам писать более читаемый CSS и делает токены дизайн-системы более понятными.
Как работает сопоставление названий цветов
Инструменты поиска названий цветов работают путём вычисления расстояния между входным цветом и каждым именованным цветом в справочной палитре.
- Расстояние RGB — простейший метод вычисляет евклидово расстояние в цветовом пространстве RGB, рассматривая R, G и B как трёхмерные координаты
- Взвешенный RGB — корректирует вычисление расстояния, взвешивая каналы по-разному. Человеческие глаза более чувствительны к зелёному, поэтому различия в зелёном взвешиваются выше
- Delta E (CIE76/CIE2000) — преобразует цвета в цветовое пространство CIELAB, спроектированное быть перцептуально равномерным. Delta E 1.0 представляет наименьшую цветовую разницу, которую может воспринять человек
Попробуйте бесплатно — без регистрации
Найти название цвета →Справочник именованных цветов CSS
CSS определяет 148 именованных цветов, работающих во всех современных браузерах. Эти названия можно использовать везде, где принимается значение цвета.
- Базовые цвета — 16 оригинальных цветов HTML: black, white, red, green, blue, yellow, cyan, magenta и 8 других, определённых с HTML 3.2
- Расширенные цвета — 132 дополнительных названия, добавленных в CSS3, от 'AliceBlue' до 'YellowGreen', первоначально из списка цветов X11
- Специальные значения — 'transparent' (полностью прозрачный) и 'currentColor' (наследует от свойства color) также являются допустимыми ключевыми словами цветов CSS
Часто задаваемые вопросы
Насколько точно сопоставление названий цветов?
Точность зависит от алгоритма сопоставления и справочной палитры. С 148 именованными цветами CSS ближайшее совпадение может заметно отличаться от входного цвета. Для дизайнерской работы, требующей точных цветов, используйте hex или RGB значение напрямую.
В чём разница между перцептуальным и математическим цветовым расстоянием?
Математическое расстояние (евклидово RGB) рассматривает цветовое пространство как равномерное, но человеческое зрение не воспринимает цветовые различия равномерно. Мы более чувствительны к зелёному и менее к синему. Перцептуальные методы расстояния, такие как Delta E (CIE2000), учитывают эти различия, преобразуя в перцептуально равномерное цветовое пространство.
Можно ли использовать названия цветов Pantone?
Цвета Pantone — это проприетарная система с тысячами именованных цветов, используемых преимущественно в печати. Они не являются частью CSS или веб-стандартов. Конвертация между Pantone и hex-цветами является приблизительной, поскольку цвета Pantone определены для конкретных формулировок чернил и типов бумаги, а не для отображения на экране.