Как пользоваться: Поиск названия цвета
- Введите HEX-код (например,
#55AAEE) или любой CSS-цвет либо выберите цвет в палитре. - Посмотрите ближайшее название и степень совпадения (ΔE — чем меньше, тем ближе).
- Скопируйте готовое имя переменной для CSS, SCSS, JavaScript или Tailwind.
- Чтобы назвать всю палитру, вставьте несколько цветов в поле массовой обработки и скопируйте сгенерированный блок
:root.
Зачем называть цвета?
HEX-код вроде #55AAEE ничего не говорит на код-ревью, а --cerulean говорит. Понятные названия цветов делают дизайн-токены читаемыми, помогают дизайнерам и разработчикам говорить об одном и том же цвете и не допускают появления переменных вроде --blue-2-new-final в кодовой базе.
Как работает подбор
Инструмент сравнивает ваш цвет примерно с 5 000 отобранных вручную названий из открытого проекта color-names (лицензия MIT). Расстояния измеряются в перцептивно равномерном цветовом пространстве OKLab, поэтому «ближайшее» название — то, которое действительно выглядит наиболее похожим, а не просто имеет близкие числовые значения. Значение ΔEOK показывает степень близости: меньше примерно 2 — практически неотличимо, от 2 до 5 — близко, больше 5 — название является лишь приблизительным описанием.
Также вы видите ближайшее из 148 официальных CSS-ключевых слов цвета (например, royalblue или tomato), которые можно использовать непосредственно в CSS.
Соглашения об именовании токенов
| Контекст | Соглашение | Пример |
|---|---|---|
| CSS custom property | kebab-case | --ocean-blue |
| Переменная SCSS | kebab-case с префиксом | $color-ocean-blue |
| JavaScript / TypeScript | camelCase | oceanBlue |
| Ключ темы Tailwind | kebab-case | bg-ocean-blue |
Описательные и семантические названия
Описательные названия (ocean blue) отлично подходят для базовой палитры. Компоненты обычно должны ссылаться на семантические токены (--color-primary, --color-danger), которые указывают на описательные, чтобы можно было сменить брендинг без переименования всего. Полную шкалу оттенков для каждого базового цвета можно создать с помощью Tailwind Color Generator.
Также ищут как: название цвета по hex, name that color, hex color name, css переменные цветов.
Инструменты, которые хорошо сочетаются с Поиск названия цвета
- Палитра цветов из изображения — Узнайте палитру цветов любого изображения: фото, логотипа, скриншота или дизайна.
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
- CSS-переменные в Tailwind — Превратите цветовые переменные :root в тему Tailwind одной вставкой — конфиг tailwind.config.js для v3 или @theme для v4, с готовыми значениями или ссылками var().
- Смеситель цветов — Выберите два цвета и количество шагов, чтобы получить равномерно смешанные промежуточные цвета.
Часто задаваемые вопросы
Какой это цвет: #008080?
#008080 — это Teal, он также входит в официальные CSS-ключевые слова цвета. Вставьте любой код выше, чтобы определить его.Это официальные названия цветов?
tomato). Остальные названия взяты из отобранного сообществом списка и являются описательными метками, а не стандартом.Насколько точно подбирается название?
Можно назвать сразу много цветов?
:root. Повторяющиеся имена получат числовой суффикс.