Generator nijansi i senki
21 boje
#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 funkcioniše generator nijansi i senki
Šta alat radi
Generator nijansi i senki kreira svetlije nijanse (pomešane sa belom) i tamnije senke (pomešane sa crnom) iz bilo koje osnovne boje. Unesite boju i izaberite broj koraka da biste generisali gladak gradijent varijacija. Svaki korak prikazuje HEX, RGB vrednosti i procenat mešanja, što olakšava izgradnju doslednih skala boja za UI dizajn, brendiranje i vizualizaciju podataka.
Uobičajeni slučajevi upotrebe za programere
Programeri koriste generatore nijansi i senki kada grade skale dizajn tokena (npr. blue-100 do blue-900), kreiraju hover i active stanja za interaktivne elemente, dizajniraju pristupačne hijerarhije boja i proizvode dosledne boje pozadina i površina za svetle i tamne teme. Alat je ključan za izradu Tailwind CSS prilagođenih paleta boja ili Material Design sistema boja.
Kako funkcionišu nijanse i senke
Nijansa se dobija mešanjem boje sa belom, čime se povećava njena svetlina. Senka se dobija mešanjem sa crnom, čime se svetlina smanjuje. Formula za nijanse je: new = base + (255 - base) × factor. Za senke: new = base × (1 - factor). Koraci su ravnomerno raspoređeni između osnovne boje i čiste bele (nijanse) ili čiste crne (senke), čime se dobija linearni gradijent vrednosti boja.
Uobičajene greške i rubni slučajevi
Linearno mešanje sa belom ili crnom može proizvesti isprane nijanse ili mutne senke za neke nijanse boja. Žute mogu delovati zelenkasto kada se potamne, a plave mogu izgubiti živost kada se posvetle. Za perceptivno ujednačene skale, razmotrite korišćenje OKLCH ili CIELAB prostora boja. Uvek proverite da vaše najsvetlije nijanse i najtamnije senke zadržavaju dovoljan kontrast u odnosu na predviđene pozadine.
Kada koristiti ovaj alat umesto koda
Koristite ovaj alat u pregledaču za brzo istraživanje i generisanje skala boja tokom dizajnerskog rada. Za produkcione dizajn sisteme, generišite nijanse i senke programatski koristeći biblioteke boja kao što su chroma.js ili culori, koje podržavaju perceptivno ujednačene prostore boja i mogu da izvezu dizajn tokene u bilo kom formatu.