Fargevelger-verktøy - Konverter RGB, Hex, CMYK og HSV Fargekodar

Hva er en fargevelger?

En fargevelger er et verktøy for å velge en farge og lese av verdien i ulike fargeformater. Denne viser en farge i RGB (rød, grønn, blå), heksadesimal, CMYK (cyan, magenta, gul, svart) og HSV (fargetone, metning, lysstyrke) samtidig. Når ett format endres, oppdateres de andre umiddelbart.

Slik bruker du fargevelgeren

Det finnes tre måter å velge en farge på.

Klikk hvor som helst i spekterboksen for å velge fargetone og metning. Den vannrette posisjonen angir fargetonen (hvilken fargefamilie, for eksempel rød eller blå). Den loddrette posisjonen angir metningen (hvor kraftig eller utvasket fargen ser ut). En glidebryter under spekteret styrer lysstyrken, fra svart til venstre til full lysstyrke til høyre.

Det fungerer også å skrive inn nøyaktige verdier. Det heksadesimale feltet godtar koder som #2ECC71, med eller uten #. RGB-feltene godtar hvert sitt heltall fra 0 til 255. CMYK-feltene godtar hvert sitt heltall fra 0 til 100. En verdi som skrives inn over det tillatte området, begrenses til maksimumsverdien.

Hvert fargeformat har en kopieringsknapp ved siden av seg. Når du klikker på den, kopieres verdien til utklippstavlen, og en kort melding med teksten «Kopiert!» vises.

Fargemodeller forklart

RGB

RGB beskriver en farge som en blanding av rødt, grønt og blått lys, de samme tre fargene som en skjerm bruker til å lage hver piksel. Hver kanal går fra 0 til 255. RGB(255, 0, 0) er ren rød, mens RGB(0, 0, 0) er svart. Nettlesere, apper og videoprogrammer bruker alle RGB fordi modellen samsvarer med hvordan skjermer fungerer.

Heksadesimal

En heksadesimal kode skriver en RGB-farge i grunntall 16 i stedet for grunntall 10. #2ECC71 har tre tegnpar: 2E for rødt, CC for grønt og 71 for blått. Hvert par går fra 00 til FF. Heksadesimale koder er vanlige i webdesign fordi CSS godtar dem direkte, og de er kortere å skrive enn rgb(). Det finnes også en kortform med tre tegn: #0F0 betyr det samme som #00FF00.

CMYK

CMYK brukes til trykking. En skriver bygger opp farger ved å legge lag med cyan, magenta, gult og svart blekk på hvitt papir, så modellen fungerer ved å trekke fra lys i stedet for å legge det til. Hver kanal er en prosentverdi fra 0 til 100. CMYK(0, 0, 0, 0) betyr at det ikke brukes blekk i det hele tatt, slik at det hvite papiret synes. CMYK kan ikke gjengi alle fargene en skjerm kan vise. Enkelte sterke skjermfarger, særlig visse blå- og grønnfarger, ser mattere ut når de trykkes.

HSV

HSV beskriver fargetone, metning og verdi separat. Fargetonen er fargefamilien og angis i grader fra 0° til 360°, der 0° er rød, 120° er grønn og 240° er blå. Metning angir hvor kraftig fargen er, fra 0 % (grå) til 100 % (helt mettet). Verdien angir hvor lys fargen er, fra 0 % (svart) til 100 % (full lysstyrke). HSV ligger nær måten mennesker naturlig beskriver farger på, og derfor er spekteret og lysstyrkeglidebryteren i dette verktøyet basert på modellen.

Formel for konvertering fra RGB til heksadesimal

Hver RGB-kanal, et tall fra 0 til 255, konverteres til et heksadesimalt tall med to sifre. Deretter settes de tre parene sammen med # foran.

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

Formel for konvertering fra RGB til CMYK

Først skaleres hver RGB-kanal til en brøk mellom 0 og 1. Svart (K) settes ut fra den største kanalen. Deretter beregnes cyan, magenta og gul ut fra de gjenværende kanalene 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 lik 1 (fargen er helt svart), settes C, M og Y alle til 0 for å unngå divisjon med null.

Formel for konvertering fra RGB til HSV

RGB skaleres først til brøker mellom 0 og 1. La $C_{max}$ være den største av de tre, $C_{min}$ den minste og $\Delta$ forskjellen mellom dem.

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

Fargetonen avhenger av hvilken kanal som 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}$$ ## Regneeksempel Ta utgangspunkt i RGB(46, 204, 113), en grønn nyanse. **Heksadesimal:** 46 i heksadesimal er `2E`, 204 er `CC`, og 113 er `71`, noe som gir `#2ECC71`. **CMYK:** Skalert er R′ = 0,180, G′ = 0,800 og B′ = 0,443. Den største er G′, så K = 1 − 0,800 = 0,20, som betyr 20 % svart. Deretter 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ønn), $C_{min}$ = 0,180, så Δ = 0,620. Lysstyrke = 80 %. Metning = 0,620 / 0,800 × 100 ≈ 77 %. Siden grønn er størst, er H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Resultatet er HSV(145°, 77 %, 80 %). ## Gjør fargevalg tilgjengelige Omtrent 1 av (2,5 cm) 12 menn og rundt 1 av (2,5 cm) 200 kvinner har en form for nedsatt fargesyn, vanligvis redusert evne til å skille rødt fra grønt. Et design som bare bruker farge til å formidle mening, for eksempel en rød feilmelding uten ikon eller etikett, vil ikke fungere for disse brukerne. Dette kan løses ved å legge til en tekstetikett, et ikon eller et mønster sammen med fargen. Tekst trenger også tilstrekkelig kontrast mot bakgrunnen. Web Content Accessibility Guidelines (WCAG) anbefaler et kontrastforhold på minst 4,5:1 for normal tekst og 3:1 for stor tekst. Det trengs et eget kontrastverktøy for å måle dette, siden dette verktøyet ikke beregner kontrastforhold selv. ## Ofte stilte spørsmål **Hva er forskjellen mellom RGB og CMYK?** RGB brukes for skjermer og bygger opp farger ved å legge til rødt, grønt og blått lys. CMYK brukes til trykking og bygger opp farger ved å legge blekk lagvis på papir, noe som i stedet trekker fra lys. RGB kan produsere mer lyssterke farger enn CMYK fordi blekk ikke kan gjengi hele fargeområdet som en skjerm kan sende ut. **Hvorfor ser trykte farger annerledes ut enn på skjermen?** En skjerm sender ut lys direkte, mens en trykt side bare reflekterer lyset som treffer den. CMYK-blekk dekker også et mindre fargeområde enn RGB-lys, så enkelte sterke skjermfarger kan ikke gjengis nøyaktig på papir. **Hva betyr #-symbolet i en heksadesimal kode?** Det markerer de etterfølgende tegnene som en heksadesimal fargekode, en konvensjon fra den tidlige utviklingen av HTML og CSS. Uten det vil en nettleser ikke gjenkjenne verdien som en farge. **Hvorfor har noen heksadesimale koder bare tre tegn?** En kode med tre tegn er en kortform for en kode med seks tegn, der hvert par gjentar det samme sifferet. `#0F0` utvides til `#00FF00`. **Er konverteringene mellom formatene nøyaktige?** RGB til heksadesimal er nøyaktig, siden det er de samme tallene skrevet i et annet grunntall. RGB til CMYK er en tilnærming fordi konverteringen skjer mellom lys og blekk, som er ulike fysiske prosesser med ulike fargeområder. **Kan dette verktøyet velge en farge direkte fra et bilde eller en nettside?** Nei. En nettleserutvidelse eller en fargevelger som er innebygd i operativsystemet, for eksempel Digital Color Meter i macOS, kan lese av en farge fra skjermen. Den resulterende verdien kan deretter skrives inn i dette verktøyet for konvertering.