Generator nijansi i sjena
21 boja
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Tehnički detalji
Kako radi generator nijansi i sjena
Što alat radi
Generator nijansi i sjena stvara svjetlije nijanse (miješane s bijelom) i tamnije sjene (miješane s crnom) iz bilo koje osnovne boje. Unesite boju i odaberite broj koraka kako biste generirali glatki gradijent varijacija. Svaki korak prikazuje HEX, RGB vrijednosti i postotak miješanja, što olakšava izradu dosljednih skala boja za UI dizajn, brendiranje i vizualizaciju podataka.
Uobičajeni slučajevi upotrebe za razvojne programere
Programeri koriste generatore nijansi i sjena pri izradi skala dizajnerskih tokena (npr. blue-100 do blue-900), kreiranju stanja hover i active za interaktivne elemente, dizajniranju pristupačnih hijerarhija boja te stvaranju dosljednih boja pozadine i površina za svijetle i tamne teme. Alat je ključan za izradu prilagođenih paleta boja u Tailwind CSS-u ili sustava boja prema Material Designu.
Kako funkcioniraju nijanse i sjene
Nijansa se stvara miješanjem boje s bijelom, čime se povećava njezina svjetlina. Sjena se stvara miješanjem s crnom, čime se smanjuje svjetlina. Formula za nijanse je: new = base + (255 - base) × factor. Za sjene: new = base × (1 - factor). Koraci su ravnomjerno raspoređeni između osnovne boje i čiste bijele (nijanse) ili čiste crne (sjene), stvarajući linearni gradijent vrijednosti boja.
Uobičajene zamke i rubni slučajevi
Linearno miješanje s bijelom ili crnom može za neke nijanse proizvesti isprane nijanse ili mutne sjene. Žute mogu izgledati zelenkasto kada se potamne, a plave mogu izgubiti živost kada se posvijetle. Za perceptivno ujednačene skale razmotrite korištenje prostora boja OKLCH ili CIELAB. Uvijek provjerite da vaše najsvjetlije nijanse i najtamnije sjene zadržavaju dovoljan kontrast u odnosu na predviđene pozadine.
Kada koristiti ovaj alat umjesto koda
Koristite ovaj alat u pregledniku za brzo istraživanje i generiranje skala boja tijekom dizajnerskog rada. Za produkcijske dizajnerske sustave generirajte nijanse i sjene programatski koristeći biblioteke boja poput chroma.js ili culori koje podržavaju perceptivno ujednačene prostore boja i mogu izvesti dizajnerske tokene u bilo kojem formatu.