Генератор на светли и тъмни нюанси на цвят

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

1. Изберете Основен цвят с пробата или въведете стойност в Код на цвета: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) или CSS име като teal.
2. Изберете Стъпка: 5 %, 10 %, 20 % или 25 %. При 10 % получавате светли нюанси на 10 %, 20 % … 100 % и същия брой тъмни нюанси.
3. Изберете как да се извърши Смесване в: OKLCH (перцептивен) или sRGB (класически). Двата реда се обновяват наведнъж: Светли нюанси (смесени с бяло) и Тъмни нюанси (смесени с черно), всеки започващ от основния цвят.
4. Щракнете върху Копирай под всяка проба, за да копирате HEX кода ѝ.
5. Под Експортирай като изберете CSS променливи, Конфигурация за Tailwind (v3), Tailwind @theme (v4), SCSS променливи или JSON, задайте Име като primary или brand, после Копирай или Изтегли кода.

Всичко се изчислява във вашия браузър. Нищо от въведеното не се изпраща към сървър.

Светли нюанси, тъмни нюанси и тонове

В теорията на цвета светъл нюанс (tint) е цвят, смесен с бяло, тъмен нюанс (shade) е цвят, смесен с черно, а тон е цвят, смесен със сиво. Процентът показва колко бяло или черно е добавено: светъл нюанс от 30 % е 70 % основен цвят и 30 % бяло. При 100 % стигате до чисто бяло или чисто черно, затова последната проба във всеки ред винаги е #FFFFFF или #000000; тя бележи края на скалата.

Светлите и тъмните нюанси са най-бързият начин да изградите последователна скала от един цвят на марка: светли фонове и състояния при посочване от светлите нюанси, рамки, състояния при натискане и тъмен текст от тъмните.

Смесване в OKLCH или sRGB?

sRGB (класически) смесва директно стойностите на червено, зелено и синьо. Така правят повечето по-стари генератори и съвпада с CSS color-mix(in srgb, …). Формулата за светъл нюанс е просто канал + (255 − канал) × p, а за тъмен канал × (1 − p). Предвидимо е, но стъпките не са перцептивно равномерни: синьото клони към лилаво, докато просветлява, а тъмните нюанси често изглеждат кални.

OKLCH (перцептивен) смесва в цветовото пространство OKLCH, създадено от Бьорн Отосон през 2020 г., като CSS color-mix(in oklch, …). Светлината, наситеността и нюансът се интерполират поотделно. Бялото и черното нямат нюанс, така че основният нюанс се запазва докрай, а всяка стъпка променя светлината с визуално сходна величина. Цветовете, които биха излезли извън гамата sRGB, се връщат чрез намаляване на наситеността, а не чрез отрязване на канали, така че нюансът остава стабилен. За дизайн системи това обикновено дава по-чисти и по-равномерни скали.

Използване на експорта

• CSS променливи създават блок :root като --primary-tint-20 и --primary-shade-40, готов за поставяне в стилов файл.
• Конфигурация за Tailwind (v3) дава обект colors за theme.extend.colors; после пишете класове като bg-primary-tint-20 или text-primary-shade-60. DEFAULT държи основния цвят, така че работи и bg-primary.
• Tailwind @theme (v4) дава променливи --color-… за конфигурацията на Tailwind 4, започваща от CSS.
• SCSS променливи и JSON са подходящи за други инструменти за компилиране и дизайн токени.

Имената се превръщат в малки букви, а интервалите в тирета, така че „Brand Blue“ става brand-blue.