Генерирайте пълен набор от оттенъци и нюанси от един цвят — изберете стъпката на потъмняване/изсветляване и броя нюанси, после копирайте всяка стойност мигновено.

Основен цвят
Стъпка
%
С колко се изсветлява/потъмнява всеки нюанс на стъпка (1–25%).
Брой нюанси
Колко светли и тъмни нюанси да се генерират от всяка страна на основния цвят.
Градиент
Генерирани нюанси

Изберете основен цвят, процент стъпка и брой — всеки светъл и тъмен нюанс се изчислява мигновено в браузъра ви.


За Генератор на нюанси

Генераторът на цветови нюанси разширява един цвят в пълна гама от светли и тъмни варианти. Дайте му базов цвят и той произвежда прогресивно по-светли варианти от едната страна и прогресивно по-тъмни от другата — класическата скала от 50 до 900, използвана в модерните дизайнерски системи.

Два контрола оформят изхода: процентът на стъпка задава колко по-светъл или по-тъмен става всеки нюанс (1–25% на стъпка), а броят задава колко светли и тъмни варианта се появяват от всяка страна на базата, до десет. Лента с градиент показва преглед на цялата скала с един поглед.

Генерирането се извършва мигновено във вашия браузър, докато пишете — нищо не се изпраща към сървър. Копирайте всяка отделна стойност, целия списък или цялата скала като CSS променливи, готови за поставяне във файл с дизайн токени или цветова скала в стил Tailwind.

Как да използвате Генератор на нюанси

  1. Изберете базов цвят с палитрата за избор или въведете стойност; кликнете "Random color" за вдъхновение.
  2. Задайте процента на стъпка, за да контролирате колко силно всеки нюанс изсветлява или потъмнява.
  3. Изберете броя на нюансите, за да решите колко светли и тъмни варианта се появяват от всяка страна.
  4. Кликнете върху мостра, за да я копирате, или използвайте "Copy all" и "Copy CSS variables" за цялата скала.

Често задавани въпроси

Да, напълно. Всички светли и тъмни варианти се изчисляват на живо във вашия браузър, така че няма разходи, няма акаунт и няма лимит колко скали генерирате.

Светлият вариант е вашият базов цвят, смесен към бяло (по-светъл), докато тъмният нюанс е базата, смесена към черно (по-тъмен). Генераторът произвежда и двете посоки едновременно, обозначени "Tints (lighter)" и "Shades (darker)" около вашия базов цвят.

Задайте броя на 4 или 5 за страна, за да получите девет до единайсет мостри общо, с вашата база по средата. Стъпка от около 8–10% обикновено дава разстояние, подобно на скалите от 50 до 900, използвани от популярните фреймуърци.

Малките стъпки (3–6%) дават фини вариации за hover състояния и рамки; средните стъпки (8–12%) подхождат за пълни дизайнерски скали; големите стъпки (15–25%) създават контрастни, плакатни набори. Наблюдавайте предварителния преглед с градиент — добрата скала трябва да потъмнява равномерно без ивичене.

Да. "Copy CSS variables" извежда цялата скала като именувани CSS персонализирани свойства, а "Copy all" дава обикновен списък от стойности, който можете да поставите навсякъде, от SCSS карти до JavaScript обекти за теми.

Сподели

Популярни търсения
генератор на нюанси светли и тъмни тонове изсветляване и затъмняване на цвят нюанси на цвят генератор на тонове генериране на нюанси на цвят
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.
Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.