tigtools

Färgomvandlare

Skriv eller klistra in en färg i valfritt format som stöds, eller välj en, så uppdateras alla andra format direkt.

Körs i din webbläsare Ingen registrering

Avläst som HEX.

HEX
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)
HWB
hwb(210 20% 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CMYK
cmyk(66.7%, 33.3%, 0%, 40%)

CMYK här är en enkel formel, inte färghanterad. För tryck, konvertera med den ICC-profil som din skrivare ger dig.

Så här använder du det

  1. Skriv eller klistra in en färg, till exempel #1e90ff, rgb(30 144 255) eller oklch(65% 0.18 250). Du kan också klicka på färgväljaren.
  2. Kontrollera färgrutan för att se att det är den färg du förväntade dig.
  3. Kopiera det format du behöver från listan. Värden med transparens behåller sitt alpha-värde.

Så fungerar det

Accepterade indata: HEX med 3, 4, 6 eller 8 siffror (den 4:e och 8:e siffran är alfa), rgb() och rgba() med tal eller procent, hsl() och hsla(), hwb(), oklch() och cmyk() med procent eller tal från 0 till 100. Både den klassiska kommasyntaxen och den moderna syntaxen med mellanslag och ”/ alfa” fungerar. Nyansvärden accepterar deg, turn, rad och grad. Namngivna färger som ”tomato” läses inte; använd färgväljaren eller en färgkod i stället.

Alla konverteringar sker via sRGB. HSL och HWB är enkla omvandlingar av RGB-värdena, så de konverteras exakt. OKLCH är en perceptuell färgrymd: lika stora steg i ljushet upplevs som ungefär lika stora skillnader, vilket gör den användbar för att bygga paletter. Den beräknas med de publicerade OKLab-matriserna. Vissa OKLCH-färger ligger utanför det som sRGB kan visa; verktyget anger det och visar den närmaste visningsbara färgen.

CMYK beräknas med den vanliga förenklade formeln (K = 1 − den största RGB-kanalen). Verkligt tryckresultat beror på papper, bläck och ICC-profilen, så betrakta dessa siffror som en utgångspunkt, inte som en tryckspecifikation.

Exempel

Från varumärkets HEX-kod till CSS

En stilguide anger #0b5d1e. Klistra in den för att få rgb(11, 93, 30) för äldre CSS, hsl(133.9, 78.8%, 20.4%) för att justera ljusheten manuellt och ett oklch()-värde för moderna CSS-färgfunktioner.

Läsa av en färg med transparens

rgba(0, 0, 0, 0.5) omvandlas till #00000080. De två sista HEX-siffrorna (80) är alfavärdet: 128 av 255, cirka 50 %.

Kontrollera ett OKLCH-värde från en designfil

oklch(70% 0.4 150) är en mycket mättad grön färg som sRGB-skärmar inte kan visa. Verktyget markerar det och ger den närmaste sRGB-färgen, så att du vet att designen kommer att se annorlunda ut på de flesta skärmar.

Vanliga frågor

Varför ändras HEX ibland med ett när man konverterar till HSL och tillbaka?

HEX lagrar heltal från 0 till 255 per kanal. Värden i andra format avrundas för visning (HSL till en decimal), och om du konverterar ett avrundat värde tillbaka kan resultatet hamna ett steg ifrån. Kopiera HEX-värdet om du behöver det exakta ursprungsvärdet.

Är CMYK-värdet korrekt för tryck?

Nej, inte i sig. Det använder en enkel formel utan färgprofil. Tryckerier använder profiler som FOGRA eller GRACoL som ger andra värden, så fråga ditt tryckeri eller konvertera i ett färghanterat program.

Vad är OKLCH och kan jag använda det i CSS?

OKLCH beskriver en färg genom upplevd ljushet, kroma (färgrikedom) och kulör. Aktuella versioner av de stora webbläsarna stöder oklch() i CSS. Behåll en HEX- eller rgb()-reserv om du stöder äldre webbläsare.

Vad betyder en HEX-kod med åtta siffror?

#RRGGBBAA: de två sista siffrorna är opacitet, från 00 (helt transparent) till ff (helt opak). Den fyrsiffriga formen #RGBA fungerar på samma sätt med en siffra per kanal.

Integritet

Färger omvandlas i din webbläsare. Inget du anger skickas någonstans eller sparas.