У цій статті
Що таке відтінки, тони та напівтони кольору?
Відтінок створюється змішуванням кольору з чорним, роблячи його темнішим. Тон створюється змішуванням з білим, роблячи світлішим. Напівтон створюється змішуванням з сірим. Ці три операції створюють повну палітру з будь-якого базового кольору.
Розуміння різниці між відтінками, тонами та напівтонами є фундаментальним для теорії кольору. Дизайнери використовують ці варіації для створення глибини, ієрархії та візуального контрасту.
Як працює генерація відтінків
Генератор відтінків приймає базовий колір (наприклад #3b82f6) та створює діапазон світліших та темніших варіантів через маніпулювання світлістю в колірному просторі HSL.
- HSL-маніпуляція — генератор регулює значення L (світлість), зберігаючи H (тон) та S (насиченість) константними
- Розрахунок кроків — діапазон від найсвітлішого до найтемнішого ділиться на рівномірні інтервали
- Змішування кольорів — для більш природних результатів деякі генератори змішують кольори з білим/чорним/сірим
Спробуйте безкоштовно — реєстрація не потрібна
Генерувати відтінки кольору →Коли генерувати відтінки
Палітри відтінків необхідні для створення цілісних дизайнів з одного кольору бренду.
- Дизайн-системи — генеруйте повну шкалу кольорів (50-950) з основного кольору бренду
- UI-тематизація — створюйте стани hover, active, focus і disabled для кнопок
- Контраст доступності — тестуйте комбінації кольорів за вимогами контрастності WCAG
Поширені питання
Яка різниця між відтінком та тоном?
Відтінок — це колір, змішаний з чорним (темніший), тоді як тон — змішаний з білим (світліший).
Скільки відтінків потрібно дизайн-системі?
Більшість використовують 10 кроків (50-950) за конвенцією Tailwind CSS. Базовий колір зазвичай на 500.
Чи можна генерувати доступні комбінації?
Так. Генеруючи повну палітру, можна тестувати пари за вимогами WCAG.