CodeKitHubКакво представлява този инструмент?
Скалата от нюанси е поредица от вариации на един цвят при различни нива на осветеност, използвана в UI дизайна за неща като състояния при hover, деактивирани състояния, рамки и фонове, които трябва да са свързани с брандиран цвят, без да са идентични с него.
Този инструмент преобразува базовия ви цвят в HSL, запазва нюанса и наситеността фиксирани и променя осветеността от около 95% (почти бял оттенък) до около 10% (почти черен нюанс), като оригиналният ви цвят е поставен на естествената си позиция в средата на скалата.
Защо да го използвате?
- Генерира скала в стил дизайн система (като скалата 50/100/200.../900 на Tailwind) от всеки един цвят, а не само от фиксирана предварително зададена палитра.
- Изберете 7, 9 или 11 стъпки в зависимост от това колко фина искате скалата да бъде.
- Всяка стъпка показва точния си HEX код и процент на осветеност — кликнете, за да копирате.
- Запазва нюанса и наситеността постоянни в цялата скала, така че всички нюанси изглеждат ясно свързани с базовия цвят, вместо да се отклоняват към сиво.
- Безплатно, мигновено и напълно локално.
Как да го използвате
- Изберете базовия си цвят чрез палитрата за избор на цвят или като въведете HEX код.
- Изберете колко стъпки искате в скалата (7, 9 или 11).
- Прочетете HEX кода и процента на осветеност на всеки нюанс директно върху пробата му.
- Кликнете върху всяка проба, за да копирате нейния HEX код.
Пример
Вход
#3B82F6 (среднo синьо), 9 стъпкиРезултат
9 нюанса от почти бял оттенък (~95% осветеност) до почти черен нюанс (~10% осветеност), като #3B82F6 е позициониран като средната стъпкаНюансът и наситеността остават фиксирани във всичките 9 стъпки — променя се само осветеността — така че всеки нюанс изглежда ясно като част от едно и също цветово семейство.
Често задавани въпроси
Това същата система ли е, която Tailwind CSS използва за цветовите си скали?
Това е същата основна идея (фиксиран нюанс/наситеност, променлива осветеност), но не е точно копие на конкретната палитра на Tailwind — скалите 50-900 на Tailwind са ръчно настроени от дизайнери, а не генерирани по единна формула. Този инструмент ви дава сравнима структура, генерирана от всеки избран от вас цвят, което е полезно, когато базовият ви цвят не е една от предварително зададените стойности на Tailwind.
Защо цветът ми изглежда почти еднакъв на две съседни стъпки?
Това може да се случи близо до много светлия или много тъмния край на скалата, където възприеманата осветеност се променя по-бавно, отколкото предполага числовият процент (известно свойство на човешкото цветово възприятие, не специфично за този инструмент). Избирането на по-малко стъпки (7 вместо 11) разпределя стойностите на осветеността по-надалеч една от друга и намалява почти дублиращите се проби.
Мога ли да използвам тези нюанси директно като CSS персонализирани свойства?
Да — копирайте всеки HEX код и го поставете в CSS променливите си (напр. --color-brand-100 до --color-brand-900), съпоставяйки позицията в скалата с наименувателната скала, използвана във вашия проект.
Трябва ли да използвам това или Color Mixer?
Ако правите по-светли и по-тъмни версии на един цвят — състояния при hover, дискретни фонове, рамки, свързани с брандиран цвят — използвайте този генератор на нюанси. Ако вместо това ви трябва цветът между два различни цвята (например стъпка между основното ви синьо и вторичното оранжево), използвайте Color Mixer, който интерполира RGB каналите на два цвята при произволно съотношение, вместо да променя осветеността на един цвят.
Какво се случва, ако базовият ми цвят вече е много светъл или много тъмен?
Базовият цвят винаги е разположен в средния ред, като оттенъците се покачват до около 95% осветеност над него, а нюансите се понижават до около 10% под него. Ако базовият ви цвят вече е почти бял, половината от скалата с оттенъци се компресира в тесен диапазон на осветеност (почти дублиращи се редове), докато половината с нюанси се разпростира широко — и обратно за много тъмен базов цвят. За най-равномерно разпределена скала започнете със средно осветена версия на цвета си (приблизително 40-60% осветеност).
Може ли да генерира и тонове (цветът, смесен със сиво)?
Не — този инструмент променя само осветеността, като запазва наситеността фиксирана, което произвежда оттенъци и нюанси, но не и тонове. Ако искате по-приглушена скала, обезцветете първо базовия си цвят (изберете по-сива негова версия в палитрата) и генерирайте скалата от него; всяка стъпка ще наследи по-ниската наситеност.