Поиск Названия Цвета

CSS и дизайн-системы используют именованные цвета (типа 'coral', 'steelblue', 'goldenrod'), но большинство инструментов выдают HEX-коды. Этот поиск сопоставляет любое значение HEX или RGB с ближайшим именованным цветом.

Built by Bob Article by Lace QA by Ben Shipped

Как использовать

  1. 1

    Введи HEX-код или значения RGB.

  2. 2

    Получи название ближайшего именованного цвета.

  3. 3

    Посмотри точный HEX, RGB и живой образец цвета.

  4. 4

    Скопируй название для использования в CSS или дизайн-инструменте.

Часто задаваемые вопросы

Ratings & Reviews

Rate this tool

Sign in to leave a written review.
Loading reviews…

Дизайнер прислал макет с кодом #FF6B6B, а тебе нужно сказать словами, что это за цвет. Этот инструмент находит название цвета по коду: вставляешь HEX или выбираешь цвет пипеткой и получаешь ближайшее имя из стандартных цветов CSS. В нашем примере это salmon, «лососевый». Имена английские, как в CSS, но по ним легко найти русский аналог: teal — сине-зелёный, «тил», tan — светло-коричневый, khaki — хаки. Пригодится и русская привычка различать синий и голубой: CSS-цвет blue — это насыщенный синий, а голубое небо ближе к deepskyblue.

Что делает этот инструмент

Поиск названия цвета берёт HEX-код и подбирает к нему ближайший именованный цвет из встроенного списка: 32 базовых имени CSS, от red, teal и navy до salmon, khaki и lavender. Удобно, когда дизайнер присылает #1B6B45, а тебе нужно назвать цвет чем-то запоминающимся, или когда хочешь описать словами цвет, который видишь.

Работает в браузере, поиск мгновенный, данные никуда не отправляются.

Как пользоваться

  1. Введи HEX-цвет из шести символов в поле или выбери цвет в палитре слева. Подходят и #1B6B45, и 1B6B45. Короткая запись вроде #F00 не принимается.
  2. Нажми «Найти название цвета».
  3. В результате появится образец найденного именованного цвета, его название, точный HEX и значения RGB. Сравни этот HEX со своим: если они совпадают, совпадение точное, если нет — это ближайший цвет из списка, а не тот же самый.
Пример. Фирменного цвета #1B6B45 в CSS нет. Ближайший из списка — teal (#008080), родственный, но заметно другой оттенок. Название всё равно помогает описать цвет словами («тёмный сине-зелёный, вроде teal, но зеленее»), даже если у твоего HEX стандартного имени нет.

Откуда берутся названия цветов

Именованные цвета CSS. Спецификация CSS задаёт около 140 именованных цветов, которые понимают браузеры: red, blue, seagreen, tomato, cornflowerblue, papayawhip и так далее. Большинство из них досталось от системных цветов X11, которые старше самого веба. Инструмент ищет по 32 самым узнаваемым из них.

Цвета X11. Оконная система Unix X11 ещё в 1980-х задала сотни именованных цветов в файле rgb.txt. CSS взял большинство из них, поэтому в CSS есть такие странно конкретные цвета, как papayawhip и navajowhite.

Pantone и фирменные цвета. Pantone — проприетарная система подбора цветов для печати и брендинга. У неё свои названия (Pantone 281C, Pantone 2945C и т. д.), но система лицензируется и недоступна для таких инструментов, как этот. Приблизительные соответствия существуют, но юридически это не Pantone.

Как ищется «ближайший цвет»

Похожие для человеческого глаза цвета не всегда близки по значениям RGB. Поэтому серьёзный подбор цветов ведут в перцептивных цветовых пространствах вроде CIE Lab и меряют разницу метрикой Delta E (ΔE): она приближает то, как глаз воспринимает разницу между цветами.

Инструмент Microapp устроен проще: он считает обычное евклидово расстояние в пространстве RGB (сумму квадратов разниц по красному, зелёному и синему каналам) и выбирает цвет с наименьшим расстоянием. Это быстро и предсказуемо, и для повседневной задачи «как назвать этот HEX» этого хватает. Для точного подбора цветов в печати или калибровки дисплея нужен специализированный инструмент и откалиброванный монитор.

Где это пригодится

Назвать цвет словами. «Сделай кнопку #1B6B45» — точно, но не запоминается. «Сделай кнопку цвета teal, только зеленее» проще удержать в голове на созвоне. Инструмент даёт тебе словесный ярлык.

Документация и дизайн-системы. Если подписать цвета ближайшим стандартным названием, в токенах проще разобраться: brand-green ≈ teal в документации к токенам.

Разобрать чужой сайт. Понравился цвет на другом сайте? Возьми его HEX пипеткой и прогони через этот поиск: у цвета появится название, по которому его можно искать.

Аудит доступности. Когда проверяешь контраст, название иногда упрощает отчёт: «серый gray-700 в основном тексте» читается понятнее, чем «#374151».

Частые ошибки

«Ближайший» не значит «такой же». Цвет blue — это #0000FF. Цвет, который почти синий (#0010FF), тоже получит название blue как ближайшее, но это разные цвета. Сравни HEX в результате со своим, чтобы понять, точное ли совпадение.

У фирменных цветов обычно нет имени в CSS. Фирменные палитры специально делают узнаваемыми. Не жди, что красный Coca-Cola, голубой Tiffany или зелёный Microapp совпадут с именованным цветом CSS: обычно их задают только через HEX.

В разных системах названия значат разное. Lavender в CSS — это #E6E6FA, очень бледный. «Лавандовый» в цветоводстве или моде гораздо насыщеннее. Поиск по названиям CSS даёт веб-стандарт, а не бытовое значение.

Похожие инструменты

Чтобы перевести цвет между HEX, RGB, HSL и HSV, используй Конвертер цветов. Выбрать цвет мышкой удобнее в Палитре HEX-цветов. А собрать гармоничную палитру вокруг базового цвета поможет Генератор цветовых палитр.