Генератор висвітлених кольорів
Створюйте світліші варіанти кольору, рівномірно змішуючи його з білим. Введіть колір у будь-якому форматі CSS, виберіть від 2 до 20 кроків і простір змішування — і отримайте таблицю зі значеннями HEX, RGB, HSL та OKLCH для кожного висвітленого кольору, починаючи з початкового. Змішування в sRGB працює як у класичних інструментах для створення висвітлених кольорів і Sass, а OKLab забезпечує рівномірні кроки з погляду сприйняття. Ідеально для тла, станів наведення курсора та колірних шкал.
Поширені запитання
Що таке висвітлений колір?
Висвітлений колір — це колір, змішаний із білим. Він зберігає свій колірний тон і стає світлішим та блідішим, на відміну від відтінку, який змішують із чорним, або приглушеного тону, який змішують із сірим.
Як розподіляються кроки?
За 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-100 і --brand-200. Щоб змішати кольори безпосередньо у браузері, скористайтеся color-mix(in oklab, var(--brand) 80%, white) — це дасть такий самий висвітлений колір із 20% білого, як і налаштування OKLab.
Чи можна розмістити білий текст на світлому відтінку?
Зазвичай ні, адже світлі відтінки мають низьку контрастність із білим. Використовуйте темний текст на світлих відтінках і перевіряйте кожну пару за допомогою засобу перевірки контрастності; для звичайного тексту за WCAG AA потрібно щонайменше 4.5:1.