CodeKitHubHva er dette verktøyet?
En nyanserekke er en serie variasjoner av én farge ved ulike lysstyrkenivåer, brukt i UI-design til ting som hover-tilstander, deaktiverte tilstander, kanter og bakgrunner som skal relatere til en merkevarefarge uten å være identiske med den.
Dette verktøyet konverterer basisfargen din til HSL, holder fargetone og metning faste, og trinner lysstyrken fra omtrent 95 % (nesten hvit tone) ned til omtrent 10 % (nesten svart nyanse), med den opprinnelige fargen din plassert i sin naturlige posisjon midt i rekken.
Hvorfor bruke det?
- Genererer en designsystem-lignende rekke (som Tailwinds 50/100/200.../900-skala) fra hvilken som helst enkelt farge, ikke bare fra en fast forhåndsdefinert palett.
- Velg 7, 9 eller 11 trinn avhengig av hvor finmasket du trenger rekken.
- Hvert trinn viser sin nøyaktige HEX-kode og lysstyrkeprosent — klikk for å kopiere.
- Holder fargetone og metning konstant gjennom hele rekken, slik at alle nyanser fremstår tydelig relatert til basisfargen i stedet for å drive mot grått.
- Gratis, umiddelbart og helt lokalt.
Slik bruker du det
- Velg basisfargen din med fargevelgeren eller ved å skrive inn en HEX-kode.
- Velg hvor mange trinn du vil ha i rekken (7, 9 eller 11).
- Les av HEX-koden og lysstyrkeprosenten til hver nyanse direkte på fargeprøven.
- Klikk på en hvilken som helst fargeprøve for å kopiere HEX-koden.
Eksempel
Inndata
#3B82F6 (en middels blå), 9 trinnResultat
9 nyanser fra en nesten hvit tone (~95 % lysstyrke) ned til en nesten svart nyanse (~10 % lysstyrke), med #3B82F6 selv plassert som det midterste trinnetFargetone og metning forblir faste gjennom alle 9 trinn — bare lysstyrken endres — slik at hver nyanse tydelig fremstår som del av samme fargefamilie.
Ofte stilte spørsmål
Er dette det samme systemet Tailwind CSS bruker for fargeskalaene sine?
Det er den samme underliggende ideen (fast fargetone/metning, varierende lysstyrke), men ikke en eksakt kopi av Tailwinds spesifikke palett — Tailwinds 50-900-skalaer er håndjustert av designere, ikke generert av én formel. Dette verktøyet gir deg en sammenlignbar struktur generert fra hvilken som helst farge du velger, noe som er nyttig når basisfargen din ikke er en av Tailwinds forhåndsinnstillinger.
Hvorfor ser fargen min nesten lik ut på to nabotrinn?
Det kan skje nær de svært lyse eller svært mørke endene av rekken, der oppfattet lysstyrke endres saktere enn den numeriske prosenten antyder (en kjent egenskap ved menneskelig fargeoppfatning, ikke spesifikk for dette verktøyet). Å velge færre trinn (7 i stedet for 11) sprer lysstyrkeverdiene lenger fra hverandre og reduserer nesten-identiske fargeprøver.
Kan jeg bruke disse nyansene direkte som egendefinerte CSS-egenskaper?
Ja — kopier hver HEX-kode og lim den inn i CSS-variablene dine (f.eks. --color-brand-100 til --color-brand-900), og match posisjonen i rekken med hvilken navngivningsskala prosjektet ditt bruker.
Bør jeg bruke dette eller Color Mixer?
Hvis du lager lysere og mørkere versjoner av én farge — hover-tilstander, subtile bakgrunner, kanter som relaterer til en merkevarefarge — bruk denne nyansegeneratoren. Hvis du derimot trenger fargen mellom to ulike farger (for eksempel et trinn mellom din primære blå og en sekundær oransje), bruk Color Mixer, som interpolerer RGB-kanalene til to farger i et hvilket som helst forhold i stedet for å variere lysstyrken til én farge.
Hva skjer hvis basisfargen min allerede er svært lys eller svært mørk?
Basisfargen sitter alltid i den midterste raden, med toner som trinner opp til omtrent 95 % lysstyrke over den, og nyanser som trinner ned til omtrent 10 % under den. Hvis basisfargen din allerede er nesten hvit, komprimeres tonehalvdelen av rekken til et smalt lysstyrkeintervall (nesten-identiske rader), mens nyansehalvdelen sprer seg bredt — og omvendt for en svært mørk basisfarge. For den jevnest fordelte rekken, start med en middels lysstyrke-versjon av fargen din (omtrent 40-60 % lysstyrke).
Kan den også generere toner (fargen blandet med grått)?
Nei — dette verktøyet varierer bare lysstyrken mens metningen holdes fast, noe som gir toner og nyanser, men ikke gråtoner. Hvis du vil ha en mer dempet rekke, avmett basisfargen din først (velg en gråere versjon av den i fargevelgeren) og generer rekken derfra; hvert trinn vil arve den lavere metningen.