Färgtoningsgenerator
Skapa ljusare färgtoningar genom att blanda en färg med vitt i jämna steg. Ange en färg i valfritt CSS-format, välj 2 till 20 steg och ett blandningsutrymme, så får du en tabell med HEX-, RGB-, HSL- och OKLCH-värden för varje toning, med start från originalfärgen. Blandning i sRGB ger samma resultat som klassiska verktyg för ljusare toningar och Sass, medan OKLab ger jämna steg sett till hur vi uppfattar färger. Perfekt för bakgrunder, hovringslägen och skalor.
Vanliga frågor
Vad är en ljusare färgtoning?
En ljusare färgtoning är en färg som blandats med vitt. Den behåller sin nyans och blir ljusare och blekare, till skillnad från en mörkare nyans som blandats med svart eller en ton som blandats med grått.
Hur fördelas stegen?
Med N steg blandas färgen med (k - 1) / N vitt på rad k, så 10 steg ger 0 %, 10 %, 20 % och så vidare upp till 90 %. Den första raden visar alltid originalfärgen, och rent vitt ingår aldrig i listan.
Vad är skillnaden mellan blandning i sRGB och OKLab?
Blandning i sRGB beräknar medelvärdet av de gammakodade kanalvärdena, vilket är vad Sass och mix() gör med vitt, liksom de flesta klassiska generatorer för ljusare färgtoningar. Blandning i OKLab sker i ett perceptuellt färgrymd, så stegen i ljushet ser jämnare ut och färgen tvättas inte ur lika snabbt i den ljusaste änden.
Vilka indatformat kan jag använda?
Hexkoder med eller utan #, CSS-färgnamn, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() och cmyk(). Ange en färg per körning.
Hur många ljusare toningar kan jag skapa?
Mellan 2 och 20 per körning, 10 som standard. Antalet inkluderar originalfärgen på den första raden.
Vilka värden visas i tabellen?
För varje steg visas andelen vitt, hexkoden, rgb(), hsl() och oklch() i modern CSS-syntax. RGB-kanaler anges som heltal, HSL-procenttal med upp till två decimaler och OKLCH-ljushet och krominans med upp till fyra.
Vad händer med transparenta färger?
Indatavärdets alfa bevaras för varje ljusare toning, eftersom vitt blandas in med samma alfa. Hexkoderna får då 8 siffror och funktionerna CSS avslutas med alfa efter ett snedstreck.
Vad händer med färger utanför sRGB?
Blandningen använder hela färgen, men HEX, RGB och HSL kan bara visa sRGB, så steg utanför färgomfånget mappas till sRGB med algoritmen i CSS Color 4 i dessa kolumner. OKLCH-kolumnen behåller det omappade värdet.
Hur använder jag de ljusare toningarna i CSS?
Kopiera hex- eller oklch()-värdena till anpassade egenskaper, till exempel --brand-100 och --brand-200. Om du i stället vill blanda i webbläsaren ger color-mix(in oklab, var(--brand) 80%, white) samma ljusare toning på 20 % som med inställningen OKLab.
Kan jag använda vit text på en ljus toning?
Vanligtvis inte, eftersom ljusa toningar har låg kontrast mot vitt. Använd mörk text på ljusa toningar och kontrollera varje färgpar med en kontrastkontroll; normal text behöver minst 4.5:1 för WCAG AA.