Atspalvių ir šešėlių generatorius
21 spalvos
#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)Techninė informacija
Kaip veikia atspalvių ir šešėlių generatorius
Ką daro įrankis
Atspalvių ir šešėlių generatorius sukuria šviesesnius atspalvius (maišant su balta) ir tamsesnius šešėlius (maišant su juoda) iš bet kurios bazinės spalvos. Įveskite spalvą ir pasirinkite žingsnių skaičių, kad sugeneruotumėte tolygų variacijų gradientą. Kiekvienas žingsnis rodo HEX, RGB reikšmes ir maišymo procentą, todėl lengva kurti nuoseklias spalvų skales UI dizainui, prekės ženklui ir duomenų vizualizacijai.
Dažniausi kūrėjų naudojimo atvejai
Programuotojai naudoja atspalvių ir šešėlių generatorius kurdami dizaino žetonų skales (pvz., blue-100 iki blue-900), kurdami hover ir active būsenas interaktyviems elementams, projektuodami prieinamas spalvų hierarchijas ir kurdami nuoseklias fono bei paviršių spalvas šviesioms ir tamsioms temoms. Šis įrankis yra būtinas kuriant Tailwind CSS pasirinktines spalvų paletes arba Material Design spalvų sistemas.
Kaip veikia atspalviai ir šešėliai
Atspalvis sukuriamas sumaišius spalvą su balta, taip padidinant jos šviesumą. Šešėlis sukuriamas sumaišius su juoda, taip sumažinant šviesumą. Atspalvių formulė: new = base + (255 - base) × factor. Šešėliams: new = base × (1 - factor). Žingsniai tolygiai paskirstomi tarp bazinės spalvos ir grynos baltos (atspalviai) arba grynos juodos (šešėliai), taip gaunant linijinį spalvų reikšmių gradientą.
Dažniausios klaidos ir kraštiniai atvejai
Linijinis maišymas su balta arba juoda kai kuriems atspalviams gali sukurti išblukusius atspalvius arba purvinus šešėlius. Patamsinti geltoni atspalviai gali atrodyti žalsvi, o pašviesinti mėlyni gali prarasti ryškumą. Norėdami gauti suvokimo požiūriu tolygias skales, apsvarstykite OKLCH arba CIELAB spalvų erdves. Visada patikrinkite, ar jūsų šviesiausi atspalviai ir tamsiausi šešėliai išlaiko pakankamą kontrastą su numatytais fonais.
Kada naudoti šį įrankį, o kada kodą
Naudokite šį naršyklės įrankį greitam tyrinėjimui ir spalvų skalių generavimui dizaino darbo metu. Produkcinėms dizaino sistemoms generuokite atspalvius ir šešėlius programiškai, naudodami tokias spalvų bibliotekas kaip chroma.js ar culori, kurios palaiko suvokimo požiūriu tolygias spalvų erdves ir gali išvesti dizaino žetonus bet kokiu formatu.