CodeKitHubЩо це за інструмент?
Шкала відтінків — це серія варіацій одного кольору з різним рівнем світлоти, яка використовується в UI-дизайні для станів наведення, неактивних станів, меж та фонів, які мають бути пов'язані з фірмовим кольором, але не ідентичні йому.
Цей інструмент перетворює ваш базовий колір у HSL, зберігає відтінок (hue) і насиченість (saturation) незмінними, а світлоту змінює приблизно від 95% (майже білий тон) до приблизно 10% (майже чорний відтінок), при цьому ваш початковий колір розміщується у своїй природній позиції посередині шкали.
Навіщо його використовувати?
- Генерує шкалу у стилі дизайн-систем (як шкала Tailwind 50/100/200.../900) з будь-якого одного кольору, а не лише з фіксованої готової палітри.
- Оберіть 7, 9 або 11 кроків залежно від того, наскільки детальна шкала вам потрібна.
- Кожен крок показує свій точний HEX-код та відсоток світлоти — натисніть, щоб скопіювати.
- Зберігає відтінок і насиченість незмінними по всій шкалі, тому всі кольори виразно пов'язані з базовим, а не зʼїжджають у бік сірого.
- Безкоштовно, миттєво і повністю локально.
Як користуватися
- Оберіть базовий колір за допомогою палітри вибору кольору або введіть HEX-код.
- Виберіть кількість кроків шкали (7, 9 або 11).
- Прочитайте HEX-код і відсоток світлоти кожного відтінку прямо на його зразку.
- Натисніть на будь-який зразок, щоб скопіювати його HEX-код.
Приклад
Введення
#3B82F6 (середньо-синій), 9 кроківРезультат
9 відтінків від майже білого тону (~95% світлоти) до майже чорного відтінку (~10% світлоти), причому сам #3B82F6 розташований як середній крокВідтінок і насиченість залишаються незмінними для всіх 9 кроків — змінюється лише світлота, — тому кожен колір виразно сприймається як частина однієї колірної родини.
Часті запитання
Це та сама система, яку Tailwind CSS використовує для своїх колірних шкал?
Це та сама базова ідея (фіксовані відтінок/насиченість, змінна світлота), але не точна копія конкретної палітри Tailwind — шкали 50-900 у Tailwind вручну підбирали дизайнери, а не генерували за єдиною формулою. Цей інструмент дає порівнянну структуру, згенеровану з будь-якого обраного вами кольору, що корисно, коли ваш базовий колір не входить до готових пресетів Tailwind.
Чому мій колір виглядає майже однаково на двох сусідніх кроках?
Це може траплятися на дуже світлих або дуже темних ділянках шкали, де сприйнята світлота змінюється повільніше, ніж це показує числовий відсоток (це відома властивість людського сприйняття кольору, а не особливість цього інструмента). Вибір меншої кількості кроків (7 замість 11) розширює проміжки між значеннями світлоти і зменшує кількість майже однакових зразків.
Чи можу я використовувати ці відтінки безпосередньо як CSS-змінні?
Так — скопіюйте кожен HEX-код і вставте його у свої CSS-змінні (наприклад, --color-brand-100 до --color-brand-900), узгоджуючи позицію на шкалі з тією шкалою іменування, яку використовує ваш проєкт.
Використовувати цей інструмент чи Змішувач кольорів?
Якщо ви створюєте світліші й темніші версії одного кольору — стани наведення, ненав'язливі фони, межі, повʼязані з фірмовим кольором, — використовуйте цей генератор відтінків. Якщо ж вам потрібен колір між двома різними кольорами (наприклад, проміжний крок між основним синім і додатковим оранжевим), використовуйте Змішувач кольорів, який інтерполює RGB-канали двох кольорів у будь-якому співвідношенні, а не змінює світлоту одного кольору.
Що станеться, якщо мій базовий колір уже дуже світлий або дуже темний?
Базовий колір завжди розташовується у середньому рядку, а тони підвищуються до приблизно 95% світлоти вище нього, а відтінки знижуються до приблизно 10% нижче нього. Якщо ваш базовий колір уже майже білий, половина шкали з тонами стискається у вузький діапазон світлоти (майже однакові рядки), тоді як половина з відтінками розтягується широко — і навпаки для дуже темного базового кольору. Для найрівномірнішої шкали починайте з версії кольору середньої світлоти (приблизно 40-60% світлоти).
Чи може він генерувати тони (колір, змішаний із сірим)?
Ні — цей інструмент змінює лише світлоту, зберігаючи насиченість незмінною, що дає тони й відтінки, але не приглушені тони (tones). Якщо потрібна більш приглушена шкала, спершу знизьте насиченість базового кольору (оберіть його сіріший варіант у палітрі вибору кольору) і згенеруйте шкалу з нього; кожен крок успадкує нижчу насиченість.