# Генератор відтінків кольору

Створюйте темніші відтінки кольору, рівномірно змішуючи його з чорним. Введіть колір у будь-якому форматі 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 на тлі іншого темного кольору або для кольорового тексту.

Ваша реклама тут?

[Напишіть нам електронною поштою](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%BD%D0%B0%20OneClick%20Pro)

[Реклама Набір плагінів для роботи з агентами для WordPress.](https://sleekwp.com/?ref=oneclickpro)