Kako promijeniti boju teksta HTML i CSS. Kako promijeniti boju teksta HTML i CSS RGB model boja

RGB model boja

Drugi način za određivanje boja u CSS-u je korištenje decimalnih RGB vrijednosti (crvena, plava, zelena). Da biste to učinili, nakon svojstva boje trebate napisati ključnu riječ rgb, a zatim u zagradama i odvojene zarezima tri broja u rasponu od 0 do 255, od kojih svaki označava intenzitet crvene, zelene i plave boje (r , g, b). Što je veći broj, to je boja intenzivnija. Na primjer, da biste dobili svijetlo zelenu boju, morate napisati:

P (boja: rgb(0, 255, 0); )

Ali žućkasto-senfna nijansa ima sljedeće značenje:

Boja: rgb(94, 81, 3); /* ispod je ista boja, napisana heksadecimalno: */ boja: #5E5103;

Vrijednost za crnu se piše kao (0, 0, 0), a za bijelu kao (255, 255, 255). Također je moguće navesti ove vrijednosti kao postotke. Dakle, broj 255 odgovara 100%, stoga se bijela boja može postaviti na sljedeći način:

Boja: rgb(100%, 100%, 100%);

Gdje tražiti značenja boja

Možda imate pitanje: odakle dobivate sva ta značenja boja? Ima ih mnogo grafički urednici i online usluge pomoću kojih možete odabrati boje i izraditi sheme boja. Jedan od naj popularni programi, u kojem možete odabrati odgovarajuću boju i dobiti njenu RGB, hex vrijednost i više - Adobe Photoshop. Kao alternativa, postoje posebna mjesta na kojima možete jednostavno odabrati ne samo boju, već i cjelinu shema boja. Sjajan primjer je usluga Adobe Color CC.

RGBA model boja

Postavi boju na RGB format A je moguće gotovo isto kao u RGB. Razlika između RGBA i RGB je prisutnost alfa kanala, koji je odgovoran za transparentnost boje. Prozirnost se postavlja brojem u rasponu od 0 do 1, gdje 0 znači potpunu prozirnost, a 1, naprotiv, znači potpuno neprozirno. Međuvrijednosti poput 0,5 omogućuju vam da postavite proziran izgled (dopušten je stenografski zapis, bez nule, ali s točkom – .5). Na primjer, da bi tekst bio obojen i blago proziran, trebate napisati ključnu riječ rgba i vrijednost boje nakon svojstva boje:

P (boja: rgba(94, 81, 3, .9); )

Nedostatak RGBA je što ga preglednik ne podržava Internet Explorer verzije 8 i starije. Posebno za IE8 možete primijeniti sljedeće rješenje:

P (boja: rgb(94, 81, 3); boja: rgba(94, 81, 3, .9); )

Prvo svojstvo u primjeru je za IE8 preglednik, koji će prikazati tekst u pravoj boji, ali bez transparentnosti. A oni preglednici koji razumiju RGBA primijenit će drugo svojstvo na element, s transparentnošću.

HSL (HSLA) modeli boja

Također možete postaviti boju u CSS-u koristeći koordinate HSL modela boja (Hue, Saturation, Lightness). Napisano je ovako:

P (boja: hsl(165, 100%, 50%); )

Prvi broj u zagradama označava nijansu i daje se u stupnjevima (raspon brojeva od 0 do 359). Bit će lako razumjeti zašto se koriste stupnjevi ako se sjetite kako izgleda kotačić boja:

Drugi i treći broj u zagradama znače zasićenost, odnosno svjetlinu. Njihove vrijednosti postavljene su u postocima od 0 do 100. Što je niža vrijednost zasićenja, boja postaje prigušenija. Vrijednost zasićenosti od nula rezultirat će sivom bojom, bez obzira na vrijednost nijanse. Vrijednost svjetline omogućuje vam da odredite svjetlinu boje. Niske vrijednosti rezultiraju tamnim nijansama boje, visoke vrijednosti rezultiraju svijetlim nijansama. Vrijednost od 100% za svjetlinu znači bijelu boju, 0% znači crnu.

HSLA model boja radi gotovo isto kao i HSL, ali, slično kao RGBA, ima alfa kanal s kojim možete postaviti transparentnost boje navodeći željenu vrijednost u rasponu od 0 do 1:

P (boja: hsla(165, 100%, 50%, .6); )

HSL i HSLA podržavaju svi preglednici osim Internet Explorera verzije 8 i starijih.

Standardne HTML boje

Drugi način predstavljanja boja na webu je putem ključnih riječi, koje se mogu koristiti za određivanje boje za element. Primjer:

P(boja:crna;)

Postoji 16 standardnih boja koje se mogu napisati u vrijednosti svojstva boje:

Ove boje podržavaju svi preglednici. Osim njih, postoji oko 130 dodatnih ključnih riječi za razne nijanse cvijeće. Pun stol ove se boje mogu vidjeti u priručniku W3C.

Korištenje takvih ključnih riječi je prihvatljivo, ali postoji rizik da preglednik neće prihvatiti neku riječ. Stoga je preporučljivo zapisati heksadecimalni kod boje umjesto ključnih riječi.

Rezultati

U CSS boja tekst se zadaje svojstvom color, a njegova se vrijednost može napisati na više načina - u heksadecimalnom (hex) formatu, u RGB ili HSL formatu ili navođenjem ključne riječi. Za izbjegavanje neispravan prikaz boja određena pomoću ključne riječi, bolje je navesti njezinu hex vrijednost.

Također je moguće postaviti prozirnost elementa pomoću alfa kanala (RGBA i HSLA formati). Vrijedno je uzeti u obzir da preglednik IE8 i njegove ranije verzije ne podržavaju formate RGBA, HSL i HSLA.

U ovom vodiču ćemo pogledati posljednji atribut oznake , koji postavlja boju teksta. Prema zadanim postavkama, tekst je crn, koji se prikazuje na bijeloj pozadini. Kako bi se promijeniti boju teksta u html-u, trebate primijeniti atribut boje oznake :