Hoppa till innehållet

Färgomvandlare

Webb och utveckling

Hur skriver du en färg som HEX, RGB eller HSL?

Välj eller ange en färg och kopiera den som HEX, RGB, HSL, HWB eller OKLCH, med närmaste CSS-namn.

Ett namn, hex, rgb(), hsl(), hwb() eller oklch(), som i CSS.

HEX

#2563eb

Närmaste CSS-färgnamn: royalblue (#4169e1).

Samma färg i andra format

RGB
rgb(37 99 235)
HSL
hsl(221.2 83.2% 53.3%)
HWB
hwb(221.2 14.5% 7.8%)
OKLCH
oklch(54.61% 0.2152 262.88)

Ljusa och mörka nyanser

Ljushet 95 %
#e6efff
Ljushet 85 %
#b4ceff
Ljushet 75 %
#82adff
Ljushet 65 %
#4f89ff
Ljushet 55 %
#2664ec
Ljushet 45 %
#0543ca
Ljushet 35 %
#002b93
Ljushet 25 %
#00185c
Ljushet 15 %
#00062a

Sponsrade länkar

Välj eller ange en färg och kopiera den som HEX, RGB, HSL, HWB eller OKLCH, med närmaste CSS-namn.

Så använder du verktyget

  1. Ange en färg i valfritt CSS-format, som tomato, #1a73e8, rgb(26 115 232) eller oklch(60% 0.2 260), eller tryck på färgrutan för att välja.
  2. Kopiera formatet du behöver. HEX visas först med RGB, HSL, HWB och OKLCH nedanför.
  3. Använd nyansraden för att hitta ljusare och mörkare versioner av samma färg.

Vanliga CSS-färger i HEX och RGB

CSS-namnHEXRGB
black#000000rgb(0 0 0)
white#ffffffrgb(255 255 255)
red#ff0000rgb(255 0 0)
lime#00ff00rgb(0 255 0)
blue#0000ffrgb(0 0 255)
yellow#ffff00rgb(255 255 0)

Så fungerar det

En skärm skapar färg genom att blanda rött, grönt och blått ljus. RGB och HEX skriver blandningen direkt: HEX är samma tre mängder i bas 16, så #1a73e8 betyder rött 26, grönt 115, blått 232. HSL och HWB beskriver samma färg på ett mer mänskligt sätt, som en kulör i färgcirkeln och hur ljus, mörk eller grå den är.

OKLCH är en nyare beskrivning där ljusheten ligger nära ögats uppfattning: två färger med samma ljushet ser lika ljusa ut, vilket sRGB-baserad HSL inte garanterar (CSS Color Module Level 4; Ottosson, 2020). Nyanserna behåller kulör och färgstyrka och ändrar bara OKLCH-ljusheten, så stegen ser jämna ut. Om en färg inte kan visas vid den ljusheten sänks färgstyrkan tills den ryms.

Närmaste CSS-namn är den av 148 namngivna färger som har minst skillnad i OKLab, en färgrymd där lika avstånd ska upplevas som lika stora skillnader. En färg utanför vanligt skärmomfång (sRGB) visas som närmaste färg som ryms.

Sponsrade länkar

Vanliga frågor

Vad betyder en hexkod med 8 siffror?

De sista två siffrorna anger opacitet, från 00 (osynlig) till ff (helt ogenomskinlig). De tas med för färger som inte är helt opaka, och färgrutan visas över ett rutmönster.

Varför kan färger med samma HSL-ljushet se olika ut?

HSL-ljushet beräknas på skärmens röda, gröna och blå värden, inte på hur ljus färgen ser ut. Gult ser mycket ljusare ut än blått vid samma HSL-ljushet, och därför används OKLCH för nyanserna.

Vilket format ska jag använda i CSS?

Alla fungerar i moderna webbläsare. HEX är vanligast och kortast, HSL är lätt att justera för hand och OKLCH passar bäst för paletter med jämna steg och kan visa färger utanför sRGB på skärmar med stort färgomfång.

Motsvarar det närmaste CSS-namnet min färg exakt?

Inte alltid. Verktyget skiljer en exakt träff från den närmaste namngivna färgen.

Kan det konvertera målarfärger eller ICC-profiler?

Nej. Det arbetar med CSS-färger, inte fysiska färgsystem eller ICC-färgprofiler.

Det här kan du behöva härnäst

Mer i Webb och utveckling

Alla 18 verktyg i Webb och utveckling

Populärt just nu

Sponsrade länkar

Sponsrade länkar