Пошук назви кольору — найближчий колір CSS

Знайдіть найближче ключове слово CSS

CSS містить довгий список іменованих ключових слів кольорів — від знайомих, як-от black, white і red, до конкретніших, як-от cornflowerblue, papayawhip і mediumseagreen. Цей пошук назви кольору допомагає зіставити будь-яке значення HEX з найближчою доступною назвою CSS. Введіть колір, і браузер порівняє його з вбудованою мапою ключових слів за відстанню RGB. Найближча назва, її значення HEX і кілька близьких альтернатив оновлюються миттєво.

Іменовані кольори корисні для швидких демо, навчання, документації та зрозумілих прикладів. Вони також допомагають описати колір комусь, коли точні токени не потрібні. Проте список іменованих кольорів обмежений і розподілений нерівномірно: є багато блідо-рожевих і блакитних відтінків, але менше точних сучасних брендових відтінків, тому найближче ключове слово слід вважати наближенням, а не ідеальною заміною вашого початкового коду HEX.

Як працює пошук найближчого кольору

Кожне ключове слово CSS має фіксовані значення червоного, зеленого й синього. Скрипт перетворює ваш HEX на RGB, а потім вимірює квадрат відстані до кожного іменованого кольору, порівнюючи три канали. Назва з найменшою відстанню показується як найближчий збіг. Цей метод швидкий і передбачуваний, тож ідеально підходить для клієнтського інструмента. Це не повна формула сприйманої різниці кольорів, тому два кольори з подібною відстанню RGB не завжди здаються людському оку однаково близькими.

Коли використовувати назви замість HEX

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