Generator för mörkare färgnyanser
En mörk nyans (shade) är resultatet av att blanda en färg med svart; varje steg blir mörkare. Generatorn tar en HEX-basfärg och skapar 3 till 20 steg (som standard 10) av allt mörkare nyanser, plus de ljusare nyanserna av samma bas. Användbart för stegen i designsystemspaletter (500 → 900), nedtryckt/aktivt tillstånd för knappar, textfärger som förblir läsbara och skuggöverlägg. Varje steg visas som en färgruta med sitt hex-värde redo att kopiera.
Så fungerar generering av nyanser
-
1
Välj en basfärg
Använd färgväljaren, eller skicka ett hex-värde via sidans URL i stegläget. Basen ligger mellan det ljusa och det mörka nyansområdet.
-
2
Välj antal steg
3 till 20 steg, som standard 10. Fler steg ger en mjukare stege; färre steg ger kraftigare hopp.
-
3
Blanda med svart i jämna steg
Varje steg multiplicerar de röda, gröna och blå kanalerna med samma faktor, vilket motsvarar blandning med svart (eller vitt för ljusa nyanser) i jämna steg. Med 10 steg är varje steg ungefär 9 % mörkare eller ljusare. Nyansen förblir identisk med basen.
-
4
Läs av skalan
Varje färgruta visar sitt hex-värde. Markera texten för att kopiera den till CSS, ett Tailwind-tema eller en design token-fil.
Mörk nyans, ljus nyans och dämpad ton
- Mörk nyans (shade): färg + svart → mörkare.
- Ljus nyans (tint): färg + vitt → ljusare.
- Dämpad ton (tone): färg + grått → mindre mättad.
Den här generatorn skapar både mörka och ljusa nyanser från samma bas. Paret ljus nyans + mörk nyans bildar oftast en designsystemspalett (t.ex. brand-100 till brand-900 där 500 är basen).
Exempelskala: #3B82F6 (Tailwind blue-500)
| Steg | Hex | Blandning | Roll i designsystemet |
|---|---|---|---|
| 0 | #3B82F6 | Bas | Primärt varumärke (t.ex. blue-500) |
| 1 | #316CCD | 17 % svart | Hover-tillstånd |
| 2 | #2756A4 | 33 % svart | Nedtryckt/aktivt tillstånd (blue-600) |
| 3 | #1D417B | 50 % svart | blue-700 |
| 4 | #132B52 | 67 % svart | blue-800 |
| 5 | #091528 | 83 % svart | blue-900 |
Tabellen visar en skala med 5 steg: varje steg är en sjättedel av vägen till svart.
Så beräknas stegen
Verktyget multiplicerar basfärgens röda, gröna och blå kanaler med samma faktor i varje steg. Det motsvarar blandning med svart i det mörka området och med vitt i det ljusa, i jämna steg. Med 10 steg är varje steg ungefär 9 % mörkare eller ljusare än det föregående.
Eftersom alla kanaler skalas lika bevaras basens nyans exakt: en blå bas förblir blå, en grön bas förblir grön. Att blanda med svart sänker också mättnaden tillsammans med ljusheten, så mörka steg ser naturliga ut i stället för glödande. Att bara sänka ljusheten, utan att röra mättnaden, lämnar mörka färger övermättade.
Att använda nyanser i UI
- Knapp: bas för viloläge, 1-2 steg mörkare vid hovring, 2-3 steg mörkare vid aktivt/nedtryckt läge.
- Brödtext: 2-3 steg mörkare än basen säkerställer läsbarhet på vitt; ljusare för sekundär text.
- Kantlinje / avgränsare: 1-2 steg mörkare än bakgrunden, tillräckligt för att avgränsa utan att överväldiga.
- Skuggor: mörkaste steget (eller mörkare) med reducerad alfa snarare än en ny grå.
- Datavisualisering: använd nyanser av en enda nyans för en sekventiell skala (värdestorlekar), eller para nyanser av två nyanser för divergerande skalor (positiv kontra negativ).
Vanliga fallgropar
- För många steg pressas ihop till oskiljaktiga band. Skalor med 10 steg fungerar bra eftersom varje steg är ungefär 9 % mörkare; vid 20 steg blir skillnaderna subtila. För starka kontraster väljer du 3-5 steg.
- Nyansförskjutning är inte möjlig här: varje steg skalas alla kanaler lika, så ett rött förblir rött och ett grönt förblir grönt. Nyansförskjutning uppstår när man interpolerar mellan två olika färger, vilket detta verktyg inte gör.
- Att ignorera tillgänglighet: nyanser som ser harmoniska ut kan underkännas i WCAG-kontrast mot bakgrunden. Verifiera alltid kontrasten vid varje steg.
- Skalor med enbart mörka nyanser känns tryckande på mörka bakgrunder. Para ihop dem med en skala av ljusa nyanser för ett användbart mörkt läge.
Vanliga frågor
För ett designsystem är 5 steg med mörka nyanser + 5 steg med ljusa nyanser (10 totalt runt basen) den vanliga konventionen. För snabba färger till gränssnittstillstånd (hovring, aktivt) räcker 3 steg.
Den jämna blandning som används här håller varje steg på en rak linje mellan basen och svart, så mellanstegen förblir rena. En grumlig mitt kommer vanligtvis från ett verktyg som interpolerar mellan två olika färger, eller som sänker ljusheten utan att sänka mättnaden.
Mörka färger har redan lite utrymme att bli mörkare innan de blir svarta; en mörklila bas ger bara 2-3 distinkta steg innan skalan kollapsar. Välj en bas med mellanljushet för rikare skalor.
Liknande i avsikt, men att blanda med svart minskar mättnaden tillsammans med ljusheten, vilket vanligtvis ser mer naturligt ut. Ren ljushetsminskning håller mättnaden hög och kan resultera i övermättade mörka färger.
Relaterade verktyg
ASCII-tabellreferens
Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.
HTML-teckenreferens
En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.
Färgpalettgenerator
Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.
Slumpmässig färggenerator
Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.
Förenklare för boolesk algebra
Utvärdera ett booleskt uttryck för varje kombination av indata och visa den fullständiga sanningstabellen. Stöder upp till fem variabler och operatorerna &, |, ! och ^.
Slumpgenerator för bokstäver
Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.