Hvorfor er CSS-farven "green" mørkere end den grønne i RGB-vælgeren?

Nøgleordet green er #008000, en mellemgrøn arvet fra den gamle 16-farvers HTML-palet. Den fuldt mættede #00FF00 hedder lime. Den fulde CSS-liste har lignende overraskelser: gray (#808080) er mørkere end darkgray (#A9A9A9).

Bliver mit billede uploadet, når jeg udtrækker en farvepalet?

Nej. Filen åbnes af din browser, tegnes på et canvas i hukommelsen og analyseres dér. Der sendes ingen forespørgsel med billedet, og når du lukker fanen, bliver det kasseret.

Hvilket kontrastforhold kræves der til brødtekst?

Mindst 4,5:1 for at opfylde WCAG 2.1 niveau AA og 7:1 for niveau AAA. Overskrifter på 18 punkt eller større, eller 14 punkt fed, må bruge 3:1 for AA. Mange designsystemer sigter mod 4,5:1 overalt, så teksten forbliver læsbar på svage skærme og i sollys.

Kan jeg bruge en 8-cifret HEX-kode med gennemsigtighed?

Ja, i CSS. De sidste to cifre er alfakanalen, så #2F6FED80 er den samme blå ved ca. 50 % opacitet. Denne farvevælger arbejder med ugennemsigtige farver og viser derfor seks cifre; tilføj selv alfaparret, når du har brug for det.

Hvor mange navngivne farver findes der i CSS?

CSS Color Module Level 4 definerer 148 farvenøgleord, når man tæller dublerede stavemåder som gray og grey med. Det nyeste er rebeccapurple (#663399), tilføjet i 2014 til minde om Rebecca Meyer, datter af CSS-forfatteren Eric Meyer.

Farvevælger

Vælg en hvilken som helst farve, og få dens kode i alle gængse formater, klar til at kopiere. Lav matchende farvepaletter, find de dominerende farver i et foto uden at uploade det, og test, om en kombination af tekst og baggrund lever op til WCAG-kravene til kontrast.

Valgt farve#2F6FED

VælgHEX

Farvetone220°Mætning84%Lysstyrke56%

Farvekoder i alle formater

HEX#2F6FED
RGB47, 111, 237
HSL220°, 84%, 56%
HSB / HSV220°, 80%, 93%
CMYK (omtrentlig)80%, 53%, 0%, 7%
CSS rgb()rgb(47 111 237)
CSS hsl()hsl(220 84% 56%)

Paletter ud fra denne farve

Komplementær

Analog

Triade

Lysere nuancer (blandet med hvid)

Mørkere nuancer (blandet med sort)

Palette fra et billede

Dit billede læses af din egen browser og uploades aldrig: pixlerne aflæses på et canvas på denne enhed, og intet sendes nogen steder hen.

Slip et foto, skærmbillede eller logo her

De seks dominerende farver i dit billede vises her. Klik på en farveprøve for at indlæse den i farvevælgeren.

Kontrasttjek (WCAG 2.1)

Tekstfarve

Baggrundsfarve

Eksempel på stor tekst

Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon. 0123456789

Kontrastforhold14.67:1

AA · normal tekstBestået
AAA · normal tekstBestået
AA · stor tekstBestået
AAA · stor tekstBestået

Stor tekst betyder mindst 18 pt (24 px) normal eller 14 pt (ca. 18,7 px) fed. AA kræver 4,5:1 for normal tekst og 3:1 for stor tekst; AAA kræver 7:1 og 4,5:1.

Almindelige navngivne CSS-farver

Tyve nøgleord, som alle browsere forstår, med deres nøjagtige HEX-, RGB- og HSL-værdier.

Navn	HEX	RGB	HSL
`black`	#000000	0, 0, 0	0°, 0%, 0%
`white`	#ffffff	255, 255, 255	0°, 0%, 100%
`gray`	#808080	128, 128, 128	0°, 0%, 50%
`silver`	#c0c0c0	192, 192, 192	0°, 0%, 75%
`red`	#ff0000	255, 0, 0	0°, 100%, 50%
`crimson`	#dc143c	220, 20, 60	348°, 83%, 47%
`maroon`	#800000	128, 0, 0	0°, 100%, 25%
`tomato`	#ff6347	255, 99, 71	9°, 100%, 64%
`coral`	#ff7f50	255, 127, 80	16°, 100%, 66%
`orange`	#ffa500	255, 165, 0	39°, 100%, 50%
`gold`	#ffd700	255, 215, 0	51°, 100%, 50%
`yellow`	#ffff00	255, 255, 0	60°, 100%, 50%
`olive`	#808000	128, 128, 0	60°, 100%, 25%
`green`	#008000	0, 128, 0	120°, 100%, 25%
`teal`	#008080	0, 128, 128	180°, 100%, 25%
`aqua`	#00ffff	0, 255, 255	180°, 100%, 50%
`blue`	#0000ff	0, 0, 255	240°, 100%, 50%
`navy`	#000080	0, 0, 128	240°, 100%, 25%
`purple`	#800080	128, 0, 128	300°, 100%, 25%
`rebeccapurple`	#663399	102, 51, 153	270°, 50%, 40%

Hvad HEX, RGB, HSL og HSB egentlig beskriver

Alle farver på denne side findes i sRGB, webbets standardfarverum, siden browserne indførte det i slutningen af 1990'erne. En skærm blander rødt, grønt og blåt lys, og hver kanal har 256 niveauer (0–255), hvilket giver 16.777.216 mulige farver. RGB skriver de tre tal direkte; HEX skriver de samme tre tal i 16-talssystemet med to cifre hver, så #FF6600 er rød 255, grøn 102, blå 0. Den korte form med tre cifre fordobler hvert ciffer: #F60 er #FF6600.

HSL og HSB (også kaldet HSV) beskriver de samme farver på en måde, der er lettere at justere i hånden. Farvetone er en vinkel på farvehjulet: 0° rød, 120° grøn, 240° blå. Forskellen ligger i det sidste tal. I HSL er lysstyrke 100 % altid hvid, og 50 % er den reneste udgave af farvetonen; i HSB er lysstyrke 100 % den rene farvetone, og hvid kræver mætning 0 %. Designprogrammer som Photoshop og Figma bruger HSB i deres farvevælgere, mens CSS naturligt forstår hsl(), og derfor er begge angivet ovenfor.

Hvorfor CMYK-værdien kun er en tilnærmelse

Skærme lægger lys til; printere trækker det fra med cyan, magenta, gul og sort blæk. De to systemer dækker forskellige farveområder, kaldet gamutter. Meget mættede skærmfarver, f.eks. en skarp RGB-grøn, en elektrisk blå eller en neonorange, ligger uden for det, som procesfarver kan gengive, så de bliver mere matte på tryk, end de ser ud på en skærm.

CMYK-tallene her bruger den simple matematiske omregning uden ICC-profil, hvilket er nyttigt til et løst oplæg, men ikke til trykning. Et trykkeri konverterer med en profil til sit papir og sin presse, f.eks. FOGRA39 i Europa eller GRACoL i USA, og den samme RGB-farve kan give forskellige blækprocenter under hver af dem. Til tryk bør du sende RGB- eller HEX-værdien sammen med den profil, dit trykkeri beder om.

Sådan beregnes kontrastforholdet

WCAG 2.1 sammenligner den relative luminans af to farver: den lysere plus 0,05 divideret med den mørkere plus 0,05. Resultatet går fra 1:1 (identiske farver) til 21:1 (sort på hvid). Niveau AA kræver mindst 4,5:1 til normal tekst og 3:1 til stor tekst, dvs. 18 punkt eller 14 punkt fed; niveau AAA hæver det til 7:1 og 4,5:1. Dele af brugerfladen som inputkanter og ikoner skal have 3:1 mod omgivelserne ifølge succeskriterium 1.4.11.

Luminans vægter grøn langt tungere end blå, fordi øjet er mest følsomt over for den. Derfor dumper gul tekst på hvid markant, mens mørkeblå på hvid består let, selvom begge farver ser fuldt mættede ud. Logoer og rent dekorativ tekst er undtaget fra reglen.

Sådan får du en farvepalet fra et foto eller logo

Billedpaletten læser din fil med browserens canvas, skalerer den ned til højst 200 pixel på den lange led og grupperer ensartede pixel med median-cut-metoden, som Paul Heckbert beskrev i 1982: Farveområdet deles igen og igen langs sin bredeste kanal, indtil der er seks grupper tilbage, og hver gruppes gennemsnit bliver en farveprøve. Gennemsigtige pixel ignoreres, så et logo på gennemsigtig baggrund giver logoets farver.

Når du har farverne, fungerer et fladt logo ofte bedre som vektor. Billede til SVG-konverteren tracer det til former, der bevarer netop disse farver, og hvis du designer et kanalheader, tilpasser YouTube-banner-værktøjet grafikken til 2560 × 1440 under hensyn til det sikre område.

Ofte stillede spørgsmål

Hvorfor er CSS-farven "green" mørkere end den grønne i RGB-vælgeren?: Nøgleordet green er #008000, en mellemgrøn arvet fra den gamle 16-farvers HTML-palet. Den fuldt mættede #00FF00 hedder lime. Den fulde CSS-liste har lignende overraskelser: gray (#808080) er mørkere end darkgray (#A9A9A9).
Bliver mit billede uploadet, når jeg udtrækker en farvepalet?: Nej. Filen åbnes af din browser, tegnes på et canvas i hukommelsen og analyseres dér. Der sendes ingen forespørgsel med billedet, og når du lukker fanen, bliver det kasseret.
Hvilket kontrastforhold kræves der til brødtekst?: Mindst 4,5:1 for at opfylde WCAG 2.1 niveau AA og 7:1 for niveau AAA. Overskrifter på 18 punkt eller større, eller 14 punkt fed, må bruge 3:1 for AA. Mange designsystemer sigter mod 4,5:1 overalt, så teksten forbliver læsbar på svage skærme og i sollys.
Kan jeg bruge en 8-cifret HEX-kode med gennemsigtighed?: Ja, i CSS. De sidste to cifre er alfakanalen, så #2F6FED80 er den samme blå ved ca. 50 % opacitet. Denne farvevælger arbejder med ugennemsigtige farver og viser derfor seks cifre; tilføj selv alfaparret, når du har brug for det.
Hvor mange navngivne farver findes der i CSS?: CSS Color Module Level 4 definerer 148 farvenøgleord, når man tæller dublerede stavemåder som gray og grey med. Det nyeste er rebeccapurple (#663399), tilføjet i 2014 til minde om Rebecca Meyer, datter af CSS-forfatteren Eric Meyer.