4 načini za definiranje barv v CSS

Ključni zaključki

• Uporaba imen barv: CSS ponuja 145 imen barv za enostavno in začetnikom prijazno izbiro barv, vendar so možnosti omejene in morda ne ustrezajo natančnim oblikovalskim potrebam.
• Šestnajstiške barvne kode: Šestnajstiške kode ponujajo široko paleto barvnih možnosti in natančno prilagajanje, čeprav so lahko manj intuitivne za uporabo in zapomnitev.
• Barvne vrednosti RGB in RGBA: RGB omogoča natančen nadzor barv s številskimi vrednostmi, medtem ko RGBA dodaja preglednost. Pomembno je zagotoviti dostopne barvne kombinacije.

Barve so med najpogosteje uporabljenimi atributi CSS in igrajo ključno vlogo pri oblikovanju vizualne identitete, razpoloženja in uporabniške izkušnje spletnega mesta. CSS ponuja vrsto možnosti za uporabo barv, od katerih je vsaka prilagojena posebnim potrebam in željam oblikovanja.

Čeprav je enostavno spregledati pomen barvne definicije, lahko vaše izbire znatno vplivajo na videz in občutek vašega spletnega mesta. Raziskovanje razlik med različnimi metodami ter načini njihove praktične uporabe in kombiniranja bodo izboljšali vašo sposobnost ustvarjanja vizualno privlačnih spletnih mest.

1. Uporaba barvnih imen

CSS ponuja priročen način za definiranje barv z uporabo imen, na voljo pa je 145 možnosti. Ta imena barv segajo od preprostih "rdeča", "zelena" in "modra" do bolj specifičnih odtenkov, kot sta "koralna" ali "sivka".

Uporaba poimenovanih barv je enostavna: izberete ime barve, kot je »rdeča«, in ga uporabite v lastnosti CSS, ki podpira barvne vrednosti. Takšna lastnosti vključujejo očitno barva in Barva ozadja, ampak tudi barva obrobe, oris-barva, in tekst-senca, med ostalimi.

Imena barv so priročna, ko potrebujete začasno barvo za izdelavo prototipov ali želite, da je vaša koda lahko berljiva. Tukaj je sintaksa:

color_property: color_name;

V tem primeru preprosto zamenjajte ime_barve z določeno barvo, ki jo želite uporabiti. Na primer, če želite nastaviti besedilo barva od odstavka do rdeča, napiši:

p {
color: red;
}

S tem bodo vaši odstavki dobili rdečo barvo besedila:

Prednosti: v vaši kodi CSS jih je enostavno brati in razumeti. So začetnikom prijazni, dobro delujejo v različnih brskalnikih in so priročni za hitre oblikovalske ideje.

Slabosti: Imajo omejene možnosti in morda ne ponujajo natančnih odtenkov, ki jih potrebujete, kar omejuje oblikovalsko ustvarjalnost. Poleg tega morda ne izpolnjujejo vedno strogih zahtev glede dostopnosti, podpora v starejših sistemih pa se lahko razlikuje.

2. Šestnajstiške barvne kode

Šestnajstiške barvne kode, pogosto imenovane "šestnajstiške kode", so najpogostejši načini določanja barv v spletnem oblikovanju. Te kode so sestavljene iz šestmestne kombinacije številk in črk (0-9, A-F), ki predstavljajo mešanico rdeče, zelene in modre (RGB) komponente v barvi.

Čeprav so enostavni za uporabo, je razumevanje njihovega delovanja lahko izziv. Lahko vzameš globok potop v šestnajstiške kode bolje razumeti. Tukaj je osnovni primer, kako lahko uporabite šestnajstiške kode v CSS:

color: #RRGGBB;

V tem formatu RR, GG in BB predstavljajo rdečo, zeleno in modro komponento. Vsaka komponenta se lahko giblje od 00 (brez intenzivnosti) do FF (največja intenzivnost). Na primer, če želite nastaviti barvo ozadja glave spletnega mesta na določen odtenek modre, lahko uporabite šestnajstiško kodo, kot je ta:

header {
background-color: #336699;
}

To bo ustvarilo temno modro barvo:

​​​​​

Uporabite lahko tudi stenografijo, če vsaka od treh komponent dvakrat ponovi isti znak. Zgornji primer lahko zapišete kot:

header {
background-color: #369;
}

Prednosti: Šestnajstiške barvne kode nudijo široko paleto barvnih možnosti, kar vam omogoča ustvarjanje podrobnih in prilagojenih odtenkov. Ponujajo nemoten nadzor nad izbiro barv, zaradi česar so idealni za kompleksne zahteve oblikovanja.

Slabosti: Čeprav so šestnajstiške kode močne, so lahko manj intuitivne kot poimenovane barve. Morda boste naleteli tudi na izziv zapomniti si določene barvne vrednosti. na srečo orodja za iskanje šestnajstiških kod barv na katere naletite, so na voljo, zaradi česar je postopek bolj obvladljiv.

3. Barvne vrednosti RGB in RGBA

Tako kot šestnajstiške kode vam ta oblika omogoča določanje barv z njihovimi rdečimi, zelenimi in modrimi komponentami. Tokrat pa lahko uporabite bolj prijazna cela števila.

Barvne vrednosti RGB

Barvne vrednosti RGB so druga najpogosteje uporabljena metoda za definiranje barv v CSS. »RGB« predstavlja rdečo, zeleno in modro, izraženo kot funkcija CSS z oklepaji za njo. Znotraj oklepajev vsakemu barvnemu kanalu dodelite vrednosti v razponu od 0 do 255. To vam omogoča nadzor nad intenzivnostjo rdeče, zelene in modre barve, ki jo želite uporabiti.

Tukaj je sintaksa:

rgb(red_value, green_value, blue_value);

Zamenjati rdeča_vrednost, zelena_vrednost, in modra_vrednost z njihovimi ustreznimi številskimi vrednostmi. Na primer, lahko dosežete bele, črne in rdeče barve, kot so prikazane na tej sliki:

Ko nastavite vse tri barvne kanale (rdeči, zeleni in modri) na največjo vrednost 255, je rezultat najvišja intenzivnost za vsak kanal, kar ustvari belo barvo:

.white-box {
 color: rgb(255, 255, 255);
}

Ko nastavite vse tri barvne kanale na njihovo najmanjšo vrednost 0, to predstavlja odsotnost barve v vsakem kanalu, kar povzroči črno.

.black-box {
color: rgb(0, 0, 0);
}

Če rdeči kanal nastavite na največjo vrednost 255, druge kanale pa ohranite na najmanjši vrednosti 0, dobite rdečo barvo:

.red-box {
color: rgb(255, 0, 0); 
}

Barvne vrednosti RGBA

RGBA deluje na enak način kot RGB, razlika je le v vključitvi vrednosti alfa. »A« v RGBA pomeni alfa, ki določa stopnjo prosojnosti ali motnosti za izbrano barvo. Vrednost 0 predstavlja popolno prosojnost, zaradi česar je barva popolnoma nevidna, medtem ko vrednost 1 predstavlja popolno motnost, zaradi česar je barva popolnoma vidna.

RGBA je še posebej uporaben, ko želite ustvariti elemente z različnimi stopnjami prosojnosti, kot so prosojna ozadja ali obledelo besedilo. Celotna sintaksa je:

color: rgba(red_value, green_value, blue_value, alpha_value);

tukaj, rdeča_vrednost, zelena_vrednost, in modra_vrednost predstavljajo barvne kanale kot v RGB, in alfa_vrednost določa stopnjo preglednosti.

div {
background-color: rgba(0, 128, 0, 0.5);
}

V tem primeru vrednost alfa 0,5 zeleni barvi dodeli 50-odstotno prosojnost, kar omogoča prikaz vsebine pod njo:

Prednosti: RGB in RGBA omogočata natančen nadzor barv, kar olajša izbiro natančnih odtenkov in ustvarjanje vizualno privlačnih dizajnov. Združljivi so z različnimi spletnimi brskalniki, kar zagotavlja dosleden videz izbranih barv.

Slabosti: Izziv je v zagotavljanju dostopnih barvnih kombinacij. Bistveno je, da ste pozorni na kontrastna razmerja, predvsem pri delu s prosojnostjo v RGBA. V pomoč so lahko smernice WCAG zagotovite, da je vaš dizajn dostopen.

4. Barvne vrednosti HSL in HSLA

HSL – okrajšava za Hue, Saturation in Lightness – je še ena funkcija CSS, ki definira barve. Podobno kot RGB, HSL uporablja številske vrednosti za predstavitev barv, vendar to počne drugače. Morda poznate Vrednosti HSL iz komponent uporabniškega vmesnika v aplikacijah za oblikovanje in drugod.

Odtenek: To predstavlja samo barvo z uporabo stopinj na barvnem kolesu v razponu od 0 do 360. Predstavljajte si to kot izbiro točke na krogu, kjer vsaka stopinja ustreza drugi barvi. Na primer, 0 in 360 stopinj za rdečo, 120 stopinj za zeleno in 240 stopinj za modro.

Nasičenost: Nasičenost določa živost ali intenzivnost barve. Določa razmerje med barvo in sivo, pri čemer je 0 % popolnoma sivina (nenasičena), 100 % pa popolnoma nasičena (živahna in čista).

Lahkotnost: Svetlost predstavlja, kako svetla ali temna je barva. Povezan je s položajem barve v spektru med črno (0 %) in belo (100 %). Vrednost 50 % predstavlja normalno barvo, vrednosti pod 50 % potemnijo barvo, vrednosti nad 50 % pa jo posvetlijo.

Poleg HSL obstaja še HSLA, kjer "A" pomeni "alfa". To je podobno črki »A« v RGBA in pomeni preglednost.

Tukaj je sintaksa:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Z uporabo te sintakse zamenjajte vrednost_barvnega_tona, nasičenost_odstotek, in lahkotnost_odstotek s posebnimi vrednostmi, ki jih želite za vsako komponento. Na primer:

div {
background-color: hsl(120, 100%, 50%);
}

V tem primeru je barva ozadja a div element je nastavljen na živahno zeleno z vrednostmi HSL. 120 predstavlja odtenek (zeleno), 100 % je za popolno nasičenost, 50 % pa nastavi svetlost na uravnoteženo raven.

Prednosti: HSL in HSLA ponujata vsestranske barvne izračune z uporabo lastnosti CSS po meri. So zelo združljivi s sodobnimi brskalniki in omogočajo enostavno prilagajanje svetlosti barv.

Slabosti: Učenje HSL vključuje razumevanje barvne znanosti, kot so odtenki in nasičenosti, ki so lahko zahtevnejši od znanih barv RGB.

Sprejemanje moči barv CSS

Obstaja več metod, ki jih lahko preverite in medtem ko raziskujete različne formate za definiranje barv v CSS ne pozabite, da imate moč oblikovati videz, razpoloženje in uporabniško izkušnjo svojega spletnega mesta.

Vaša izbira barvne oblike – ne glede na to, ali gre za preprosta imena barv, šestnajstiške kode, RGB ali HSL – lahko vpliva na to, kako vaše občinstvo dojema vaše spletno mesto. Zato eksperimentirajte, učite se in poiščite barvne definicije, ki najbolje ustrezajo vašim oblikovalskim ciljem.