Название цвета по коду
Вставьте цвет в HEX, rgb(), hsl() или другой записи и посмотрите пять ближайших именованных цветов CSS, отсортированных по видимой разнице. Или введите имя, чтобы узнать его точное значение. Имена — это ключевые слова CSS, они существуют только на английском.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Введите или вставьте цвет. Подходят HEX с решёткой или без,
rgb(...), hsl(...), hsv(...), cmyk(...) и oklch(...).
- Посмотрите список: первая строка — ближайший именованный цвет, за ней ещё четыре. В каждой строке — HEX и расстояние.
- Чтобы пойти в обратную сторону, введите имя цвета CSS. Инструмент покажет его HEX и RGB и другое имя того же цвета, если оно есть.
Как это работает
Каждый цвет переводится из sRGB в OKLab. Инструмент считает евклидово расстояние от вашего цвета до каждого из 148 имён CSS и сортирует результаты. Имена с одним значением (gray и grey, aqua и cyan, fuchsia и magenta) показываются одной строкой, например gray / grey. Расстояние умножается на 100 и округляется до одного знака после запятой.
Пример
Для #3366cc, который стоит по умолчанию, точного имени нет. Ближайшие: royalblue (#4169e1, расстояние 3,6), slateblue (6,9), steelblue (9,6), mediumslateblue (10,5) и dodgerblue (12,5). А #fe0000 отличается от чистого красного на единицу в красном канале, поэтому первым идёт red с расстоянием 0,2.
Советы
- Небольшое расстояние, примерно до 2, значит, что имя хорошо описывает цвет. При большем расстоянии имя — лишь грубая подпись.
- Имена делают стили читаемее, но HEX точнее. Пишите имя, когда совпадение точное.
- Кнопка Копировать в строке берёт имя, чтобы сразу вставить его в CSS.
Частые вопросы
Почему имена цветов на английском?
Инструмент ищет именованные цвета CSS — ключевые слова вроде red, tomato или royalblue, которые можно писать прямо в стилях вместо HEX-кода. В CSS они есть только в английском написании, поэтому и показываются так; русских синонимов браузер не поймёт.
Сколько именованных цветов в CSS?
Модуль CSS Color Level 4 определяет 148 ключевых слов цвета, включая rebeccapurple. Различных цветов среди них 139: gray и grey, aqua и cyan, fuchsia и magenta совпадают. Инструмент знает их все.
Как выбирается ближайший цвет?
Оба цвета переводятся в OKLab — пространство, в котором равные шаги в числах выглядят для глаза как равные различия. Выбираются имена с наименьшим расстоянием по прямой, умноженным на 100 для наглядности. Расстояние 0 — точное совпадение.
Почему ответ иногда отличается от простого сравнения RGB?
При прямом сравнении красного, зелёного и синего завышаются различия, которые глаз почти не замечает, и занижаются другие. Расстояние в OKLab ближе к восприятию, поэтому может выбрать другое имя, чем поканальное сравнение.
Можно ввести имя и получить HEX?
Да. Регистр не важен, пробелы, дефисы и подчёркивания игнорируются: Rebecca Purple, rebecca-purple и rebeccapurple дают #663399.