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 kulörton, vinkeln på färghjulet, och 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 utskrift. LAB, LCH, OKLab och OKLCH är utformade så att lika stora steg i deras värden ser ungefär lika stora ut för ögat, vilket är användbart för färgpaletter och toningar. Modern CSS stöder alla fyra. Terminaler använder ANSI-färgkoder, och CSS har också namngivna färger, till exempel 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%) Kulörton, mättnad och ljushet
HSV hsv(24, 100%, 100%) Kulörton, mättnad och värde, även kallat HSB
HWB hwb(24 0% 0%) Kulörton, 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, kroma och kulörton
OKLab oklab(69.58% 0.1482 0.1406) Ljushet och två färgaxlar, som i LAB
OKLCH oklch(69.58% 0.2043 43.49) Ljushet, kroma och kulörton i OKLab
XYZ xyz(46, 30.77, 3.52) CIE:s XYZ-färgrymd, som LAB bygger på
HCG hcg(24, 100%, 0%) Kulörton, kroma och gråhet
Färgnamn orangered Det närmaste namngivna CSS-färgnamnet
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 i en färgruta under resultatet. Alla färgkonverterare här fungerar på samma sätt, från den allmänna färgkonverteraren till verktygen för ett enskilt formatpar, som HEX till RGB, RGB till CMYK eller HEX till färgnamn: verktyget startar 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, klart att kopiera. När Automatisk identifiering är vald som källa, vilket är standard i färgkonverteraren, avgör verktyget formatet utifrån hur färgen är skriven. Med växlingsknappen vänder du på konverteringen.

Exempel

Indata 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

Vad du kan klistra in

  • HEX-koder med 3, 4, 6 eller 8 siffror, med eller utan #. En fjärde siffra eller ett avslutande sifferpar anger opaciteten.
  • Funktioner som rgb(), hsl() eller oklch(), med kommatecken eller mellanslag mellan värdena och 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%), och kulörtoner i deg, rad, grad eller turn, som i hsl(0.5turn, 100%, 50%).
  • Vanliga tal utan funktionsnamn, som 255, 102, 0. Automatisk identifiering tolkar tre tal som RGB, eller som HSL om 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 valfri versalisering, med eller utan mellanslag: Rebecca Purple fungerar.
  • HSB-värden skrivna som hsb() och AppleScript-färger inom klamrar, 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 D65 som vitpunkt. CSS-funktionerna lab() och lch() använder vitpunkten D50, så värdena skiljer sig något.
  • 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 kanaler till intervallet 0–255, så oklch(70% 0.3 145) blir #00c800.
  • Resultatet med ett färgnamn är det närmaste av de namngivna CSS-färgerna, så det är bara exakt för färger som har ett namn: #ff6600 ger orangered, som är #ff4500.
  • Resultaten för ANSI 16 och ANSI 256 är ungefärliga, eftersom dessa paletter bara har 16 respektive 256 färger. Resultaten för ANSI 16 är förgrundskoderna 30 till 37 och 90 till 97. Bakgrundskoderna 40 till 47 och 100 till 107 tolkas som samma färger.
  • CMYK beräknas med grundformeln, utan en färgprofil för skrivaren. Därför kan ett tryckeri ange andra CMYK-värden för samma färg.
  • Gråskala är medelvärdet av värdena för rött, grönt och blått.

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 tresiffrigt tal, 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.