У цій статті
Чому пошук назв кольорів важливий
Кольори в цифровому дизайні зазвичай виражаються як hex-коди, значення RGB або значення HSL. Хоча вони точні, ці числові представлення нічого не означають для більшості людей. Назва кольору на кшталт 'Coral' або 'Steel Blue' передає інформацію миттєво, роблячи обговорення дизайну, документацію та огляд коду ефективнішими.
CSS підтримує 148 іменованих кольорів, які можна використовувати безпосередньо в таблицях стилів. Знаходження найближчого іменованого кольору для заданого hex-коду допомагає розробникам писати більш читабельний CSS та робить токени дизайн-системи більш зрозумілими.
Як працює відповідність назв кольорів
Засоби пошуку назв кольорів працюють, обчислюючи відстань між вхідним кольором і кожним іменованим кольором у довідковій палітрі.
- Відстань RGB — найпростіший метод обчислює євклідову відстань у колірному просторі RGB, розглядаючи R, G та B як тривимірні координати
- Зважений RGB — коригує обчислення відстані, зважуючи канали по-різному. Людські очі чутливіші до зеленого, тому різниці в зеленому зважуються вище
- Delta E (CIE76/CIE2000) — перетворює кольори в колірний простір CIELAB, який спроектований бути перцептуально рівномірним. Delta E 1.0 представляє найменшу колірну різницю, яку може сприйняти людина
Спробуйте безкоштовно — реєстрація не потрібна
Знайти назву кольору →Довідник іменованих кольорів CSS
CSS визначає 148 іменованих кольорів, які працюють у всіх сучасних браузерах. Ці назви можна використовувати всюди, де приймається значення кольору.
- Базові кольори — 16 оригінальних кольорів HTML: black, white, red, green, blue, yellow, cyan, magenta та 8 інших, визначених з HTML 3.2
- Розширені кольори — 132 додаткові назви, додані в CSS3, від 'AliceBlue' до 'YellowGreen', первинно зі списку кольорів X11
- Спеціальні значення — 'transparent' (повністю прозорий) та 'currentColor' (успадковує від властивості color) також є дійсними ключовими словами кольорів CSS
Часті запитання
Наскільки точний пошук назв кольорів?
Точність залежить від алгоритму відповідності та довідкової палітри. З 148 іменованими кольорами CSS найближча відповідність може все ще помітно відрізнятися від вхідного кольору. Для дизайнерської роботи, що вимагає точних кольорів, використовуйте hex або RGB значення безпосередньо.
Яка різниця між перцептуальною та математичною колірною відстанню?
Математична відстань (евклідова RGB) розглядає колірний простір як рівномірний, але людський зір не сприймає колірні різниці рівномірно. Ми чутливіші до зеленого і менш чутливі до синього. Перцептуальні методи відстані, такі як Delta E (CIE2000), враховують ці різниці, перетворюючи в перцептуально рівномірний колірний простір.
Чи можна використовувати назви кольорів Pantone?
Кольори Pantone — це пропрієтарна система з тисячами іменованих кольорів, які використовуються переважно в друці. Вони не є частиною CSS або веб-стандартів. Конвертація між Pantone та hex-кольорами є приблизною, оскільки кольори Pantone визначені для конкретних формулювань чорнил та типів паперу, а не для відображення на екрані.