4 načina za definiranje boja u CSS-u

Ključni zahvati

• Korištenje naziva boja: CSS nudi 145 naziva boja za jednostavan odabir boja prilagođen početnicima, ali mogućnosti su ograničene i možda neće zadovoljiti precizne potrebe dizajna.
• Heksadecimalni kodovi boja: Heksadecimalni kodovi nude širok raspon opcija boja i preciznu prilagodbu, iako mogu biti manje intuitivni za korištenje i pamćenje.
• RGB i RGBA vrijednosti boja: RGB omogućuje preciznu kontrolu boja s numeričkim vrijednostima, dok RGBA dodaje transparentnost. Važno je osigurati pristupačne kombinacije boja.

Boje su među najčešće korištenim CSS atributima, igrajući ključnu ulogu u oblikovanju vizualnog identiteta web stranice, raspoloženja i korisničkog iskustva. CSS nudi niz izbora za korištenje boja, od kojih je svaki prilagođen specifičnim potrebama i preferencijama dizajna.

Iako je lako previdjeti važnost definicije boja, vaši izbori mogu značajno utjecati na izgled i dojam vaše web stranice. Istraživanje razlika između različitih metoda te kako ih praktično primijeniti i kombinirati poboljšat će vašu sposobnost stvaranja vizualno privlačnih web stranica.

1. Korištenje naziva boja

CSS pruža praktičan način za definiranje boja pomoću imena, a dostupno je 145 opcija. Ovi nazivi boja kreću se od jednostavnih "crvena", "zelena" i "plava" do specifičnijih nijansi poput "koraljne" ili "lavande".

Korištenje imenovanih boja je jednostavno: odaberete naziv boje kao što je "crvena" i koristite ga u CSS svojstvu koje podržava vrijednosti boja. Takav svojstva uključuju očito boja i boja pozadine, ali također boja ruba, obris-boja, i tekst-sjena, između ostalih.

Imena boja su zgodna kada vam je potrebna privremena boja za izradu prototipova ili želite da vaš kod bude lak za čitanje. Evo sintakse:

color_property: color_name;

U tom slučaju jednostavno zamijenite ime_boje s određenom bojom koju želite koristiti. Na primjer, ako želite postaviti tekst boja od odlomka do Crvena, napiši:

p {
color: red;
}

Ovo će vašim paragrafima dati crvenu boju teksta:

Pros: Lako ih je čitati i razumjeti u vašem CSS kodu. Prilagođeni su početnicima, dobro funkcioniraju u svim preglednicima i zgodni su za brze dizajnerske ideje.

Protiv: Imaju ograničene mogućnosti i možda neće ponuditi precizne nijanse koje trebate, ograničavajući kreativnost dizajna. Osim toga, možda neće uvijek ispunjavati stroge zahtjeve pristupačnosti, a podrška u starijim sustavima može varirati.

2. Heksadecimalni kodovi boja

Heksadecimalni kodovi boja, koji se često nazivaju "heks kodovi", najčešći su načini određivanja boja u web dizajnu. Ovi se kodovi sastoje od kombinacija brojeva i slova od šest znakova (0-9, A-F), koji predstavljaju mješavinu crvene, zelene i plave (RGB) komponente u boji.

Iako su jednostavni za korištenje, razumijevanje njihovog rada može biti izazovno. Možeš uzeti duboko poniranje u heksadecimalne kodove bolje razumjeti. Evo osnovnog primjera kako možete koristiti heksadecimalne kodove u CSS-u:

color: #RRGGBB;

U ovom formatu RR, GG i BB predstavljaju redom crvenu, zelenu i plavu komponentu. Svaka komponenta može biti u rasponu od 00 (bez intenziteta) do FF (maksimalni intenzitet). Na primjer, ako želite postaviti boju pozadine zaglavlja web stranice na određenu nijansu plave, možete upotrijebiti heksadecimalni kod poput ovog:

header {
background-color: #336699;
}

Ovo će proizvesti duboku plavu boju:

​​​​​

Također možete koristiti stenografiju ako svaka od tri komponente dva puta ponavlja isti znak. Gornji primjer možete napisati kao:

header {
background-color: #369;
}

Pros: Heksadecimalni kodovi boja pružaju širok raspon opcija boja, omogućujući vam generiranje detaljnih i prilagođenih nijansi. Oni nude glatku kontrolu nad izborom boja, što ih čini idealnim za zahtjeve složenog dizajna.

Protiv: Iako su heksadecimalni kodovi moćni, mogu biti manje intuitivni od imenovanih boja. Također možete naići na izazov pamćenja određenih vrijednosti boja. srećom, alati za pronalaženje heksadecimalnih kodova boja na koje naiđete dostupni su, čineći proces lakšim za upravljanje.

3. RGB i RGBA vrijednosti boja

Kao i heksadecimalni kodovi, ovaj format vam omogućuje da odredite boje prema njihovim crvenim, zelenim i plavim komponentama. Ovaj put, međutim, možete koristiti prijateljskije cijele brojeve.

RGB vrijednosti boja

RGB vrijednosti boja druga su najčešće korištena metoda za definiranje boja u CSS-u. "RGB" predstavlja crvenu, zelenu i plavu, izraženu kao CSS funkcija sa zagradama iza nje. Unutar zagrada dodjeljujete vrijednosti svakom kanalu boje u rasponu od 0 do 255. To vam omogućuje kontrolu intenziteta crvene, zelene i plave u boji koju želite koristiti.

Evo sintakse:

rgb(red_value, green_value, blue_value);

Zamijeniti crvena_vrijednost, zelena_vrijednost, i plava_vrijednost sa svojim brojčanim vrijednostima. Na primjer, možete postići bijele, crne i crvene boje poput onih prikazanih na ovoj slici:

Kada postavite sva tri kanala boja (crveni, zeleni i plavi) na maksimalnu vrijednost od 255, to rezultira najvećim intenzitetom za svaki kanal, stvarajući bijelu boju:

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

Kada sva tri kanala boja postavite na njihovu minimalnu vrijednost od 0, to predstavlja odsutnost boje u svakom kanalu, što rezultira crnom.

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

Postavljanjem crvenog kanala na maksimalnu vrijednost od 255, dok ostali kanali ostaju na minimalnoj vrijednosti od 0, proizvodi crvenu boju:

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

RGBA vrijednosti boja

RGBA funkcionira na isti način kao RGB, jedina razlika je uključivanje alfa vrijednosti. "A" u RGBA označava alfu, koja određuje razinu prozirnosti ili neprozirnosti za odabranu boju. Vrijednost 0 predstavlja potpunu prozirnost, čineći boju potpuno nevidljivom, dok vrijednost 1 predstavlja potpunu neprozirnost, čineći boju potpuno vidljivom.

RGBA je posebno koristan kada želite stvoriti elemente s različitim razinama prozirnosti, kao što su prozirne pozadine ili izblijedjeli tekst. Potpuna sintaksa je:

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

Ovdje, crvena_vrijednost, zelena_vrijednost, i plava_vrijednost predstavljaju kanale boja kao u RGB, i alfa_vrijednost određuje razinu transparentnosti.

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

U ovom primjeru alfa vrijednost od 0,5 dodjeljuje 50% prozirnosti zelenoj boji, dopuštajući sadržaju ispod nje da se vidi kroz:

Pros: RGB i RGBA vam omogućuju točnu kontrolu boja, olakšavajući odabir preciznih nijansi i izradu vizualno atraktivnih dizajna. Kompatibilni su s raznim web preglednicima, osiguravajući dosljedan izgled odabranih boja.

Protiv: Izazov leži u osiguravanju pristupačnih kombinacija boja. Ključno je obratiti pozornost na omjere kontrasta, uglavnom kada radite s transparentnošću u RGBA. WCAG smjernice mogu pomoći osiguravate da je vaš dizajn dostupan.

4. HSL i HSLA vrijednosti boja

HSL — skraćenica za Hue, Saturation i Lightness — još je jedna CSS funkcija koja definira boje. Slično kao RGB, HSL koristi numeričke vrijednosti za predstavljanje boja, ali to čini drugačije. Možda ste upoznati s HSL vrijednosti iz komponenti korisničkog sučelja u aplikacijama za dizajn i drugdje.

Nijansa: Ovo predstavlja samu boju pomoću stupnjeva na kotačiću boja, u rasponu od 0 do 360. Zamislite to kao odabir točke na krugu, gdje svaki stupanj odgovara drugoj boji. Na primjer, 0 i 360 stupnjeva za crvenu, 120 stupnjeva za zelenu i 240 stupnjeva za plavu.

Zasićenost: Zasićenost određuje živost ili intenzitet boje. Definira odnos boje sa sivom, pri čemu je 0% potpuno sivih tonova (nezasićeno), a 100% potpuno zasićeno (živahno i čisto).

Lakoća: Svjetlost predstavlja koliko svijetla ili tamna boja izgleda. Povezan je s položajem boje u spektru između crne (0%) i bijele (100%). Vrijednost od 50% predstavlja normalnu boju, dok vrijednosti ispod 50% potamnjuju boju, a vrijednosti iznad 50% posvjetljuju.

Uz HSL postoji i HSLA, gdje "A" označava "alfa". Ovo je slično "A" u RGBA i označava transparentnost.

Evo sintakse:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Koristeći ovu sintaksu, zamijenite vrijednost_boje, postotak_zasićenja, i lakoća_postotak s određenim vrijednostima koje želite za svaku komponentu. Na primjer:

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

U ovom primjeru, boja pozadine a div element je postavljen na živopisnu zelenu pomoću HSL vrijednosti. 120 predstavlja nijansu (zelena), 100% je za punu zasićenost, a 50% postavlja svjetlinu na uravnoteženu razinu.

Pros: HSL i HSLA nude svestrane izračune boja koristeći CSS prilagođena svojstva. Vrlo su kompatibilni s modernim preglednicima i omogućuju jednostavno podešavanje svjetline boja.

Protiv: Učenje HSL-a uključuje razumijevanje znanosti o boji, poput nijansi i zasićenja, što može biti izazovnije od poznatih RGB boja.

Prihvaćanje moći CSS boja

Postoji više metoda koje možete provjeriti i dok istražujete različite formate za definiranje boja u CSS-u, imajte na umu da imate moć oblikovati izgled, raspoloženje i korisničko iskustvo svoje web stranice.

Vaš izbor formata boja – bilo da se radi o jednostavnim nazivima boja, heksadecimalnim kodovima, RGB ili HSL – može utjecati na to kako vaša publika percipira vašu web-lokaciju. Dakle, eksperimentirajte, učite i pronađite definicije boja koje najbolje odgovaraju vašim ciljevima dizajna.