Farvevælger-værktøj - Konverter RGB, Hex, CMYK & HSV Farvekoder

Hvad er en farvevælger?

En farvevælger er et værktøj til at vælge en farve og aflæse dens værdi i forskellige farveformater. Dette værktøj viser samtidig en farve i RGB (rød, grøn, blå), hex, CMYK (cyan, magenta, gul, sort) og HSV (farvetone, mætning, lysstyrke). Når et format ændres, opdateres de andre med det samme.

Sådan bruges farvevælgeren

Der er tre måder at vælge en farve på.

Klik et vilkårligt sted i spektrumboksen for at vælge farvetone og mætning. Den vandrette position angiver farvetonen (hvilken farvefamilie, f.eks. rød eller blå). Den lodrette position angiver mætningen (hvor kraftig eller udvasket farven ser ud). En skyder under spektret styrer lysstyrken, fra sort til venstre til fuld lysstyrke til højre.

Det fungerer også at indtaste nøjagtige værdier. Hexfeltet accepterer koder som #2ECC71, med eller uden #. Hvert RGB-felt accepterer et helt tal fra 0 til 255. Hvert CMYK-felt accepterer et helt tal fra 0 til 100. En værdi, der indtastes over det tilladte interval, begrænses til maksimumværdien.

Hvert farveformat har en kopieringsknap ved siden af sig. Når der klikkes på den, kopieres værdien til udklipsholderen, og meddelelsen "Kopieret!" vises kortvarigt.

Farvemodeller forklaret

RGB

RGB beskriver en farve som en blanding af rødt, grønt og blåt lys, de samme tre farver som en skærm bruger til at skabe hver pixel. Hver kanal går fra 0 til 255. RGB(255, 0, 0) er ren rød, og RGB(0, 0, 0) er sort. Browsere, apps og videoprogrammer bruger alle RGB, fordi formatet svarer til den måde, skærme fungerer på.

Hex

En hexkode skriver en RGB-farve i talbase 16 i stedet for talbase 10. #2ECC71 har tre tegnpar: 2E for rød, CC for grøn og 71 for blå. Hvert par går fra 00 til FF. Hexkoder er almindelige inden for webdesign, fordi CSS accepterer dem direkte, og de er kortere at skrive end rgb(). Der findes også en forkortelse på tre tegn: #0F0 betyder det samme som #00FF00.

CMYK

CMYK bruges til tryk. En printer skaber farver ved at lægge cyan, magenta, gul og sort blæk oven på hvidt papir, så farverne dannes ved at trække lys fra i stedet for at lægge lys til. Hver kanal er en procentværdi fra 0 til 100. CMYK(0, 0, 0, 0) betyder, at der slet ikke er noget blæk, så det hvide papir er synligt. CMYK kan ikke gengive alle de farver, en skærm kan vise; nogle kraftige skærmfarver, især bestemte blå og grønne nuancer, ser mere matte ud efter trykning.

HSV

HSV beskriver farvetone, mætning og lysstyrke hver for sig. Farvetonen er farvefamilien og angives i grader fra 0° til 360°, hvor 0° er rød, 120° er grøn, og 240° er blå. Mætning angiver, hvor kraftig farven er, fra 0 % (grå) til 100 % (fuldt mættet). Lysstyrke angiver, hvor lys farven er, fra 0 % (sort) til 100 % (fuld lysstyrke). HSV ligger tæt på den måde, mennesker naturligt beskriver farver på, og derfor er spektret og lysstyrkeskyderen i dette værktøj baseret på HSV.

Formel til konvertering fra RGB til hex

Hver RGB-kanal, et tal fra 0 til 255, konverteres til et hexadecimaltal på to cifre, hvorefter de tre par sættes sammen med # foran.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Formel til konvertering fra RGB til CMYK

Først skaleres hver RGB-kanal til en brøk mellem 0 og 1. Sort (K) beregnes ud fra den største kanal. Derefter beregnes cyan, magenta og gul ud fra de resterende kanaler og K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Når K er lig med 1 (farven er ren sort), sættes C, M og Y alle til 0 for at undgå division med nul.

Formel til konvertering fra RGB til HSV

RGB skaleres først til brøker mellem 0 og 1. Lad $C_{max}$ være den største af de tre, $C_{min}$ den mindste og $\Delta$ forskellen mellem dem.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ ellers } \frac{\Delta}{C_{max}}\times 100\%$

Farvetonen afhænger af, hvilken kanal der er størst:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Gennemregnet eksempel Tag udgangspunkt i RGB(46, 204, 113), en grøn nuance. **Hex:** 46 i hex er `2E`, 204 er `CC`, og 113 er `71`, hvilket giver `#2ECC71`. **CMYK:** Skaleret er R′ = 0,180, G′ = 0,800, B′ = 0,443. G′ er størst, så K = 1 − 0,800 = 0,20, hvilket betyder 20 % sort. Derefter er C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77 %, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0 %, og Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45 %. Resultatet er CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (grøn), $C_{min}$ = 0,180, så Δ = 0,620. Værdi = 80 %. Mætning = 0,620 / 0,800 × 100 ≈ 77 %. Da grøn er størst, er H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Resultatet er HSV(145°, 77 %, 80 %). ## Gør farvevalg tilgængeligt Omtrent 1 ud af 12 mænd og cirka 1 ud af 200 kvinder har en form for farvesynsforstyrrelse, oftest nedsat evne til at skelne mellem rød og grøn. Et design, der alene bruger farve til at formidle betydning, f.eks. en rød fejlmeddelelse uden ikon eller etiket, fungerer ikke for disse brugere. En tekstetiket, et ikon eller et mønster sammen med farven løser problemet. Tekst skal også have tilstrækkelig kontrast mod baggrunden. Retningslinjerne for tilgængeligt webindhold (WCAG) anbefaler et kontrastforhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. Der kræves et særskilt værktøj til kontrol af kontrasten, da dette værktøj ikke selv beregner kontrastforhold. ## Ofte stillede spørgsmål **Hvad er forskellen mellem RGB og CMYK?** RGB er til skærme og skaber farver ved at lægge rødt, grønt og blåt lys sammen. CMYK er til tryk og skaber farver ved at lægge blæk på papir, hvilket i stedet trækker lys fra. RGB kan skabe kraftigere farver end CMYK, fordi blæk ikke kan gengive det samme farveområde som det, en skærm kan udsende. **Hvorfor ser trykte farver anderledes ud end på skærmen?** En skærm udsender lys direkte, mens en trykt side kun reflekterer det lys, der rammer den. CMYK-blæk dækker også et mindre farveområde end RGB-lys, så nogle kraftige skærmfarver ikke kan gengives nøjagtigt på papir. **Hvad betyder symbolet # i en hexkode?** Det markerer de efterfølgende tegn som en hexadecimal farvekode, en konvention fra den tidlige HTML- og CSS-udvikling. Uden det genkender en browser ikke værdien som en farve. **Hvorfor har nogle hexkoder kun tre tegn?** En kode på tre tegn er en forkortelse for en kode på seks tegn, hvor hvert par gentager det samme ciffer. `#0F0` udvides til `#00FF00`. **Er konverteringerne mellem formater nøjagtige?** Konverteringen fra RGB til hex er nøjagtig, fordi det er de samme tal skrevet i en anden talbase. RGB til CMYK er en tilnærmelse, fordi konverteringen går mellem lys og blæk, som er forskellige fysiske processer med forskellige farveområder. **Kan dette værktøj vælge en farve direkte fra et billede eller en webside?** Nej. En browserudvidelse eller operativsystemets indbyggede farvevælger (f.eks. Digital Color Meter på macOS) kan aflæse en farve fra skærmen. Den resulterende værdi kan derefter indtastes i dette værktøj for at konvertere den.