Online Tool Store
Генератор Назв Кольорової Палітри
Вставте список кольорів і отримайте для кожного назву, найближчий колір CSS, попередження про майже-дублікати та контраст WCAG — експорт у CSS або JSON.
🔒 Цей інструмент працює повністю у вашому браузері. Ваші файли ніколи не завантажуються на сервер.
Інструмент браузера
Генератор Назв Кольорової Палітри
Як це працює
- Вставте свої кольори — hex, rgb() або назви кольорів CSS, по одному в рядку або через кому.
- Кожен отримує назву: точну назву кольору CSS при близькому збігу, інакше згенерований опис на кшталт «Насичений темно-синій».
- Перевірте попередження про майже однакові кольори та значення контрасту, якщо використовуватимете колір як текст або фон.
- Експортуйте всю палітру як CSS-змінні або JSON.
FAQ
Чи завантажуються мої дані кудись?
Ні. Color Palette Namer працює повністю у вашому браузері — нічого не надсилається на сервер.
Звідки беруться назви?
З двох джерел. Якщо колір дуже близький до одного з 148 стандартних ключових слів кольору CSS (наприклад, «forestgreen» або «royalblue» — перевірено за специфікацією CSS/SVG), використовується ця точна назва. Інакше описова назва генерується з відтінку, світлоти та насиченості, наприклад «Насичений темно-синій» — ніколи не вигадана, неможлива для перевірки назва.
Що вважається кольором «майже-дублікат»?
Два кольори, достатньо близькі в перцептивному кольоровому просторі (вимірюється в CIE Lab, а не в сирому RGB), щоб виглядати майже однаково поруч — поширена річ, яку варто виявити перед публікацією палітри з двома невиразними зразками.
Що означають значення контрасту?
Коефіцієнт контрастності WCAG 2 цього кольору відносно чистого білого та чистого чорного, від 1:1 (немає контрасту) до 21:1 (чорний на білому). AA потребує 4,5:1 для звичайного тексту або 3:1 для великого тексту; AAA потребує 7:1 — корисно для перевірки, чи безпечний колір як текст або фон.
Чи можу я ввести кілька кольорів одразу?
Так — по одному в рядку або через кому. Приймаються hex-коди, rgb()/rgba() і назви кольорів CSS.
Наскільки точний результат?
148 точних назв кольорів CSS перевірено за специфікацією CSS Color Module / SVG. Відстані між кольорами використовують стандартне перетворення sRGB у Lab, звірене з опублікованими еталонними значеннями. Описові назви — це схема з чітких діапазонів відтінку/світлоти/насиченості, а не здогадка.
Чи можу я використовувати назви для дизайн-токенів або styleguide?
Так — саме для цього він і створений: перетворення палітри hex-кодів на зрозумілі людині назви, які можна використовувати в назвах токенів, документації або styleguide замість сирих hex-значень.
Як ми порівнюємось
| Функція | Online Tool Store | Пошук hex Theme & Color | Платне дизайнерське ПЗ |
|---|---|---|---|
| Називає всю палітру одразу, а не по одному кольору | ✓ | ✗ | ✓ |
| Позначає майже-дублікати кольорів у тій самій палітрі | ✓ | Не застосовується — лише один колір | ✗ |
| Контраст WCAG до білого та чорного показано одразу | ✓ | ✗ | Зазвичай окремий інструмент |
| Точний збіг використовує перевірену стандартну назву кольору CSS | ✓ | ✓ | Іменування, специфічне для бренду |
| Безкоштовно, без реєстрації | ✓ | ✓ | Часто за підпискою |
Інструменти пошуку назви для одного кольору створені для перевірки одного зразка за раз. Цей створений для перегляду цілої палітри — перевірки майже-дублікатів і контрасту — це саме те, що виявляє проблеми до публікації палітри.