Generator svetlejših tonov in odtenkov
21 barve
#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čne podrobnosti
Kako deluje generator odtenkov in senčenj
Kaj orodje počne
Generator odtenkov in senčenj ustvari svetlejše odtenke (zmešane z belo) in temnejša senčenja (zmešana s črno) iz katere koli osnovne barve. Vnesite barvo in izberite število korakov, da ustvarite gladek gradient različic. Vsak korak prikazuje vrednosti HEX, RGB in odstotek mešanja, kar olajša gradnjo doslednih barvnih lestvic za UI oblikovanje, blagovno znamko in vizualizacijo podatkov.
Pogosti primeri uporabe za razvijalce
Razvijalci uporabljajo generatorje odtenkov in senčenj pri gradnji lestvic oblikovalskih žetonov (npr. blue-100 do blue-900), ustvarjanju stanj hover in active za interaktivne elemente, oblikovanju dostopnih barvnih hierarhij ter ustvarjanju doslednih barv ozadij in površin za svetle in temne teme. Orodje je ključno za izdelavo prilagojenih barvnih palet za Tailwind CSS ali barvnih sistemov Material Design.
Kako delujejo odtenki in senčenja
Odtenek nastane z mešanjem barve z belo, s čimer se poveča njena svetlost. Senčenje nastane z mešanjem s črno, s čimer se svetlost zmanjša. Formula za odtenke je: new = base + (255 - base) × factor. Za senčenja: new = base × (1 - factor). Koraki so enakomerno porazdeljeni med osnovno barvo in čisto belo (odtenki) ali čisto črno (senčenja), kar ustvari linearen gradient barvnih vrednosti.
Pogoste pasti in robni primeri
Linearno mešanje z belo ali črno lahko pri nekaterih odtenkih ustvari sprane odtenke ali motna senčenja. Rumene lahko ob potemnitvi delujejo zelenkasto, modre pa lahko ob posvetlitvi izgubijo živahnost. Za zaznavno enakomerne lestvice razmislite o uporabi barvnih prostorov OKLCH ali CIELAB. Vedno preverite, da vaši najsvetlejši odtenki in najtemnejša senčenja ohranjajo zadosten kontrast glede na predvidena ozadja.
Kdaj uporabiti to orodje namesto kode
To orodje v brskalniku uporabite za hitro raziskovanje in generiranje barvnih lestvic med oblikovalskim delom. Za produkcijske oblikovalske sisteme ustvarjajte odtenke in senčenja programatično z uporabo barvnih knjižnic, kot sta chroma.js ali culori, ki podpirajo zaznavno enakomerne barvne prostore in lahko izpišejo oblikovalske žetone v katerem koli formatu.