CodeKitHubVad är detta verktyg?
En nyansskala är en serie variationer av en färg vid olika ljushetsnivåer, som används genomgående i UI-design för saker som hover-tillstånd, inaktiverade tillstånd, kanter och bakgrunder som behöver relatera till en varumärkesfärg utan att vara identiska med den.
Det här verktyget konverterar din basfärg till HSL, håller nyans och mättnad fasta och stegar ljusheten från cirka 95 % (nästan vit ton) ner till cirka 10 % (nästan svart nyans), med din ursprungliga färg placerad i sin naturliga position i mitten av skalan.
Varför använda det?
- Genererar en designsystem-liknande skala (som Tailwinds 50/100/200.../900-skala) från valfri enskild färg, inte bara från en fast förinställd palett.
- Välj 7, 9 eller 11 steg beroende på hur finfördelad du behöver skalan vara.
- Varje steg visar sin exakta HEX-kod och ljushetsprocent — klicka för att kopiera.
- Håller nyans och mättnad konstanta genom hela skalan, så att alla nyanser tydligt läses som relaterade till basfärgen istället för att driva mot grått.
- Gratis, direkt och helt lokalt.
Så använder du det
- Välj din basfärg med färgväljaren eller genom att skriva in en HEX-kod.
- Välj hur många steg du vill ha i skalan (7, 9 eller 11).
- Läs varje nyans HEX-kod och ljushetsprocent direkt på dess färgruta.
- Klicka på valfri färgruta för att kopiera dess HEX-kod.
Exempel
Inmatning
#3B82F6 (en medelblå), 9 stegResultat
9 nyanser från en nästan vit ton (~95 % ljushet) ner till en nästan svart nyans (~10 % ljushet), där #3B82F6 själv är placerad som mellersta stegetNyans och mättnad förblir fasta genom alla 9 steg — bara ljusheten ändras — så varje nyans läses tydligt som en del av samma färgfamilj.
Vanliga frågor
Är det här samma system som Tailwind CSS använder för sina färgskalor?
Det är samma underliggande idé (fast nyans/mättnad, varierande ljushet) men inte en exakt kopia av Tailwinds specifika palett — Tailwinds 50-900-skalor är handjusterade av designers, inte genererade av en enda formel. Det här verktyget ger dig en jämförbar struktur genererad från valfri färg du väljer, vilket är användbart när din basfärg inte är en av Tailwinds förinställningar.
Varför ser min färg nästan likadan ut vid två intilliggande steg?
Det kan hända nära skalans mycket ljusa eller mycket mörka ändar, där upplevd ljushet ändras långsammare än vad den numeriska procenten antyder (en känd egenskap hos mänsklig färguppfattning, inte specifik för det här verktyget). Att välja färre steg (7 istället för 11) sprider ljushetsvärdena längre isär och minskar nästan identiska färgrutor.
Kan jag använda dessa nyanser direkt som anpassade CSS-egenskaper?
Ja — kopiera varje HEX-kod och klistra in den i dina CSS-variabler (t.ex. --color-brand-100 till --color-brand-900), och matcha skalans position med vilken namngivningsskala ditt projekt använder.
Ska jag använda det här eller Color Mixer?
Om du gör ljusare och mörkare versioner av en färg — hover-tillstånd, subtila bakgrunder, kanter som relaterar till en varumärkesfärg — använd den här nyansgeneratorn. Om du istället behöver färgen mellan två olika färger (säg, ett steg mellan din primära blå och en sekundär orange), använd Color Mixer, som interpolerar två färgers RGB-kanaler i valfritt förhållande istället för att variera en färgs ljushet.
Vad händer om min basfärg redan är mycket ljus eller mycket mörk?
Basfärgen sitter alltid i mittraden, med toner som stegar upp till cirka 95 % ljushet ovanför den och nyanser som stegar ner till cirka 10 % under den. Om din bas redan är nästan vit komprimeras tonhalvan av skalan till ett smalt ljushetsintervall (nästan identiska rader) medan nyanshalvan sprids brett — och vice versa för en mycket mörk bas. För den jämnast fördelade skalan, börja med en version av din färg med medelljushet (ungefär 40-60 % ljushet).
Kan den även generera toner (färgen blandad med grått)?
Nej — det här verktyget varierar bara ljusheten medan mättnaden hålls fast, vilket ger toner och nyanser men inte gråtoner. Om du vill ha en mer dämpad skala, avmätta din basfärg först (välj en gråare version av den i färgväljaren) och generera skalan därifrån; varje steg ärver den lägre mättnaden.