Toņu un ēnu ģenerators
21 krāsas
#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)Tehniskā informācija
Kā darbojas toņu un ēnu ģenerators
Ko rīks dara
Toņu un ēnu ģenerators izveido gaišākus toņus (sajauktus ar baltu) un tumšākas ēnas (sajauktas ar melnu) no jebkuras pamatkrāsas. Ievadiet krāsu un izvēlieties soļu skaitu, lai ģenerētu vienmērīgu variāciju gradientu. Katrs solis parāda HEX, RGB vērtības un sajaukšanas procentu, tāpēc ir viegli izveidot konsekventas krāsu skalas UI dizainam, zīmolam un datu vizualizācijai.
Biežākie izstrādātāju lietošanas gadījumi
Izstrādātāji izmanto toņu un ēnu ģeneratorus, veidojot dizaina tokenu skalas (piem., blue-100 līdz blue-900), izstrādājot hover un active stāvokļus interaktīviem elementiem, veidojot pieejamas krāsu hierarhijas un radot konsekventas fona un virsmu krāsas gaišajām un tumšajām tēmām. Rīks ir būtisks, veidojot Tailwind CSS pielāgotas krāsu paletes vai Material Design krāsu sistēmas.
Kā darbojas toņi un ēnas
Tonis tiek izveidots, sajaucot krāsu ar baltu, palielinot tās gaišumu. Ēna tiek izveidota, sajaucot ar melnu, samazinot gaišumu. Toņu formula ir: new = base + (255 - base) × factor. Ēnām: new = base × (1 - factor). Soļi tiek vienmērīgi sadalīti starp pamatkrāsu un tīri baltu (toņiem) vai tīri melnu (ēnām), veidojot lineāru krāsu vērtību gradientu.
Biežākās kļūdas un robežgadījumi
Lineāra sajaukšana ar baltu vai melnu dažām nokrāsām var radīt izbalējušus toņus vai duļķainas ēnas. Dzeltenās krāsas, tās aptumšojot, var izskatīties zaļganas, bet zilās krāsas, tās izgaismojot, var zaudēt košumu. Lai iegūtu uztverei vienmērīgas skalas, apsveriet OKLCH vai CIELAB krāsu telpas. Vienmēr pārbaudiet, vai jūsu gaišākie toņi un tumšākās ēnas saglabā pietiekamu kontrastu pret paredzētajiem foniem.
Kad izmantot šo rīku, nevis kodu
Izmantojiet šo pārlūka rīku ātrai izpētei un krāsu skalu ģenerēšanai dizaina darba laikā. Ražošanas līmeņa dizaina sistēmām ģenerējiet toņus un ēnas programmatiski, izmantojot krāsu bibliotēkas, piemēram, chroma.js vai culori, kas atbalsta uztverei vienmērīgas krāsu telpas un var izvadīt dizaina tokenus jebkurā formātā.