# Färgtonsverktyg

Generera toner av en färg genom att blanda den med neutralgrått i jämna steg. Mättnaden minskar medan nyansen bevaras. 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 ton, med början från originalfärgen. Användbart för dämpade paletter, inaktiverade lägen, subtila ytor och lugnare varianter av varumärkesfärger.

## Vanliga frågor

### Vad är en ton?

En ton är en färg blandad med grått. Den behåller sin nyans och blir mer dämpad, till skillnad från en tint, som blandas med vitt, eller en shade, som blandas med svart.

### Vilket grått används?

sRGB-mellangrått #808080, rgb(128 128 128). Ljusa färger blir därför något mörkare och mörka färger något ljusare när de närmar sig det. Om du vill blanda med en annan grå färg använder du Color Mixer med din egen grå färg.

### Hur fördelas stegen?

Med N steg blandar rad k färgen med (k - 1) / N grått, så 10 steg ger 0 %, 10 %, 20 % och så vidare upp till 90 %. Den första raden är alltid originalfärgen, och rent grått ingår aldrig i listan.

### Hur skiljer sig en ton från att sänka mättnaden i HSL?

Om du sänker mättnaden i HSL behålls ljusheten i HSL, medan blandning med grått också drar ljusheten mot mitten. Toner ser därför ut som färgen sedd genom ett grått filter, vilket passar bra för dämpade bakgrunder och inaktiverade lägen.

### Vad är skillnaden mellan blandning i sRGB och OKLab?

Blandning i sRGB beräknar medelvärdet av de gammakodade kanalvärdena, den klassiska metoden i färgtonstabeller och Sass mix() som liknar färgblandning. Blandning i OKLab sker i ett perceptuellt färgrymd, så kroman minskar jämnare från steg till steg.

### 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 toner kan jag generera?

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 grått, hexkoden, rgb(), hsl() och oklch() i modern CSS-syntax. Kanaler i RGB är heltal, procentsatser i HSL har upp till två decimaler och OKLCH-ljushet och kromavärde upp till fyra.

### Vad händer med transparenta färger och färger med stort färgomfång?

Alfa från indata behålls för varje ton, så hexkoderna får då 8 siffror. Steg utanför färgomfånget mappas till sRGB med algoritmen CSS Color 4 i kolumnerna HEX, RGB och HSL, medan kolumnen OKLCH behåller det omappade värdet.

### Hur återskapar jag en ton i CSS?

Kopiera hex- eller oklch()-värdet, eller låt webbläsaren blanda det med color-mix(in oklab, var(--brand) 70%, #808080) för 30 %-tonen med OKLab-inställningen. color-mix() fungerar i alla aktuella större webbläsare.

Vill du annonsera här?

[Mejla oss](mailto:hi@dennn.is?subject=Annonsera%20p%C3%A5%20OneClick%20Pro)

[Annons Pluginpaketet för agenter för WordPress.](https://sleekwp.com/?ref=oneclickpro)