Hva betyr alle disse fargeformatene?

En farge på en skjerm er en blanding av rødt, grønt og blått lys, og hvert format skriver denne blandingen på sin egen måte. CSS og designverktøy bruker HEX-koder og RGB-verdier. HSL, HSV og HWB beskriver en farge med fargetonen, vinkelen på fargehjulet, og hvor mettet og lys den er. Dette gjør det enklere å justere fargen manuelt. CMYK angir mengden cyan-, magenta-, gul- og svart trykkfarge. LAB, LCH, OKLab og OKLCH er laget slik at like trinn i verdiene ser omtrent like store ut for øyet. Det er nyttig for fargepaletter og graderinger, og moderne CSS støtter alle fire. Terminaler bruker ANSI-fargekoder, og CSS har også navngitte farger, som tomato.

Her er den samme oransje fargen i hvert format:

Format Eksempel Hva verdiene står for
HEX #ff6600 Rødt, grønt og blått, med to heksadesimale sifre for hver farge
RGB rgb(255, 102, 0) Rødt, grønt og blått fra 0 til 255
HSL hsl(24, 100%, 50%) Fargetone, metning og lyshet
HSV hsv(24, 100%, 100%) Fargetone, metning og verdi, også kalt HSB
HWB hwb(24 0% 0%) Fargetone, hvitandel og svartandel
CMYK cmyk(0%, 60%, 100%, 0%) Cyan, magenta, gul og svart trykkfarge
LAB lab(62.31, 55, 71.33) CIE-lyshet, grønt til rødt og blått til gult
LCH lch(62.31, 90.07, 52.36) CIE-lyshet, kromatikk og fargetone
OKLab oklab(69.58% 0.1482 0.1406) Lyshet og to fargeakser, som i LAB
OKLCH oklch(69.58% 0.2043 43.49) Lyshet, kromatikk og fargetone i OKLab
XYZ xyz(46, 30.77, 3.52) CIE XYZ-fargerommet som LAB bygger på
HCG hcg(24, 100%, 0%) Fargetone, kromatikk og gråandel
Fargenavn orangered Det nærmeste navngitte CSS-fargenavnet
ANSI 16 91 Terminalkode for én av de 16 grunnfargene
ANSI 256 208 Terminalkode for én av 256 farger
AppleScript RGB {65535, 26214, 0} Rødt, grønt og blått fra 0 til 65535, slik AppleScript skriver dem
Gråtoner gray(46.7%) Lysstyrke fra 0 % til 100 %

Verktøybeskrivelse

Dette verktøyet konverterer farger mellom disse 17 formatene og viser fargen som en fargeprøve under resultatet. Alle fargekonvertererne her fungerer på samme måte, fra den generelle fargekonvertereren til verktøyene for ett bestemt formatpar, for eksempel HEX til RGB, RGB til CMYK eller HEX til fargenavn: Verktøyet åpnes med formatene som står i navnet, og menyene Kilde og Mål lar deg velge andre formater. Lim inn en farge, så vises resultatet mens du skriver, klart til å kopieres. Når Automatisk gjenkjenning er valgt som kilde, slik det er som standard i fargekonvertereren, finner verktøyet formatet ut fra hvordan fargen er skrevet. Med bytteknappen snur du konverteringsretningen.

Eksempler

Inndata 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 Fargenavn tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Dette kan du lime inn

  • HEX-koder med 3, 4, 6 eller 8 sifre, med eller uten #. Et fjerde siffer eller et siste par angir opasiteten.
  • Funksjoner som rgb(), hsl() eller oklch(), med komma eller mellomrom mellom verdiene, og valgfri opasitet som en fjerde verdi eller etter en skråstrek: rgba(37, 99, 235, 0.5) eller rgb(37 99 235 / 50%).
  • Prosentverdier for rødt, grønt og blått, som i rgb(100%, 40%, 0%), og fargetoner i deg, rad, grad eller turn, som i hsl(0.5turn, 100%, 50%).
  • Tall uten funksjonsnavn, for eksempel 255, 102, 0. Automatisk gjenkjenning tolker tre tall som RGB, eller som HSL hvis de to siste er prosentverdier, og fire tall som CMYK, med mindre de ser ut som RGB med opasitet.
  • Fargenavn med eller uten store bokstaver, og med eller uten mellomrom: Rebecca Purple fungerer.
  • HSB-verdier skrevet som hsb(), og AppleScript-farger i klammeparenteser, som {65535, 26214, 0}.

Slik fungerer det

Beregningene utføres av color-convert, et JavaScript-bibliotek for fargekonvertering.

  • Opasiteten beholdes i HEX, RGB, HSL, HWB, OKLab og OKLCH, som kan skrive den. De andre formatene utelater den.
  • LAB, LCH og XYZ er CIE-verdier med D65-hvitpunkt. CSS-funksjonene lab() og lch() bruker D50-hvitpunkt, så verdiene deres er litt annerledes.
  • LAB, LCH, OKLab og OKLCH kan beskrive farger som skjermer ikke kan vise. Når slike farger konverteres til HEX, RGB eller et annet skjermformat, begrenses kanalverdiene til området 0 til 255. Derfor blir oklch(70% 0.3 145) til #00c800.
  • Resultatet for fargenavn er det nærmeste av de navngitte CSS-fargene. Det er derfor bare nøyaktig for farger som har et navn: #ff6600 gir orangered, som er #ff4500.
  • Resultater for ANSI 16 og ANSI 256 er omtrentlige, siden disse palettene bare har henholdsvis 16 og 256 farger. ANSI 16-resultater er forgrunnskoder fra 30 til 37 og fra 90 til 97. Bakgrunnskodene fra 40 til 47 og fra 100 til 107 tolkes som de samme fargene.
  • CMYK beregnes med en enkel formel uten en fargeprofil for skriveren, så CMYK-verdiene et trykkeri oppgir for samme farge, kan være annerledes.
  • Gråtonen er gjennomsnittet av verdiene for rødt, grønt og blått.

Tips

  • Resultater i HEX, RGB, HSL, HWB, OKLab, OKLCH og fargenavn er gyldig CSS, så du kan lime dem rett inn i et stilark.
  • Automatisk gjenkjenning tolker et tresifret tall, som 208, som en kort HEX-kode. Velg derfor ANSI 256 eller ANSI 16 som kilde for terminalkoder.
  • HSV og HSB er to navn på samme modell.