Пошук назв кольорів
Знайдіть найближчу назву кольору CSS для будь-якого значення кольору. Вставте до 100 кольорів у форматі CSS і для кожного отримайте найближчі з-поміж 148 іменованих кольорів CSS, упорядковані за різницею кольорів CIEDE2000, із назвою, hex-кодом, значенням Delta E та оцінкою відповідності. Показуйте до 10 відповідників для кожного кольору. Зручно для створення назв дизайн-токенів, опису кольорів у документації та швидкого пошуку за ключовим словом.
Поширені запитання
За якими назвами кольорів виконується пошук?
148 іменованих кольорів CSS Color 4 — від aliceblue до yellowgreen, включно з rebeccapurple. Назви з однаковим значенням, як-от aqua і cyan, fuchsia і magenta, а також варіанти написання gray і grey, наведено разом в одному рядку, тому окремих кольорів 139. Прозорі кольори й системні кольори не враховано.
Як визначається найближча назва?
За різницею кольорів CIEDE2000, Delta E 2000, обчисленою в CIELAB за допомогою бібліотеки culori. Це галузевий стандарт для вимірювання того, наскільки різними два кольори здаються пересічному спостерігачеві; що менше значення, то ближчий збіг.
Що означають оцінки збігу?
Точний — іменований колір має такий самий HEX-код. Дуже близький — Delta E менше 2, різницю важко помітити; схожий — менше 5, різницю видно при порівнянні поруч; віддалений — 5 або більше, назва лише вказує на загальну групу кольорів.
Скільки збігів буде показано?
Від 1 до 10 для кожного кольору, за замовчуванням — 3, у порядку від найближчого до найвіддаленішого. Більша кількість збігів стане в пригоді, коли найближча назва відповідає за світлотою, але не за відтінком, або навпаки.
Як вводити кольори?
Введіть один колір у кожному рядку або кілька кольорів в одному рядку, розділивши їх комами чи крапками з комою; коми всередині rgb() або hsl() не розділяють значення. Підтримуються HEX-коди з # або без нього, CSS назви кольорів, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() та cmyk(); за один запуск можна обробити до 100 кольорів.
Що відбувається з прозорими кольорами?
Іменовані кольори непрозорі, тому альфа-канал ігнорується, а колір порівнюється як повністю непрозорий. У стовпці HEX показано 6-значний код, який порівнювався.
Що відбувається з кольорами широкого колірного охоплення?
Кольори поза sRGB, як-от яскраві значення Display P3 або OKLCH, спершу переводяться в sRGB за алгоритмом CSS Color 4, оскільки всі CSS іменовані кольори належать до sRGB. У стовпці HEX показано переведене значення, з яким порівнюються назви.
Чи можна використати назву замість HEX-коду?
Лише якщо збіг точний; інакше іменований колір виглядатиме інакше. Близька назва все одно стане зручною для читання підказкою в токені дизайну або документації, наприклад для синього, близького до steelblue.
Чому лише CSS назв, а не більше?
CSS — це назви, які розпізнає кожен браузер і які можна безпосередньо вводити в таблицю стилів. Розширені списки назв відрізняються у різних постачальників і часто мають ліцензійні обмеження, тоді як ці 148 назви визначені стандартом CSS.
Чому збіг із більшим Delta E може здаватися мені ближчим?
Delta E 2000 моделює пересічного спостерігача за стандартних умов перегляду. На те, який колір здається найближчим, впливають ваш дисплей, його калібрування, навколишні кольори й індивідуальні особливості колірного зору, тому сприймайте рейтинг як надійну підказку, а не абсолютну істину.