CodeKitHubŠta je ovaj alat?
Низ нијанси је серија варијација једне боје на различитим нивоима осветљености, коришћена у UI дизајну за ствари попут hover стања, онемогућених стања, ивица и позадина које морају да се односе на брендирану боју, а да не буду идентичне са њом.
Овај алат претвара вашу основну боју у HSL, задржава нијансу и засићење фиксним и мења осветљеност од око 95% (скоро бели тон) до око 10% (скоро црна сенка), при чему је ваша оригинална боја постављена на своју природну позицију на средини низа.
Zašto ga koristiti?
- Генерише низ у стилу дизајн система (попут скале 50/100/200.../900 код Tailwind-а) из било које појединачне боје, а не само из фиксне унапред задате палете.
- Изаберите 7, 9 или 11 корака у зависности од тога колико фин низ вам је потребан.
- Сваки корак приказује тачан HEX код и проценат осветљености — кликните за копирање.
- Задржава нијансу и засићење константним у целом низу, тако да све сенке делују јасно повезане са основном бојом, уместо да теже ка сивој.
- Бесплатно, тренутно и потпуно локално.
Kako se koristi
- Изаберите основну боју помоћу бирача боја или уношењем HEX кода.
- Изаберите колико корака желите у низу (7, 9 или 11).
- Прочитајте HEX код и проценат осветљености сваке сенке директно на њеном узорку.
- Кликните на било који узорак да бисте копирали његов HEX код.
Primer
Unos
#3B82F6 (средње плава), 9 коракаRezultat
9 сенки од скоро белог тона (~95% осветљености) до скоро црне сенке (~10% осветљености), при чему је сама #3B82F6 позиционирана као средњи коракНијанса и засићење остају фиксни кроз свих 9 корака — мења се само осветљеност — тако да свака сенка делује јасно као део исте породице боја.
Često postavljana pitanja
Да ли је ово исти систем који Tailwind CSS користи за своје скале боја?
То је иста основна идеја (фиксна нијанса/засићење, променљива осветљеност), али није тачна реплика Tailwind-ове специфичне палете — Tailwind-ове скале 50-900 ручно су подешавали дизајнери, нису генерисане једном формулом. Овај алат вам даје упоредиву структуру генерисану из било које боје коју изаберете, што је корисно када ваша основна боја није једна од Tailwind-ових унапред задатих вредности.
Зашто моја боја изгледа скоро исто на два суседна корака?
То се може десити близу веома светлих или веома тамних крајева низа, где се перципирана осветљеност мења спорије него што нумерички проценат сугерише (позната особина људске перцепције боја, не специфична за овај алат). Избор мањег броја корака (7 уместо 11) шири вредности осветљености даље једне од других и смањује скоро идентичне узорке.
Могу ли ове сенке да користим директно као CSS прилагођена својства?
Да — копирајте сваки HEX код и налепите га у своје CSS променљиве (нпр. --color-brand-100 до --color-brand-900), усклађујући позицију у низу са скалом именовања коју ваш пројекат користи.
Треба ли да користим ово или Color Mixer?
Ако правите светлије и тамније верзије једне боје — hover стања, суптилне позадине, ивице повезане са брендираном бојом — користите овај генератор сенки. Ако вам је уместо тога потребна боја између две различите боје (рецимо, корак између ваше примарне плаве и секундарне наранџасте), користите Color Mixer, који интерполира RGB канале две боје у било ком односу уместо да мења осветљеност једне боје.
Шта се дешава ако је моја основна боја већ веома светла или веома тамна?
Основна боја увек седи у средњем реду, при чему тонови расту до око 95% осветљености изнад ње, а сенке опадају до око 10% испод ње. Ако је ваша основа већ скоро бела, тонска половина низа се компримује у уски опсег осветљености (скоро идентични редови), док се сенкована половина широко шири — и обрнуто за веома тамну основу. За најравномерније распоређен низ, почните са верзијом средње осветљености ваше боје (приближно 40-60% осветљености).
Може ли такође да генерише тонове (боју помешану са сивом)?
Не — овај алат мења само осветљеност док задржава засићење фиксним, што производи тонове и сенке, али не и сиве тонове. Ако желите пригушенији низ, прво смањите засићење основне боје (изаберите њену сивљу верзију у бирачу боја) и генеришите низ из ње; сваки корак ће наследити ниже засићење.