Toonide ja varjundite generaator
21 värvi
#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)Tehnilised üksikasjad
Kuidas toonide ja varjundite generaator töötab
Mida tööriist teeb
Toonide ja varjundite generaator loob heledamad toonid (segatud valgega) ja tumedamad varjundid (segatud mustaga) mis tahes baasvärvist. Sisestage värv ja valige sammude arv, et genereerida sujuv variatsioonide gradient. Iga samm kuvab HEX- ja RGB-väärtused ning segamisprotsendi, mis teeb ühtsete värviskaalade loomise lihtsaks UI-disaini, brändingu ja andmevisualiseerimise jaoks.
Levinud kasutusjuhtumid arendajatele
Arendajad kasutavad toonide ja varjundite generaatoreid disainitokenite skaalade koostamisel (nt blue-100 kuni blue-900), interaktiivsete elementide hover- ja active-olekute loomisel, ligipääsetavate värvihierarhiate kujundamisel ning ühtsete tausta- ja pinnavärvide loomiseks heledate ja tumedate teemade jaoks. Tööriist on hädavajalik Tailwind CSS-i kohandatud värvipalettide või Material Designi värvisüsteemide loomiseks.
Kuidas toonid ja varjundid toimivad
Toon luuakse värvi segamisel valgega, suurendades selle heledust. Varjund luuakse segamisel mustaga, vähendades heledust. Toonide valem on: new = base + (255 - base) × factor. Varjundite puhul: new = base × (1 - factor). Sammud jaotatakse ühtlaselt baasvärvi ja puhta valge (toonid) või puhta musta (varjundid) vahel, luues lineaarse gradiendi värviväärtustest.
Levinud komistuskivid ja erijuhud
Lineaarne segamine valge või mustaga võib mõne tooni puhul anda väljapestud toonid või mudased varjundid. Kollased võivad tumendamisel muutuda rohekaks ning sinised võivad heledamaks muutmisel kaotada erksust. Tajutavalt ühtlaste skaalade jaoks kaaluge OKLCH- või CIELAB-värviruumide kasutamist. Kontrollige alati, et teie heledaimad toonid ja tumedaimad varjundid säilitaksid piisava kontrasti oma ettenähtud taustade suhtes.
Millal kasutada seda tööriista vs koodi
Kasutage seda brauseritööriista kiireks uurimiseks ja värviskaalade genereerimiseks disainitöö käigus. Tootmisküpsete disainisüsteemide jaoks genereerige toonid ja varjundid programmiliselt, kasutades värviteeke nagu chroma.js või culori, mis toetavad tajutavalt ühtlaseid värviruume ja suudavad väljastada disainitokeneid mis tahes vormingus.