Відтінки та тони
Генератор відтінків створює світліші варіанти (з домішкою білого) і темніші (з домішкою чорного) будь-якого базового кольору в 5, 10 або 20 кроків і видає результат у вигляді CSS-змінних.
Про цей інструмент
Генератор відтінків створює світліші варіанти (з домішкою білого) і темніші (з домішкою чорного) будь-якого базового кольору в 5, 10 або 20 кроків і видає результат у вигляді CSS-змінних.
Як користуватися
- Оберіть базовий колір.
- Виберіть 5, 10 або 20 кроків.
- Клацніть будь-який зразок, щоб скопіювати його hex-значення.
- Натисніть «Копіювати як CSS-змінні», щоб експортувати всю шкалу.
Корисно знати
- Світлий відтінок (tint) — це колір, змішаний із білим; темний відтінок (shade) — колір, змішаний із чорним.
- Генератор змішує кольори рівними кроками в RGB, тож кожен крок змінює колір на однакову величину.
- Дизайн-системи, як-от Tailwind, використовують шкалу 50–900, побудовану зі світлих і темних відтінків кожного фірмового кольору.
- Перевіряйте контраст кольорів тексту, узятих зі шкали: середні кроки на білому часто не проходять WCAG AA.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Чим світлий відтінок відрізняється від темного?
Світлий відтінок (tint) висвітлює колір додаванням білого, темний (shade) затемнює його додаванням чорного. Тон (tone) утворюється додаванням сірого.
Скільки відтінків має бути в кольору дизайн-системи?
Зазвичай близько 10 кроків, наприклад 50, 100 … 900 у Tailwind. Цього діапазону вистачає для фонів, рамок, тексту та станів наведення.
Як використати шкалу в CSS?
Скопіюйте шкалу як користувацькі властивості й звертайтеся до них через var(--color-name), наприклад для фонів, рамок чи станів наведення.
Чому деякі світлі відтінки виглядають блідими?
Змішування з білим не лише підвищує світлість, а й знижує насиченість. Для яскравіших світлих варіантів окремо налаштуйте насиченість у HSL.