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 kuløren, altså vinkelen på fargehjulet, og hvor mettet og lys den er. Dette gjør fargene enklere å justere for hånd. CMYK angir mengden cyan-, magenta-, gul- og svart trykkfarge. LAB, LCH, OKLab og OKLCH er laget slik at like endringer i tallene oppfattes som like store endringer for øyet. Det er nyttig for fargepaletter og fargeoverganger, 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 viser
HEX #ff6600 Rødt, grønt og blått, med to heksadesimale sifre for hver kanal
RGB rgb(255, 102, 0) Rødt, grønt og blått fra 0 til 255
HSL hsl(24, 100%, 50%) Kulør, metning og lyshet
HSV hsv(24, 100%, 100%) Kulør, metning og verdi, også kalt HSB
HWB hwb(24 0% 0%) Kulør, hvithet og svarthet
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, kromatisitet og kulør
OKLab oklab(69.58% 0.1482 0.1406) Lyshet og to fargeakser i en nyere modell enn LAB
OKLCH oklch(69.58% 0.2043 43.49) Lyshet, kromatisitet og kulør i OKLab
XYZ xyz(46, 30.77, 3.52) CIE 1931-fargerommet som LAB bygger på
HCG hcg(24, 100%, 0%) Kulør, kromatisitet og gråhet
Fargenavn orangered Det nærmeste navngitte CSS-fargenavnet
ANSI 16 91 Terminalkode for en av de 16 grunnfargene
ANSI 256 208 Terminalkode for en 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 enkelt formatpar, for eksempel HEX til RGB, RGB til CMYK eller HEX til fargenavn: De starter 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 i fargekonvertereren som standard, finner verktøyet formatet ut fra hvordan fargen er skrevet. Bytteknappen snur 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

Hva du kan lime inn

  • HEX-koder med 3, 4, 6 eller 8 sifre, med eller uten #. Et fjerde siffer eller det siste sifferparet 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 kulørverdier i deg, rad, grad eller turn, som i hsl(0.5turn, 100%, 50%).
  • Vanlige tall uten funksjonsnavn, for eksempel 255, 102, 0. Automatisk gjenkjenning tolker tre tall som RGB, eller som HSL når 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.

  • Opasitet videreføres til HEX, RGB, HSL, HWB, OKLab og OKLCH, som kan angi den. De andre formatene utelater den.
  • LAB, LCH og XYZ er CIE-verdier med hvitpunktet D65. CSS-funksjonene lab() og lch() bruker hvitpunktet D50, så verdiene deres er litt annerledes.
  • LAB, LCH, OKLab og OKLCH kan beskrive farger som skjermer ikke kan vise. Når en slik farge konverteres til HEX, RGB eller et annet skjermformat, begrenses kanalverdiene til området fra 0 til 255. Derfor blir oklch(70% 0.3 145) til #00c800.
  • Et fargenavnresultat er det nærmeste av de navngitte CSS-fargene, så det er bare nøyaktig for farger som har et navn: #ff6600 gir orangered, som er #ff4500.
  • Resultatene for ANSI 16 og ANSI 256 er omtrentlige, siden disse palettene bare har henholdsvis 16 og 256 farger. ANSI 16-resultater er forgrunnskoder, 30 til 37 og 90 til 97. Bakgrunnskodene 40 til 47 og 100 til 107 tolkes som de samme fargene.
  • CMYK beregnes med en grunnleggende formel, uten en fargeprofil for skriveren. Derfor kan CMYK-verdiene fra et trykkeri for den samme fargen være annerledes.
  • Gråtoner 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 tall med tre sifre, for eksempel 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.