CodeKitHubKaj je to orodje?
Nabor odtenkov je niz različic ene barve pri različnih stopnjah svetlosti, uporabljen v UI oblikovanju za stvari, kot so stanja ob prehodu miške, onemogočena stanja, robovi in ozadja, ki morajo biti povezani z barvo blagovne znamke, ne da bi bili z njo enaki.
To orodje pretvori vašo osnovno barvo v HSL, ohrani odtenek in nasičenost fiksna ter spreminja svetlost od približno 95 % (skoraj bel ton) do približno 10 % (skoraj črna senca), pri čemer je vaša izvirna barva postavljena na svoj naravni položaj na sredini nabora.
Zakaj ga uporabiti?
- Ustvari nabor v slogu oblikovalskega sistema (kot je lestvica 50/100/200.../900 pri Tailwind) iz katere koli posamezne barve, ne le iz fiksne vnaprej določene palete.
- Izberite 7, 9 ali 11 korakov, glede na to, kako podroben potrebujete nabor.
- Vsak korak prikazuje svojo natančno HEX kodo in odstotek svetlosti — kliknite za kopiranje.
- Ohranja odtenek in nasičenost konstantna skozi celoten nabor, tako da se vse sence berejo kot jasno povezane z osnovno barvo, namesto da bi zdrsele proti sivi.
- Brezplačno, takojšnje in popolnoma lokalno.
Kako ga uporabljati
- Izberite svojo osnovno barvo z izbirnikom barv ali z vnosom HEX kode.
- Izberite, koliko korakov želite v naboru (7, 9 ali 11).
- Preberite HEX kodo in odstotek svetlosti vsake sence neposredno na njenem vzorcu.
- Kliknite kateri koli vzorec, da kopirate njegovo HEX kodo.
Primer
Vnos
#3B82F6 (srednje modra), 9 korakovRezultat
9 senc od skoraj bele tone (~95 % svetlosti) do skoraj črne sence (~10 % svetlosti), pri čemer je #3B82F6 sama postavljena kot srednji korakOdtenek in nasičenost ostajata fiksna skozi vseh 9 korakov — spreminja se le svetlost — tako da vsaka senca deluje jasno kot del iste barvne družine.
Pogosta vprašanja
Je to enak sistem, kot ga Tailwind CSS uporablja za svoje barvne lestvice?
Gre za enako osnovno idejo (fiksen odtenek/nasičenost, spremenljiva svetlost), vendar ne za natančno kopijo Tailwindove specifične palete — Tailwindove lestvice 50-900 so ročno prilagodili oblikovalci, niso pa generirane po eni sami formuli. To orodje vam ponuja primerljivo strukturo, ustvarjeno iz katere koli barve, ki jo izberete, kar je uporabno, kadar vaša osnovna barva ni ena od Tailwindovih vnaprej določenih vrednosti.
Zakaj je moja barva na dveh sosednjih korakih videti skoraj enaka?
To se lahko zgodi blizu zelo svetlih ali zelo temnih koncev nabora, kjer se zaznana svetlost spreminja počasneje, kot nakazuje številčni odstotek (znana lastnost človeškega zaznavanja barv, ne posebnost tega orodja). Izbira manj korakov (7 namesto 11) razmakne vrednosti svetlosti bolj narazen in zmanjša skoraj podvojene vzorce.
Ali lahko te sence uporabim neposredno kot CSS lastnosti po meri?
Da — kopirajte vsako HEX kodo in jo prilepite v svoje CSS spremenljivke (npr. --color-brand-100 do --color-brand-900), pri čemer položaj v naboru uskladite z lestvico poimenovanja, ki jo uporablja vaš projekt.
Naj uporabim to orodje ali Color Mixer?
Če ustvarjate svetlejše in temnejše različice ene barve — stanja ob prehodu miške, subtilna ozadja, robove, povezane z barvo blagovne znamke — uporabite ta generator senc. Če namesto tega potrebujete barvo med dvema različnima barvama (recimo korak med vašo primarno modro in sekundarno oranžno), uporabite Color Mixer, ki interpolira RGB kanale dveh barv v katerem koli razmerju, namesto da bi spreminjal svetlost ene barve.
Kaj se zgodi, če je moja osnovna barva že zelo svetla ali zelo temna?
Osnovna barva je vedno v srednji vrstici, pri čemer toni stopnjujejo do približno 95 % svetlosti nad njo, sence pa padajo do približno 10 % pod njo. Če je vaša osnova že skoraj bela, se tonska polovica nabora stisne v ozek razpon svetlosti (skoraj podvojene vrstice), medtem ko se sencna polovica razširi na široko — in obratno za zelo temno osnovo. Za najbolj enakomerno porazdeljen nabor začnite s srednje svetlo različico svoje barve (približno 40-60 % svetlosti).
Ali lahko ustvari tudi tone (barvo, zmešano s sivo)?
Ne — to orodje spreminja le svetlost, medtem ko ohranja nasičenost fiksno, kar ustvari tone in sence, ne pa tudi sivih tonov. Če želite bolj umirjen nabor, najprej zmanjšajte nasičenost svoje osnovne barve (izberite bolj sivo različico v izbirniku barv) in iz nje ustvarite nabor; vsak korak bo podedoval nižjo nasičenost.