Поиск названия цвета — ближайший цвет CSS

Найдите ближайшее ключевое слово CSS

CSS включает длинный список именованных ключевых слов цветов — от привычных, таких как black, white и red, до более специфичных, например cornflowerblue, papayawhip и mediumseagreen. Этот поиск названия цвета помогает сопоставить любое значение HEX с ближайшим доступным названием CSS. Введите цвет, и браузер сравнит его со встроенной картой ключевых слов по расстоянию RGB. Ближайшее название, его значение HEX и несколько близких альтернатив обновляются мгновенно.

Именованные цвета полезны для быстрых демо, обучения, документации и читаемых примеров. Они также помогают описать цвет другому человеку, когда точные токены не нужны. Однако список именованных цветов ограничен и распределён неравномерно: есть много бледно-розовых и голубых оттенков, но меньше точных современных фирменных тонов, поэтому ближайшее ключевое слово следует считать приближением, а не идеальной заменой вашего исходного кода HEX.

Как работает поиск ближайшего цвета

У каждого ключевого слова CSS есть фиксированные значения красного, зелёного и синего. Скрипт преобразует ваш HEX в RGB, а затем измеряет квадрат расстояния до каждого именованного цвета, сравнивая три канала. Название с наименьшим расстоянием показывается как ближайшее совпадение. Этот метод быстрый и предсказуемый, поэтому идеально подходит для клиентского инструмента. Это не полноценная формула воспринимаемой цветовой разницы, так что два цвета с похожим расстоянием RGB не всегда кажутся человеческому глазу одинаково близкими.

Когда использовать названия вместо HEX

Для рабочих дизайн-систем HEX, RGB, HSL или пользовательские свойства обычно лучше названий цветов, так как сохраняют точный замысел. Названия хороши в примерах, быстрых прототипах, записях блога и разговорах, где читаемость важнее точности. Если вы используете именованный цвет в боевом CSS, протестируйте его во всём интерфейсе, как и любой другой токен. Ближайшему ключевому слову всё равно может потребоваться проверка контраста, прежде чем оно станет фоном, цветом текста или индикатором статуса.