Генератор тонів кольору
Створюйте тони кольору, змішуючи його з нейтральним сірим рівними кроками: насиченість зменшується, а відтінок зберігається. Введіть один колір у будь-якому форматі CSS, виберіть від 2 до 20 кроків і простір змішування — і отримайте таблицю зі значеннями HEX, RGB, HSL та OKLCH для кожного тону, починаючи з вихідного кольору. Стане в пригоді для приглушених палітр, неактивних станів, делікатних поверхонь і спокійніших варіантів фірмових кольорів.
Поширені запитання
Що таке тон?
Тон — це колір, змішаний із сірим. Він зберігає відтінок і стає приглушенішим, на відміну від висвітленого кольору, змішаного з білим, або затемненого кольору, змішаного з чорним.
Який сірий використовується?
Середній сірий sRGB #808080, rgb(128 128 128). Тому світлі кольори трохи темнішають, а темні — трохи світлішають, наближаючись до нього. Щоб змішати колір з іншим сірим, скористайтеся Мікшером кольорів і задайте власний сірий.
Як розподіляються кроки?
За N кроків у рядку k колір змішується із сірим у пропорції (k - 1) / N, тож за 10 кроків отримаєте 0%, 10%, 20% і так далі до 90%. Перший рядок завжди містить вихідний колір, а звичайний сірий до списку не входить.
Чим тон відрізняється від зменшення насиченості HSL?
Зменшення насиченості HSL зберігає світлість HSL, а змішування із сірим також наближає світлість до середнього значення. Тони схожі на колір, побачений крізь сірий фільтр, тому підходять для приглушених тла та неактивних станів.
Чим відрізняється змішування в 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 цифр. Кроки поза колірним охопленням перетворюються в sRGB за алгоритмом CSS Color 4 у стовпцях HEX, RGB і HSL, тоді як у стовпці OKLCH наведено значення без такого перетворення.
Як відтворити тон у CSS?
Скопіюйте значення hex або oklch(), або дозвольте браузеру змішати кольори виразом color-mix(in oklab, var(--brand) 70%, #808080), щоб отримати тон із 30% сірого для налаштування OKLab. color-mix() працює в усіх актуальних основних браузерах.