Vad betyder alla dessa färgformat?

En färg på en skärm är en blandning av rött, grönt och blått ljus, och varje format skriver den blandningen på sitt eget sätt. CSS och designverktyg använder HEX-koder och RGB-värden. HSL, HSV och HWB beskriver en färg med dess nyans, vinkeln på färghjulet, och med hur mättad och ljus den är, vilket gör den enklare att justera för hand. CMYK anger mängden cyan-, magenta-, gul- och svart bläck för tryck. LAB, LCH, OKLab och OKLCH är utformade så att lika stora steg i deras värden uppfattas som lika stora steg av ögat. Det underlättar när man arbetar med färgpaletter och gradienter, och modern CSS har stöd för alla fyra. Terminaler använder ANSI-färgkoder, och CSS har också namngivna färger som tomato.

Här är samma orange färg i varje format:

Format Exempel Vad värdena står för
HEX #ff6600 Rött, grönt och blått, med två hexadecimala siffror vardera
RGB rgb(255, 102, 0) Rött, grönt och blått från 0 till 255
HSL hsl(24, 100%, 50%) Nyans, mättnad och ljushet
HSV hsv(24, 100%, 100%) Nyans, mättnad och värde, även kallat HSB
HWB hwb(24 0% 0%) Nyans, vithet och svärta
CMYK cmyk(0%, 60%, 100%, 0%) Cyan-, magenta-, gul- och svart bläck
LAB lab(62.31, 55, 71.33) CIE-ljushet, grönt till rött och blått till gult
LCH lch(62.31, 90.07, 52.36) CIE-ljushet, färgstyrka och nyans
OKLab oklab(69.58% 0.1482 0.1406) Ljushet och två färgaxlar, i en nyare modell än LAB
OKLCH oklch(69.58% 0.2043 43.49) Ljushet, färgstyrka och nyans i OKLab
XYZ xyz(46, 30.77, 3.52) Färgrymden CIE 1931 som LAB bygger på
HCG hcg(24, 100%, 0%) Nyans, färgstyrka och gråhet
Färgnamn orangered Det CSS-färgnamn som ligger närmast
ANSI 16 91 Terminalkod för en av de 16 grundfärgerna
ANSI 256 208 Terminalkod för en av 256 färger
AppleScript RGB {65535, 26214, 0} Rött, grönt och blått från 0 till 65535, enligt AppleScripts format
Gråskala gray(46.7%) Ljusstyrka från 0 % till 100 %

Verktygsbeskrivning

Det här verktyget konverterar färger mellan dessa 17 format och visar färgen som en färgruta under resultatet. Alla färgkonverterare här fungerar på samma sätt, från den allmänna färgkonverteraren till verktyg för ett enskilt formatpar, som HEX till RGB, RGB till CMYK eller HEX till färgnamn: verktyget börjar med formaten som anges i namnet, och menyerna Källa och Mål kan användas för att välja andra format. Klistra in en färg så visas resultatet medan du skriver, redo att kopieras. När Automatisk identifiering är vald som källa, vilket är standard i färgkonverteraren, tar verktyget reda på formatet utifrån hur färgen är skriven. Med växlingsknappen vänder du på konverteringen.

Exempel

Inmatning Mål Resultat
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Färgnamn tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Det här kan du klistra in

  • HEX-koder med 3, 4, 6 eller 8 siffror, med eller utan #. En fjärde siffra eller ett sista sifferpar anger opaciteten.
  • Funktioner som rgb(), hsl() eller oklch(), med kommatecken eller mellanslag mellan värdena och en valfri opacitet som ett fjärde värde eller efter ett snedstreck: rgba(37, 99, 235, 0.5) eller rgb(37 99 235 / 50%).
  • Procentvärden för rött, grönt och blått, som i rgb(100%, 40%, 0%), samt nyanser i deg, rad, grad eller turn, som i hsl(0.5turn, 100%, 50%).
  • Enkla tal utan funktionsnamn, till exempel 255, 102, 0. Automatisk identifiering tolkar tre tal som RGB, eller som HSL när de två sista är procentvärden, och fyra tal som CMYK, såvida de inte ser ut som RGB med en opacitet.
  • Färgnamn med eller utan versaler och mellanslag: Rebecca Purple fungerar.
  • HSB-värden skrivna som hsb() och AppleScript-färger inom klammerparenteser, som {65535, 26214, 0}.

Så fungerar det

Beräkningarna görs med color-convert, ett JavaScript-bibliotek för färgkonvertering.

  • Opaciteten följer med till HEX, RGB, HSL, HWB, OKLab och OKLCH, som kan ange den. De andra formaten utelämnar den.
  • LAB, LCH och XYZ är CIE-värden med vitpunkten D65. CSS lab() och lch() använder vitpunkten D50, så värdena skiljer sig en aning.
  • LAB, LCH, OKLab och OKLCH kan beskriva färger som skärmar inte kan visa. När en sådan färg konverteras till HEX, RGB eller ett annat skärmformat begränsas dess färgkanaler till intervallet 0 till 255, så oklch(70% 0.3 145) blir #00c800.
  • Ett färgnamn som resultat är det CSS-färgnamn som ligger närmast. Det blir därför exakt bara för färger som har ett namn: #ff6600 ger orangered, som motsvarar #ff4500.
  • Resultat i ANSI 16 och ANSI 256 är ungefärliga, eftersom dessa paletter bara har 16 respektive 256 färger. ANSI 16-resultat är förgrundskoder, 30 till 37 och 90 till 97, och bakgrundskoderna 40 till 47 och 100 till 107 tolkas som samma färger.
  • CMYK beräknas med grundformeln, utan en färgprofil för skrivare. Därför kan tryckeriets CMYK-värden för samma färg skilja sig.
  • Gråskala är medelvärdet av de röda, gröna och blå värdena.

Tips

  • Resultat i HEX, RGB, HSL, HWB, OKLab, OKLCH och färgnamn är giltig CSS, så du kan klistra in dem direkt i en formatmall.
  • Automatisk identifiering tolkar ett tal med tre siffror, som 208, som en kort HEX-kod. Välj därför ANSI 256 eller ANSI 16 som källa för terminalkoder.
  • HSV och HSB är två namn för samma modell.