Generator for toninger og nyanser
21 farger
#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
Slik fungerer generatoren for toner og nyanser
Hva verktøyet gjør
Generatoren for toner og nyanser lager lysere toner (blandet med hvitt) og mørkere nyanser (blandet med svart) fra enhver grunnfarge. Skriv inn en farge og velg antall trinn for å generere en jevn gradient av variasjoner. Hvert trinn viser HEX-, RGB-verdier og blandingsprosenten, noe som gjør det enkelt å bygge konsistente fargeskalaer for UI-design, merkevarebygging og datavisualisering.
Vanlige bruksområder for utviklere
Utviklere bruker generatorer for toner og nyanser når de bygger skalaer for designtokens (f.eks. blue-100 til blue-900), lager hover- og active-tilstander for interaktive elementer, designer tilgjengelige fargehierarkier og produserer konsistente bakgrunns- og overflatefarger for lyse og mørke temaer. Verktøyet er essensielt for å bygge tilpassede fargepaletter i Tailwind CSS eller fargesystemer i Material Design.
Slik fungerer toner og nyanser
En tone lages ved å blande en farge med hvitt, noe som øker lysheten. En nyanse lages ved å blande med svart, noe som reduserer lysheten. Formelen for toner er: new = base + (255 - base) × factor. For nyanser: new = base × (1 - factor). Trinnene fordeles jevnt mellom grunnfargen og rent hvitt (toner) eller rent svart (nyanser), og gir en lineær gradient av fargeverdier.
Vanlige fallgruver og kanttilfeller
Lineær blanding med hvitt eller svart kan gi utvaskede toner eller grumsete nyanser for enkelte nyanser. Gult kan se grønnaktig ut når det mørknes, og blått kan miste livlighet når det lysnes. For perseptuelt uniforme skalaer, vurder å bruke OKLCH- eller CIELAB-fargerom. Verifiser alltid at de lyseste tonene og de mørkeste nyansene har tilstrekkelig kontrast mot de tiltenkte bakgrunnene.
Når du bør bruke dette verktøyet vs. kode
Bruk dette nettleserverktøyet for rask utforsking og generering av fargeskalaer under designarbeid. For produksjonsklare designsystemer, generer toner og nyanser programmatisk ved å bruke fargebiblioteker som chroma.js eller culori som støtter perseptuelt uniforme fargerom og kan eksportere designtokens i hvilket som helst format.