Генератор відтінків кольору
Згенеруйте повний діапазон тінтів і відтінків з одного кольору — оберіть крок освітлення/затемнення та кількість відтінків, а потім миттєво копіюйте будь-яке значення.
Оберіть базовий колір, відсоток кроку та кількість — усі тінти й відтінки обчислюються миттєво у вашому браузері.
Про Генератор відтінків кольору
Color Shades Generator розширює один колір у повний діапазон світлих і темних відтінків. Задайте базовий колір, і він створює дедалі світліші тони з одного боку та дедалі темніші з іншого — класичну шкалу у стилі 50–900, яку використовують у сучасних дизайн-системах.
Дві настройки формують результат: відсоток кроку визначає, наскільки світлішим чи темнішим стає кожен відтінок (1–25% за крок), а кількість визначає, скільки світлих і темних тонів з’являється з кожного боку від базового кольору, до десяти. Смуга градієнта показує всю шкалу одним поглядом.
Генерація відбувається миттєво у вашому браузері під час набору тексту — нічого не надсилається на сервер. Скопіюйте будь-яке окреме значення, повний список або всю шкалу у вигляді CSS-змінних, готових для вставки у файл дизайн-токенів або кольорову шкалу в стилі Tailwind.
Як використовувати Генератор відтінків кольору
- Оберіть базовий колір за допомогою піпетки або введіть значення; натисніть «Random color» для натхнення.
- Встановіть відсоток кроку, щоб контролювати, наскільки сильно кожен відтінок світлішає чи темнішає.
- Виберіть кількість відтінків, щоб визначити, скільки світлих і темних тонів з’являється з кожного боку.
- Клацніть зразок, щоб скопіювати його, або скористайтеся «Copy all» і «Copy CSS variables» для всієї шкали.