Nyanser och Skuggningar
Generatorn skapar ljusare toner (blandade med vitt) och mörkare nyanser (blandade med svart) av valfri basfärg i 5, 10 eller 20 steg, med CSS-variabler som resultat.
Om verktyget
Generatorn skapar ljusare toner (blandade med vitt) och mörkare nyanser (blandade med svart) av valfri basfärg i 5, 10 eller 20 steg, med CSS-variabler som resultat.
Så använder du det
- Välj en basfärg.
- Välj 5, 10 eller 20 steg.
- Klicka på en färgruta för att kopiera dess hex-värde.
- Klicka på Copy as CSS Variables för att exportera hela skalan.
Bra att veta
- En ljus ton (tint) är en färg blandad med vitt; en mörk nyans (shade) är en färg blandad med svart.
- Generatorn blandar i lika stora RGB-steg, så varje steg ändrar färgen lika mycket.
- Designsystem som Tailwind använder en skala från 50–900 som byggs av ljusa och mörka toner av varje varumärkesfärg.
- Kontrollera kontrasten på textfärger som tas från en skala, eftersom stegen i mitten ofta inte klarar WCAG AA mot vitt.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Vad är skillnaden mellan en ljus och en mörk ton?
En ljus ton (tint) gör en färg ljusare genom att tillsätta vitt; en mörk nyans (shade) gör den mörkare genom att tillsätta svart. En gråton (tone) tillsätter grått.
Hur många nyanser bör en färg i ett designsystem ha?
Omkring 10 steg är vanligt, till exempel 50, 100 … 900 i Tailwind. Det ger tillräcklig bredd för bakgrunder, kanter, text och hover-lägen.
Hur använder jag skalan i CSS?
Kopiera skalan som custom properties och använd dem med var(--color-name), till exempel för bakgrunder, kanter eller hover-lägen.
Varför ser vissa ljusa toner urvattnade ut?
Att blanda med vitt sänker mättnaden samtidigt som ljusheten ökar. För klarare ljusa varianter kan du justera mättnaden separat i HSL.