Генератор відтінків Tailwind
Створіть 11-ступеневу шкалу відтінків у стилі Tailwind (50-950) з базового кольору HEX із CSS-змінними та JSON, готовими до копіювання.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяСтворіть практичну шкалу відтінків
Одного кольору бренду рідко вистачає для повноцінного інтерфейсу. Кнопкам потрібні стани наведення, карткам — світлі фони, рамкам — спокійніший відтінок, а тексту іноді — темніший супутник. Цей генератор відтінків Tailwind перетворює одне значення HEX на знайому шкалу 50-950, щоб ви могли швидко побачити, як колір поводиться на світлих і темних поверхнях. Згенеровані значення детерміновані та легко копіюються, тож підходять для прототипів, дизайн-рев'ю, користувацьких властивостей CSS і документації дизайн-токенів.
Інструмент використовує кроки світлості HSL, щоб зберегти впізнаваний відтінок, водночас зміщуючи колір до дуже світлих тонів і глибоких тіней. Це не офіційний алгоритм Tailwind, і він не намагається точно повторити вручну підібрані палітри Tailwind. Натомість ви отримуєте чисту відправну точку, яку можна коригувати в контексті. Якщо ваш базовий колір уже дуже блідий або дуже темний, уважно перегляньте середні значення та вирішіть, чи потребує шкала ручного доопрацювання.
Використання згенерованих відтінків у CSS
Копіюйте вивід CSS, коли потрібні готові для браузера змінні на кшталт --brand-500 і --brand-700. Копіюйте вивід JSON, коли готуєте токени для файлу конфігурації, style dictionary або сторінки документації. У типовому інтерфейсі 50 і 100 добре підходять для м'яких поверхонь, 200 і 300 — для рамок чи бейджів, 500 — для основного кольору дії, а 600-800 — для станів наведення, натискання чи тексту. Значення 900 і 950 найнасиченіші, тому залишайте їх для темних тем або елементів із сильним акцентом.
Перевірте контраст перед публікацією
Шкали відтінків зручні, але вони не гарантують автоматично доступний текст. Колір, який виглядає збалансованим як зразок, може не пройти перевірку контрастності за дрібними підписами чи вимкненими елементами керування. Після копіювання шкали протестуйте комбінації, які справді використовує ваш інтерфейс: основний текст на світлих фонах, білий текст на кнопках дій, кільця фокусу навколо полів і рамки на тлі сусідніх поверхонь. Сприймайте цей генератор як перший крок у робочому процесі кольорової системи, а остаточні поєднання перевірте засобом перевірки контрастності перед публікацією.
Як користуватися
- Оберіть базуВиберіть колір бренду або акценту, який має стати опорою шкали.
- Перегляньте шкалуПеревірте кожен зразок від 50 до 950 і переконайтеся, що світлий і темний краї шкали корисні.
- Скопіюйте токениСкопіюйте шкалу як користувацькі властивості CSS або JSON для вашого проєкту.