CodeKitHubHvad er dette værktøj?
En nuancerække er en serie variationer af én farve ved forskellige lysstyrkeniveauer, brugt gennem hele UI-designet til ting som hover-tilstande, deaktiverede tilstande, kanter og baggrunde, der skal relatere til en brandfarve uden at være identiske med den.
Dette værktøj konverterer din basisfarve til HSL, holder farvetone og mætning fast og trinner lysstyrken fra ca. 95 % (næsten hvid tone) ned til ca. 10 % (næsten sort nuance), hvor din originale farve er placeret i sin naturlige position midt i rækken.
Hvorfor bruge det?
- Genererer en designsystem-agtig række (som Tailwinds 50/100/200.../900-skala) fra en hvilken som helst enkelt farve, ikke kun en fast forudindstillet palette.
- Vælg 7, 9 eller 11 trin afhængigt af hvor finkornet du har brug for, at rækken skal være.
- Hvert trin viser sin præcise HEX-kode og lysstyrkeprocent — klik for at kopiere.
- Holder farvetone og mætning konstant på tværs af hele rækken, så alle nuancer fremstår klart relateret til basisfarven i stedet for at drive mod gråt.
- Gratis, øjeblikkelig og fuldstændig lokal.
Sådan bruger du det
- Vælg din basisfarve med farvevælgeren eller ved at indtaste en HEX-kode.
- Vælg hvor mange trin du vil have i rækken (7, 9 eller 11).
- Aflæs hver nuances HEX-kode og lysstyrkeprocent direkte på dens farveprøve.
- Klik på en hvilken som helst farveprøve for at kopiere dens HEX-kode.
Eksempel
Input
#3B82F6 (en mellemblå farve), 9 trinOutput
9 nuancer fra en næsten hvid tone (~95 % lysstyrke) ned til en næsten sort nuance (~10 % lysstyrke), hvor #3B82F6 selv er placeret som det midterste trinFarvetone og mætning forbliver faste på tværs af alle 9 trin — kun lysstyrken ændrer sig — så hver nuance fremstår klart som del af samme farvefamilie.
Ofte stillede spørgsmål
Er dette det samme system, Tailwind CSS bruger til sine farveskalaer?
Det er den samme grundlæggende idé (fast farvetone/mætning, varierende lysstyrke), men ikke en nøjagtig kopi af Tailwinds specifikke palette — Tailwinds 50-900-skalaer er håndtilpasset af designere, ikke genereret af en enkelt formel. Dette værktøj giver dig en sammenlignelig struktur genereret ud fra en hvilken som helst farve, du vælger, hvilket er nyttigt, når din basisfarve ikke er en af Tailwinds forudindstillinger.
Hvorfor ser min farve næsten ens ud ved to nabotrin?
Det kan ske nær de meget lyse eller meget mørke ender af rækken, hvor oplevet lysstyrke ændrer sig langsommere, end den numeriske procent antyder (en kendt egenskab ved menneskelig farveopfattelse, ikke specifik for dette værktøj). At vælge færre trin (7 i stedet for 11) spreder lysstyrkeværdierne længere fra hinanden og reducerer næsten-identiske farveprøver.
Kan jeg bruge disse nuancer direkte som CSS-tilpassede egenskaber?
Ja — kopiér hver HEX-kode, og indsæt den i dine CSS-variabler (f.eks. --color-brand-100 til --color-brand-900), og match rækkens position med den navngivningsskala, dit projekt bruger.
Skal jeg bruge dette eller Color Mixer?
Hvis du laver lysere og mørkere versioner af én farve — hover-tilstande, subtile baggrunde, kanter der relaterer til en brandfarve — brug denne nuance-generator. Hvis du derimod har brug for farven mellem to forskellige farver (f.eks. et trin mellem din primære blå og en sekundær orange), brug Color Mixer, som interpolerer to farvers RGB-kanaler i et hvilket som helst forhold i stedet for at variere én farves lysstyrke.
Hvad sker der, hvis min basisfarve allerede er meget lys eller meget mørk?
Basisfarven sidder altid i den midterste række, med toner der trinner op til ca. 95 % lysstyrke over den, og nuancer der trinner ned til ca. 10 % under den. Hvis din basisfarve allerede er næsten hvid, komprimeres tonehalvdelen af rækken til et smalt lysstyrkeinterval (næsten-identiske rækker), mens nuancehalvdelen spreder sig bredt — og omvendt for en meget mørk basisfarve. For den mest jævnt fordelte række, start med en mellem-lysstyrke version af din farve (ca. 40-60 % lysstyrke).
Kan den også generere toner (farven blandet med gråt)?
Nej — dette værktøj varierer kun lysstyrken, mens mætningen holdes fast, hvilket producerer toner og nuancer, men ikke gråtoner. Hvis du vil have en mere dæmpet række, skal du afmætte din basisfarve først (vælg en mere grå version af den i farvevælgeren) og generere rækken derfra; hvert trin vil arve den lavere mætning.