Поиск CSS-имён цветов — ближайший именованный цвет по HEX
Введите HEX-код цвета или воспользуйтесь палитрой, чтобы найти ближайший именованный цвет CSS4. Инструмент сравнивает ваш цвет со всеми 148 стандартными именованными CSS-цветами с использованием перцептивного расстояния и показывает 5 ближайших совпадений. Отлично подходит для поиска читаемых названий цветов для кода и документации.
5 ближайших именованных CSS-цветов:
Как это работает
Именованные цвета CSS: краткая история
Именованные цвета CSS прошли путь эволюции через несколько версий спецификации. Первоначальный CSS 1 (1996 года) определял лишь 16 базовых цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow. CSS 2 добавил orange. CSS 3 расширил список до 147 цветов на основе цветового списка X11, восходящего к цветовой базе данных системы X Window, поддерживавшейся в MIT в 1980-х годах.
CSS Color Level 4 добавил ещё одно имя — rebeccapurple (#663399). Этот цвет был включён в спецификацию в память о Ребекке Алиссе Мейер, дочери веб-разработчика Эрика Мейера, скончавшейся от рака мозга в 2014 году в возрасте 6 лет. Её любимым цветом был фиолетовый, и рабочая группа CSS проголосовала за включение её имени в стандарт как дань памяти. С этим дополнением спецификация CSS4 определяет ровно 148 именованных цветов — именно по этому полному набору и выполняется поиск в данном инструменте.
Как рассчитывается расстояние между цветами
Простое сравнение RGB-значений по евклидовому расстоянию плохо соответствует человеческому восприятию: наши глаза более чувствительны к различиям в зелёном, чем в синем, и эта чувствительность меняется в зависимости от диапазона яркости. Инструмент использует взвешенную евклидову формулу на основе «метрики цвета» Тиадмера Римерсмы, которая корректирует веса каналов R, G и B в зависимости от среднего значения красной составляющей. Результат гораздо точнее соответствует тому, как человек воспринимает цветовые различия.
Формула: ΔE = √[(2 + R̄/256)·ΔR² + 4·ΔG² + (2 + (255-R̄)/256)·ΔB²], где R̄ — средняя красная составляющая двух цветов. Это упрощённая перцептивная метрика; профессиональная колориметрия использует вычисления CIELAB ΔE, раздельно учитывающие светлоту, хрому и тон. Однако для практических целей именования упрощённая метрика даёт интуитивно верные результаты для большинства цветов.
Когда использовать именованные цвета в CSS
Именованные цвета наиболее полезны для быстрого прототипирования, читаемости кода и отладки. Написать `color: tomato` быстрее и проще для запоминания, чем `color: #FF6347`. Они также удобны в учебных материалах, визуализации данных (где семантическое название помогает передать смысл) и в дизайн-системах, где ограниченный набор именованных цветов образует палитру. W3C рекомендует использовать именованные цвета в примерах и обучающих материалах для повышения читаемости.
В продакшн-дизайн-системах именованные цвета редко становятся основной палитрой: предпочтение отдаётся пользовательским HEX-значениям, HSL или именам дизайн-токенов. Тем не менее знать ближайший именованный цвет к произвольному значению полезно для документации, цветовых пометок в код-ревью и при необходимости быстро описать цвет словами. Данный инструмент заполняет этот пробел, находя CSS-имя, которое наилучшим образом описывает любой произвольный HEX-цвет.
Частые вопросы
›Сколько именованных CSS-цветов существует?
CSS Color Level 4 определяет 148 именованных цветов: 16 базовых из CSS 1, orange из CSS 2, 130 цветов на основе X11 из CSS 3 и rebeccapurple, добавленный в CSS 4 в память о Ребекке Мейер. Обратите внимание: aqua и cyan — это псевдонимы (одинаковый HEX #00FFFF), как и fuchsia с magenta (#FF00FF).
›Чувствительны ли названия CSS-цветов к регистру?
Нет. Согласно спецификации, названия CSS-цветов не зависят от регистра. 'Red', 'RED', 'red' и 'rEd' — это одно и то же. По соглашению в современном CSS принято использовать строчные буквы.
›Что такое rebeccapurple?
Цвет rebeccapurple (#663399) был добавлен в CSS Color Level 4 в память о Ребекке Алиссе Мейер, дочери CSS-эксперта Эрика Мейера, скончавшейся от рака мозга в 2014 году в возрасте 6 лет. Её любимым цветом был фиолетовый, и рабочая группа CSS увековечила её память, дав этот цвет её именем. Это единственный цвет, добавленный в CSS 4, и первый новый именованный цвет после CSS 2.
›Почему именованные CSS-цвета охватывают не все возможные цвета?
148 именованных цветов — это отобранный набор на основе исторических X11-цветовых списков. Они охватывают распространённые оттенки, но многие цвета остаются безымянными: для большинства сине-зелёных, розово-оранжевых или коричнево-красных оттенков CSS-имён нет. Для точных дизайн-задач используются HEX-коды, rgb() или hsl().
›В чём разница между gray и grey в CSS?
Оба варианта написания допустимы в CSS. 'gray' — официальное американское написание по спецификации, но 'grey' (британский вариант) также является допустимым синонимом для того же цвета (#808080). Аналогично принимаются 'lightgray'/'lightgrey', 'darkgray'/'darkgrey', 'dimgray'/'dimgrey', 'slategray'/'slategrey' и 'darkslategray'/'darkslategrey'.
›Насколько точно подбирается ближайший цвет?
Для подбора используется формула перцептивного расстояния, взвешивающая RGB-каналы по чувствительности человеческого глаза. Для большинства повседневных цветов — насыщенных красных, синих, зелёных — ближайший именованный цвет воспринимается как интуитивно верный. Для очень приглушённых, тёмных или коричневатых цветов восприятие более субъективно, и «ближайший» вариант может казаться неточным. Отображаемый балл расстояния (Δ) помогает оценить близость совпадения: чем меньше — тем лучше.
›Можно ли использовать инструмент для поиска доступных названий цветов для alt-текста?
Да. Инструмент удобен для записи названий цветов в alt-текстах, документации и дизайн-комментариях. Если нужно описать цвет элемента интерфейса читателю, который его не видит, ближайший именованный CSS-цвет даёт широко узнаваемое название. Для очень специфических оттенков сочетайте CSS-имя с уточняющим словом (например, «тёмный бирюзовый» для #008080).
›Какие HEX-цвета имеют точные совпадения с CSS-именами?
Любой из 148 стандартных именованных CSS-цветов даст точное совпадение. Распространённые примеры: red = #FF0000, blue = #0000FF, white = #FFFFFF, black = #000000, coral = #FF7F50, tomato = #FF6347, skyblue = #87CEEB. Проверить любой HEX можно, введя его и дождавшись сообщения «Точное совпадение».
Похожие инструменты
Обновлено: