Zakaj je CSS-barva »green« temnejša od zelene v izbirniku RGB?

Ključna beseda green je #008000, srednje zelena barva, podedovana iz stare 16-barvne palete HTML. Popolnoma nasičena #00FF00 se imenuje lime. Celoten seznam CSS ima podobna presenečenja: gray (#808080) je temnejša od darkgray (#A9A9A9).

Ali se moja slika naloži, ko izvlečem paleto?

Ne. Datoteko odpre vaš brskalnik, jo nariše na platno v pomnilniku in tam analizira. S sliko ni poslana nobena zahteva, z zaprtjem zavihka pa se zavrže.

Kakšno kontrastno razmerje potrebujem za osnovno besedilo?

Vsaj 4,5:1 za raven AA po WCAG 2.1 in 7:1 za raven AAA. Naslovi velikosti 18 pik ali več oziroma 14 pik krepko lahko za AA uporabijo 3:1. Mnogi oblikovalski sistemi povsod ciljajo na 4,5:1, da je besedilo berljivo na zatemnjenih zaslonih in na soncu.

Ali lahko uporabim 8-mestno kodo HEX s prosojnostjo?

Da, v CSS. Zadnji dve števki sta kanal alfa, zato je #2F6FED80 ista modra s približno 50 % neprosojnostjo. Ta izbirnik dela z neprosojnimi barvami in zato prikaže šest števk; par alfa dodajte sami, kadar ga potrebujete.

Koliko poimenovanih barv ima CSS?

CSS Color Module Level 4 določa 148 barvnih ključnih besed, vštevši dvojne zapise, kot sta gray in grey. Najnovejša je rebeccapurple (#663399), dodana leta 2014 v spomin na Rebecco Meyer, hčerko avtorja CSS Erica Meyerja.

Izbirnik barv

Izberite poljubno barvo in dobite njeno kodo v vseh pogostih formatih, pripravljeno za kopiranje. Ustvarite ujemajoče se palete, izvlecite prevladujoče barve fotografije, ne da bi jo naložili, in preverite, ali par besedila in ozadja izpolnjuje zahteve WCAG glede kontrasta.

Izbrana barva#2F6FED

IzberiHEX

Odtenek220°Nasičenost84%Svetlost56%

Barvne kode v vseh zapisih

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

Palete iz te barve

Komplementarna

Analogna

Triadna

Svetlejši toni (pomešano z belo)

Temnejši toni (pomešano s črno)

Paleta iz slike

Sliko prebere vaš brskalnik in se nikoli ne naloži: slikovne pike se vzorčijo na platnu v tej napravi in nič se ne pošlje drugam.

Spustite fotografijo, posnetek zaslona ali logotip sem

Šest prevladujočih barv vaše slike se prikaže tukaj. Kliknite barvni vzorec, da ga naložite v izbirnik.

Preverjanje kontrasta (WCAG 2.1)

Barva besedila

Barva ozadja

Vzorec velikega besedila

Hitra rjava lisica skoči čez lenega psa. 0123456789

Razmerje kontrasta14.67:1

AA · navadno besediloUstreza
AAA · navadno besediloUstreza
AA · veliko besediloUstreza
AAA · veliko besediloUstreza

Veliko besedilo pomeni vsaj 18 pt (24 px) navadno ali 14 pt (približno 18,7 px) krepko. AA zahteva 4,5:1 za navadno in 3:1 za veliko besedilo; AAA zahteva 7:1 in 4,5:1.

Pogoste poimenovane barve CSS

Dvajset ključnih besed, ki jih razume vsak brskalnik, z natančnimi vrednostmi HEX, RGB in HSL.

Ime	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%

Kaj v resnici opisujejo HEX, RGB, HSL in HSB

Vse barve na tej strani so v prostoru sRGB, privzetem barvnem prostoru spleta, odkar so ga brskalniki sprejeli v poznih devetdesetih letih. Zaslon meša rdečo, zeleno in modro svetlobo, vsak kanal pa ima 256 ravni (0–255), kar da 16.777.216 možnih barv. RGB zapiše te tri številke neposredno; HEX zapiše iste tri številke v šestnajstiškem sistemu, vsako z dvema števkama, zato je #FF6600 rdeča 255, zelena 102, modra 0. Tromestni zapis podvoji vsako števko: #F60 je #FF6600.

HSL in HSB (imenovan tudi HSV) opisujeta iste barve na način, ki ga je lažje ročno prilagajati. Odtenek je kot na barvnem kolesu: 0° rdeča, 120° zelena, 240° modra. Razlika je v zadnji številki. Pri HSL je svetlost 100 % vedno bela, 50 % pa je najčistejša različica odtenka; pri HSB je svetlost 100 % čisti odtenek, za belo pa je potrebna nasičenost 0 %. Oblikovalski programi, kot sta Photoshop in Figma, v izbirnikih uporabljajo HSB, CSS pa izvorno razume hsl(), zato sta zgoraj navedena oba.

Zakaj je vrednost CMYK le približek

Zasloni seštevajo svetlobo, tiskalniki pa jo odštevajo s cian, magenta, rumeno in črno barvo. Sistema pokrivata različna območja barv, imenovana barvni obsegi. Zelo nasičene barve na zaslonu, na primer svetla RGB zelena, električno modra ali neonsko oranžna, so zunaj tega, kar zmorejo tiskarske barve, zato se natisnejo medlejše, kot se kažejo na monitorju.

Vrednosti CMYK tukaj uporabljajo preprosto matematično pretvorbo brez profila ICC, kar je uporabno za grobo navodilo, ne pa za tisk. Tiskarna pretvarja s profilom za svoj papir in stroj, na primer FOGRA39 v Evropi ali GRACoL v Združenih državah, in ista barva RGB lahko pri vsakem da drugačne odstotke barv. Za tiskovine pošljite vrednost RGB ali HEX skupaj s profilom, ki ga zahteva vaša tiskarna.

Kako se izračuna kontrastno razmerje

WCAG 2.1 primerja relativno svetlost dveh barv: svetlejša plus 0,05, deljeno s temnejšo plus 0,05. Rezultat je med 1:1 (enaki barvi) in 21:1 (črna na beli). Raven AA zahteva vsaj 4,5:1 za navadno besedilo in 3:1 za veliko besedilo, to je 18 pik ali 14 pik krepko; raven AAA to zviša na 7:1 oziroma 4,5:1. Deli uporabniškega vmesnika, kot so robovi vnosnih polj in ikone, po merilu uspešnosti 1.4.11 potrebujejo 3:1 glede na okolico.

Svetlost zeleno upošteva precej bolj kot modro, ker je oko nanjo najobčutljivejše. Zato rumeno besedilo na belem povsem odpove, temno modro na belem pa zlahka uspe, čeprav obe barvi izgledata povsem nasičeni. Logotipi in zgolj okrasno besedilo so iz pravila izvzeti.

Kako dobiti paleto iz fotografije ali logotipa

Paleta iz slike prebere vašo datoteko s platnom brskalnika, jo skrči na največ 200 pikslov na daljši stranici in podobne piksle združi z metodo median-cut, ki jo je leta 1982 opisal Paul Heckbert: barvni obseg se znova in znova razdeli vzdolž najširšega kanala, dokler ne ostane šest skupin, povprečje vsake skupine pa postane vzorec. Prosojni piksli so prezrti, zato logotip na prosojnem ozadju da barve logotipa.

Ko imate barve, ploski logotip pogosto bolje deluje kot vektor. Pretvornik slike v SVG ga pretvori v oblike, ki ohranijo prav te barve, če pa oblikujete glavo kanala, spreminjanje velikosti pasice za YouTube prilagodi sliko na 2560 × 1440 z upoštevanjem varnega območja.

Pogosto zastavljena vprašanja

Zakaj je CSS-barva »green« temnejša od zelene v izbirniku RGB?: Ključna beseda green je #008000, srednje zelena barva, podedovana iz stare 16-barvne palete HTML. Popolnoma nasičena #00FF00 se imenuje lime. Celoten seznam CSS ima podobna presenečenja: gray (#808080) je temnejša od darkgray (#A9A9A9).
Ali se moja slika naloži, ko izvlečem paleto?: Ne. Datoteko odpre vaš brskalnik, jo nariše na platno v pomnilniku in tam analizira. S sliko ni poslana nobena zahteva, z zaprtjem zavihka pa se zavrže.
Kakšno kontrastno razmerje potrebujem za osnovno besedilo?: Vsaj 4,5:1 za raven AA po WCAG 2.1 in 7:1 za raven AAA. Naslovi velikosti 18 pik ali več oziroma 14 pik krepko lahko za AA uporabijo 3:1. Mnogi oblikovalski sistemi povsod ciljajo na 4,5:1, da je besedilo berljivo na zatemnjenih zaslonih in na soncu.
Ali lahko uporabim 8-mestno kodo HEX s prosojnostjo?: Da, v CSS. Zadnji dve števki sta kanal alfa, zato je #2F6FED80 ista modra s približno 50 % neprosojnostjo. Ta izbirnik dela z neprosojnimi barvami in zato prikaže šest števk; par alfa dodajte sami, kadar ga potrebujete.
Koliko poimenovanih barv ima CSS?: CSS Color Module Level 4 določa 148 barvnih ključnih besed, vštevši dvojne zapise, kot sta gray in grey. Najnovejša je rebeccapurple (#663399), dodana leta 2014 v spomin na Rebecco Meyer, hčerko avtorja CSS Erica Meyerja.