Generator til nuancer & skygger
21 farver
#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)Tekniske detaljer
Sådan fungerer generatoren til nuancer og skygger
Hvad værktøjet gør
Generatoren til nuancer og skygger skaber lysere nuancer (blandet med hvid) og mørkere skygger (blandet med sort) ud fra enhver basisfarve. Indtast en farve, og vælg antallet af trin for at generere en glidende gradient af variationer. Hvert trin viser HEX- og RGB-værdier samt blandingsprocenten, hvilket gør det nemt at opbygge konsistente farveskalaer til UI-design, branding og datavisualisering.
Almindelige anvendelsestilfælde for udviklere
Udviklere bruger generatorer til nuancer og skygger, når de opbygger skalaer til designtokens (f.eks. blue-100 til og med blue-900), skaber hover- og active-tilstande for interaktive elementer, designer tilgængelige farvehierarkier og producerer konsistente baggrunds- og overfladefarver til lyse og mørke temaer. Værktøjet er essentielt til at bygge Tailwind CSS-tilpassede farvepaletter eller Material Design-farvesystemer.
Sådan fungerer nuancer og skygger
En nuance skabes ved at blande en farve med hvid, hvilket øger dens lyshed. En skygge skabes ved at blande med sort, hvilket reducerer lysheden. Formlen for nuancer er: new = base + (255 - base) × factor. For skygger: new = base × (1 - factor). Trin fordeles jævnt mellem basisfarven og ren hvid (nuancer) eller ren sort (skygger), hvilket giver en lineær gradient af farveværdier.
Almindelige faldgruber og kanttilfælde
Lineær blanding med hvid eller sort kan give udvaskede nuancer eller mudrede skygger for nogle nuancer. Gule farver kan fremstå grønlige, når de gøres mørkere, og blå farver kan miste intensitet, når de gøres lysere. For perceptuelt ensartede skalaer kan du overveje at bruge OKLCH- eller CIELAB-farverum. Kontrollér altid, at dine lyseste nuancer og mørkeste skygger bevarer tilstrækkelig kontrast mod deres tilsigtede baggrunde.
Hvornår du skal bruge dette værktøj vs. kode
Brug dette browserværktøj til hurtig udforskning og generering af farveskalaer under designarbejde. Til produktionsklare designsystemer kan du generere nuancer og skygger programmatisk med farvebiblioteker som chroma.js eller culori, der understøtter perceptuelt ensartede farverum og kan outputte designtokens i ethvert format.