Генератор відтінків кольору
Створюйте темніші відтінки кольору, рівномірно змішуючи його з чорним. Введіть колір у будь-якому форматі CSS, виберіть від 2 до 20 кроків і простір змішування — і отримайте таблицю зі значеннями HEX, RGB, HSL та OKLCH для кожного відтінку, починаючи з початкового кольору. Змішування в sRGB працює як у класичних інструментах для створення відтінків і Sass, а OKLab забезпечує рівномірні кроки з погляду сприйняття. Ідеально для створення колірних шкал UI.
Поширені запитання
Що таке відтінок?
Відтінок — це колір, змішаний із чорним. Він зберігає свій колірний тон і стає темнішим, на відміну від висвітленого кольору, який змішують із білим, або приглушеного тону, який змішують із сірим.
Як розподіляються кроки?
За N кроків у рядку k колір змішується з часткою чорного (k - 1) / N, тож для 10 кроків отримуємо 0%, 10%, 20% і так далі до 90%. У першому рядку завжди наведено початковий колір, а чистого чорного в списку немає.
Чим відрізняється змішування в sRGB від змішування в OKLab?
Під час змішування в sRGB усереднюються значення каналів із гамма-корекцією — так Sass mix() із чорним, як і в більшості класичних генераторів відтінків. Змішування в OKLab відбувається в просторі, що відповідає людському сприйняттю, тому кроки виглядають рівномірнішими за світлістю, а темні відтінки краще зберігають свій колір.
Які формати вводу можна використовувати?
HEX-коди з # або без нього, назви кольорів CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() і cmyk(). За один запуск можна ввести лише один колір.
Скільки відтінків можна створити?
Від 2 до 20 за один запуск, за замовчуванням — 10. До кількості входить початковий колір у першому рядку.
Які значення наведено в таблиці?
Для кожного кроку наведено частку чорного, HEX-код, rgb(), hsl() і oklch() у сучасному синтаксисі CSS. Канали RGB — цілі числа, відсотки HSL — з точністю до двох знаків після коми, а світлість і насиченість OKLCH — до чотирьох.
Що відбувається з прозорими кольорами?
Значення альфа-каналу початкового кольору зберігається для кожного відтінку, оскільки чорний додається з таким самим значенням альфа-каналу. HEX-коди матимуть 8 символів, а функції CSS завершуватимуться значенням альфа-каналу після скісної риски.
Що відбувається з кольорами поза sRGB?
Для змішування використовується повний колір, але в стовпцях HEX, RGB і HSL можна відобразити лише sRGB, тому значення поза колірним охопленням у цих стовпцях перетворюються в sRGB за алгоритмом Color 4 CSS. У стовпці OKLCH залишається неперетворене значення.
Як використовувати відтінки в CSS?
Скопіюйте значення HEX або oklch() у власні властивості, наприклад --brand-600 і --brand-700. Щоб змішати кольори безпосередньо у браузері, скористайтеся color-mix(in oklab, var(--brand) 80%, black) — це дасть такий самий відтінок із 20% чорного, як і налаштування OKLab.
Чи темніші відтінки автоматично відповідають вимогам доступності?
Ні. Перевірте контрастність тексту на кожному відтінку за допомогою засобу перевірки контрастності, адже навіть темний на вигляд відтінок може не досягати 4.5:1 на тлі іншого темного кольору або для кольорового тексту.