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

Відтінки, тони та напівтони

Відтінок (tint) — основний колір із домішкою білого: більш світлий варіант. Тон (shade) — основний колір із домішкою чорного: більш темний варіант. Напівтон (tone) — основний колір із домішкою сірого. Розуміння цих понять дозволяє будувати повноцінні колірні шкали для дизайн-систем.

Колірні шкали у дизайн-системах

Популярні системи (Tailwind CSS, Material Design, Radix UI) використовують шкали з 10–12 кроками для кожного кольору (наприклад, blue-50 до blue-950). Це дає гнучкість для будь-якого UI-стану: hover, focus, disabled, backgrounds, borders, text. Наш генератор будує такі шкали автоматично.

Правильний спосіб генерації

Проста зміна яскравості в HSL дає передбачувані, але не завжди красиві результати. OKLCH (перцептивно рівномірний колірний простір) дає кращі результати — однакова різниця в значенні яскравості сприймається однаково по всьому спектру кольорів. Tailwind v4 перейшов на OKLCH саме з цієї причини.

Застосування в CSS

Зберігайте шкали як CSS-змінні: --blue-500: #3b82f6. Tailwind CSS генерує такі класи автоматично. Для динамічних тем використовуйте змінні для кожного кроку шкали — так зміна одного базового кольору автоматично оновить всю систему через перерахунок похідних кольорів.