Pink boja html. HTML grafikon boja. Sa RGB

Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem je, za razliku od decimalnog, zasnovan, kao što mu ime govori, na broju 16. Brojevi će biti sledeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 zamjenjuju se latiničnim slovima. Brojevi veći od 15 inča heksadecimalni sistem nastaje spajanjem dva broja u jedan. Na primjer, broj 255 in decimalni sistem odgovara broju FF u heksadecimalu. Da bi se izbjegla zabuna u definiciji brojevnog sistema, heksadecimalnom broju prethodi heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Tako je oznaka boje podijeljena na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja zelenu, a posljednja dva plavu. Dozvoljeno je koristiti skraćeni oblik #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fe0 treba smatrati #ffee00.

Odličan alat i učinit će ga lakim kao hodanje. Da li je lista boja ista kod svih operativni sistemi. Ispod je lista nedavno odabranih boja. Ovi brojevi su u heksadecimalnom brojevnom sistemu. Treći i četvrti predstavljaju intenzitet zelene, a peti i šesti intenzitet plave.

Podrška za ovu web stranicu

Rezultat je, naravno, čista crvena. Molimo podržite ovu stranicu tako što ćete je povezati. Vi samo trebate postaviti donji kod na svoju web stranicu. Ili pričajte o društvenim mrežama. Stoga, kod boje uvijek ima sedam znakova. Kada se ove tri vrijednosti pomiješaju, u slikarskoj paleti dobijaju se rezultati ekvivalentni onima u mješavinama, gdje se npr. žuta može dobiti miješanjem crvene i zelene, ljubičasta miješanjem crvene i plave ili cijan miješanjem zelene i plava.

po imenu

Internet Explorer Chrome Opera safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Pretraživači podržavaju neke boje po imenu. U tabeli. 1 prikazuje nazive, heksadecimalni kod, vrijednosti u RGB, HSL formatu i opis.

html kodovi boja

Ton boje se također može promijeniti povećanjem ili smanjenjem tri vrijednosti proporcionalno. Na primjer, ljubičasta boja prikazana iznad može se posvijetliti ili potamniti. Zbog prirode ovog odjeljka, slijepim osobama sljedeći vodič za boje neće biti od koristi.

Ovi brojevi su izraženi u heksadecimalnom sistemu numerisanja. Treći i četvrti broj predstavljaju intenzitet zelene, dok peti i šesti predstavljaju intenzitet plave. Rezultat je čisto crveno. Sve što trebate učiniti je postaviti donji kod na svoju web stranicu.

Tab. 1. Nazivi boja
Ime Boja Šifra RGB HSL Opis
bijela #fffff ili #ffff rgb(255,255,255) hsl(0,0%,100%) Bijelo
srebro #c0c0c0 rgb(192,192,192) hsl(0,0%,75%) Siva
siva #808080 rgb(128,128,128) hsl(0,0%,50%) Tamno siva
crna #000000 ili #000 rgb(0,0,0) hsl(0,0%,0%) Crna
maroon #800000 rgb(128,0,0) hsl(0,100%,25%) Tamno crvena
crvena #ff0000 ili #f00 rgb(255,0,0) hsl(0,100%,50%) Crveni
narandžasta #ffa500 rgb(255,165,0) hsl(38.8,100%,50%) Narandžasta
žuta #ffff00 ili #ff0 rgb(255,255,0) hsl(60,100%,50%) Žuta
maslina #808000 rgb(128,128,0) hsl(60,100%,25%) Maslina
kreč #00ff00 ili #0f0 rgb(0,255,0) hsl(120,100%,50%) svijetlo zelena
zeleno #008000 rgb(0,128,0) hsl(120,100%,25%) Zeleno
aqua #00ffff ili #0ff rgb(0,255,255) hsl(180,100%,50%) Plava
plava #0000ff ili #00f rgb(0,0,255) hsl(240,100%,50%) Plava
mornarica #000080 rgb(0,0,128) hsl(240,100%,25%) Tamno plava
teal #008080 rgb(0,128,128) hsl(180,100%,25%) plavo zeleno
fuksija #ff00ff ili #f0f rgb(255,0,255) hsl(300,100%,50%) Pink
ljubičasta #800080 rgb(128,0,128) hsl(300,100%,25%) Violet

Sa RGB

Internet Explorer Chrome Opera safari Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Možete definirati boju koristeći crvene, zelene i plave vrijednosti u decimalnim terminima. Svaka od tri komponente boje ima vrijednost od 0 do 255. Također je prihvatljivo postaviti boju kao postotak, dok će 100% odgovarati broju 255. Prvo se specificira ključna riječ rgb, a zatim se komponente boje navedeno u zagradama, odvojeno zarezima, na primjer rgb(255, 128, 128) ili rgb(100%, 50%, 50%).

Podešavanje boje pomoću HSL-a

Ili ga raširite društvene mreže. Označavanje bojama je važan dio svakog programa sigurnosti hrane. Ne samo da ovo pomaže u sprječavanju unakrsne kontaminacije uzrokovane patogenima, alergenima i stranim zagađivačima, već i pojednostavljuje organizacijske napore: sve je u boji. I dalje, iako to nije uslov, kodiranje bojama je praksa koja se vrednuje u procesima revizije.

Šifra boja, nezamjenjiv saveznik u prehrambenoj industriji. U nastojanju da zaštitimo potrošače, prehrambena industrija sve više podliježu zahtjevima zakona o higijeni hrane i sigurnosti hrane. Stoga prehrambene kompanije ne mogu pratiti najnovije trendove i najbolje prakse kako bi ispunile zakonske i tržišne zahtjeve.

RGBA

Internet Explorer Chrome Opera safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

RGBA format je po sintaksi sličan RGB-u, ali uključuje alfa kanal koji postavlja transparentnost elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

Na primjer, ispravna implementacija programa za kodiranje bojama u operativnim sistemima bilo koje vrste prehrambenog poslovanja je efikasan način olakšavanje organizacije procesa i poboljšanje sigurnosti proizvoda. Alat koji vrijedi za cijelu prehrambenu industriju.

Podešavanje boje pomoću RGBA

Bilo koja vrsta prehrambenog poslovanja može imati koristi od kodiranja bojama kako bi se osigurale higijenske i organizirane radne površine. Osim što sprečava unakrsnu kontaminaciju, kodiranje bojama je korisno za olakšavanje organizacije kompanije: kada sve ima svoje mjesto i svi znaju gdje se nalazi, u zavisnosti od boje, lako ga je organizirati. U velikim postavkama, kod boja može odvojiti instrumente u oblasti ili pomake. U manjim kompanijama ga mogu koristiti zaposleni ili zaposleni, na primjer.

RGBA je dodat u CSS3, tako da valjanost CSS koda treba da se izvrši prema ovoj verziji. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke njegove karakteristike mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color prolazi provjeru valjanosti, ali ona dodana svojstvu background-a ne. Istovremeno, pretraživači sasvim ispravno razumiju boju za oba svojstva.

Kodiranje boja ide dalje od alata za čišćenje i alata za rukovanje materijalom. Također možete kodirati sve vrste dodataka kao što su mreže za kosu, cipele, odjeća, kontejneri ili vrpce kako biste lakše razlikovali različita područja.

Prevencija unakrsne kontaminacije. Označavanje bojama je jednostavan način za vizualno odvajanje radnih prostora i sprječavanje unakrsne kontaminacije. Ovo može biti vrlo korisno, na primjer, za smanjenje rizika u instalacijama s problemima unakrsnog kontakta alergena.

HSL

Internet Explorer Chrome Opera safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

Naziv HSL formata formiran je od kombinacije prvih slova Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina). Nijansa je vrijednost boje na kotaču boja (slika 1) i određena je u stepenima. 0° je crvena, 120° je zelena, a 240° je plava. Vrijednost nijanse može varirati od 0 do 359.

Unakrsna kontaminacija se sprječava skladištenjem pravilno odvojenih namirnica koje mogu prenijeti bakterije ili alergene, na primjer, poznato je da sirovo meso nikada ne smije doći u direktan ili indirektan kontakt sa prerađenim mesom.

Jedan od načina da to učinite je označavanje bojama prostorija za obradu hrane, čineći mnogo lakšim razlikovanje između odjeljaka. Na primjer, područja sirovo meso mogu biti crvene, a površine obrađene zelenom bojom. Obojite kritična područja i kontrolne tačke.

Rice. 1. Točak boja

Zasićenost je intenzitet boje, mjeren u procentima od 0% do 100%. Vrijednost od 0% označava da nema boje i ima nijansu sive, 100% je maksimalna vrijednost zasićenja.

Svjetlost postavlja koliko je svijetla boja i specificira se kao postotak od 0% do 100%. Male vrednosti čine boju tamnijom, dok je visoke vrednosti čine svetlijom, ekstremne vrednosti od 0% i 100% odgovaraju crno-beloj.

Usklađivanje zakonskih zahtjeva u oblasti sigurnosti hrane je od vitalnog značaja važan aspekt uspjeh svake kompanije u sektoru. Jedna od najčešće korišćenih mera za ovo je primena sistema analize opasnosti i kritičnih kontrolnih tačaka, koji imaju proaktivan pristup za identifikaciju, procenu i kontrolu opasnosti koje mogu izazvati bolest ili povredu ako nisu adekvatno kontrolisane.

Jednom potencijalne opasnosti za sigurnost hrane u pogonu za preradu će biti identifikovane, kritične kontrolne tačke koje postoje u svakom procesu mogu biti dokumentovane. Kao kontrolna mjera, obojene površine se često poklapaju s kritičnim kontrolnim tačkama, izoliranim ili grupiranim. Ovo je jednostavan način da razjasnite koja je zona i koja predstavlja svaku boju.

HSLA

Internet Explorer Chrome Opera safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

HSLA format je po sintaksi sličan HSL-u, ali uključuje alfa kanal koji postavlja transparentnost elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

Nakon što je meso kuhano, ovom dijelu procesa može se dodijeliti drugačija boja kako bi se izbjegla unakrsna bakterijska kontaminacija gotovog proizvoda. U tu svrhu, kodiranje bojama je jednostavan način da se vizuelno potvrdi da je oprema u odgovarajućem kritičnom području u fabrici.

Objašnjenja na primjer

Kako optimizirati program za kodiranje boja? Neki aspekti koji se mogu uzeti u obzir pri razvoju efektivnog koda boja. Održavajte jednostavan kod boja: najbolje je ograničiti broj boja koje koristite i primijeniti ih samo kada je to potrebno. Ako se koristi previše boja, proces postaje zbunjujući i manje efikasan. Odaberite logične boje za svako područje: Pokušajte odabrati boje koje imaju najviše smisla u svakoj oblasti, kao što je crvena za sirovo meso ili žuta za pšenicu. Logika izbora treba da bude očigledna svim zaposlenima kako bi se osiguralo da je kod pravilno implementiran. Izbjegavajte složene dodjele boja: trenutno prepoznavanje je ključ za smanjenje konfuzije, pa je preporučljivo ostati u istoj boji za svaku zonu. Svi zaposleni bi trebali biti u mogućnosti da brzo pogledaju i odrede koji i koji pripada svakom od njih. Primijenite program kodiranja boja odjednom: da ne bi došlo do zabune, kod mora biti u potpunosti implementiran u jednom trenutku i, ako postoji prethodni kod, mora biti jasno označen datum kada stari zastari, a novi počinje s radom. Oni koji su zaduženi moraju dobro razumjeti novi sistem kako bi mogli odgovoriti na sve sumnje koje zaposleni mogu imati. Takođe je dobra ideja da zaposlenima obezbedite jasan i koncizan dokument o oblastima boja kako bi informacije bile uvek dostupne. Jačanje kodiranja boja dobrim označavanjem: Da biste izbjegli dvosmislenost, najbolje je jasno označiti svaku tačku u procesu, na više jezika ako je potrebno. Uverite se da su alati i prostori za skladištenje odgovarajući: Alati treba da se čuvaju u istom prostoru gde se koriste kako bi se izbegla zabuna, unakrsna kontaminacija i gubitak opreme. Ako su, na primjer, crveni alati pohranjeni u crvenom postolju ili ormariću, lako je vidjeti gdje tačno taj alat treba da ide kada se ne koristi. Organizovan prostor za skladištenje je od velike pomoći u održavanju integriteta sistema kodiranja boja.

  • Dobra komunikacija je ključ.
  • Da bi svi u kompaniji znali i slijedili kodeks, morate dobro komunicirati.
Mjera koju ocjenjuju revizori i klijenti.

Vrijednosti boja u formatima RGBA, HSL i HSLA se dodaju u CSS3, pa kada koristite ove formate, provjerite valjanost koda u odnosu na verziju.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Boje

Upozorenje

Sve metode hvatanja lava navedene na stranici su teorijske i bazirane na računskim metodama. Autori ne jamče vašu sigurnost prilikom njihove upotrebe i odriču se bilo kakve odgovornosti za rezultat. Zapamtite, lav je grabežljivac i opasna životinja!

Iako kod boja nije standardizirano pravilo ili zahtjev, kada se dobro implementira, revizori i vlasti ga cijene i odobravaju. Razlog je taj što se ova mjera preventivne kontrole može dokumentirati i lako je pratiti od strane zaposlenih.

Programi koji se lako dokumentuju takođe lakše komuniciraju, što povećava efikasnost prihvatanja procedura zaposlenih, što je važan faktor u obezbeđivanju bezbednosti proizvoda u kompaniji. Osim toga, revizori i kupci koji posjete fabriku brzo implementiraju implementirane programe kodiranja boja, povećavajući povjerenje u djelotvornost preventivnog pristupa kompanije.

Arrrgh!

Rezultat ovog primjera prikazan je na sl. 2.


Rice. 2. Boje na web stranici

Boja u CSS-u se može postaviti na različite načine:

  • po imenu,
  • po heksadecimalnoj vrijednosti,
  • u RGB i RGBA formatima,
  • u HSL i HSLA formatima.

Postavite boju po imenu

Preglednici podržavaju određivanje određenih boja za elemente po imenu. U ovoj tabeli, neke od ključnih reči (engleski nazivi boja) koje se koriste za postavljanje svojstava boja, RGB koda, heksadecimalnog koda (HEX) i HSL koda.

Boje se uvijek specificiraju kombinacijom više primarnih boja. Postoje dva sistema: aditivni i oduzeti. Ovaj sistem je isti kao onaj koji radi sa svjetlom i predstavlja aditivni sistem. To jest, ako dodate boje, završit ćete sa svjetlijim bojama dok ne završite u bijeloj boji.

Kako miješate boje, postajete sve tamniji i tamniji dok ne dođete do crne. Postoji 256 mogućih vrijednosti za svaku osnovnu boju, što daje 216 kombinacija. Što je veća vrijednost, to je boja intenzivnija. Definirani nazivi su sljedeći. Postoje tri načina za definiranje boje. Najlakši način je da imenujete boju koristeći englesku riječ. Na primjer: crna, bijela, crvena, zelena i plava.

Tab. 1. Nazivi boja, njihov RGB, HEX i HSL kod.
Ime Boja RGB HEX HSL Opis
bijela rgb(255, 255, 255) #fffff ili #ffff hsl(0, 0%, 100%) Bijelo
srebro rgb(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%) Siva
siva rgb(128, 128, 128) #808080 hsl(0, 0%, 50%) Tamno siva
crna rgb(0, 0, 0) #000000 ili #000 hsl(0, 0%, 0%) Crna
maroon rgb(128, 0, 0) #800000 hsl(0, 100%, 25%) Tamno crvena
crvena rgb(255, 0, 0) #ff0000 ili #f00 hsl(0, 100%, 50%) Crveni
narandžasta rgb(255, 165, 0) #ffa500 hsl(38.8, 100%, 50%) Narandžasta
žuta rgb(255, 255, 0) #ffff00 ili #ff0 hsl(60, 100%, 50%) Žuta
maslina rgb(128, 128, 0) #808000 hsl(60, 100%, 25%) Maslina
kreč rgb(0, 255, 0) #00ff00 ili #0f0 hsl(120, 100%, 50%) svijetlo zelena
zeleno rgb(0, 128, 0) #008000 hsl(120, 100%, 25%) Zeleno
aqua rgb(0, 255, 255) #00ffff ili #0ff hsl(180, 100%, 50%) Plava
plava rgb(0, 0, 255) #0000ff ili #00f hsl(240, 100%, 50%) Plava
mornarica rgb(0,0,128) #000080 hsl(240, 100%, 25%) Tamno plava
teal rgb(0, 128, 128) #008080 hsl(180, 100%, 25%) plavo zeleno
fuksija rgb(255, 0, 255) #ff00ff ili #f0f hsl(300, 100%, 50%) Pink
ljubičasta rgb(128, 0, 128) #800080 hsl(300, 100%, 25%) Violet

Ovo je primjer upotrebe naziva boja, nazivi boja su uzeti iz proširene tabele.

RGB u CSS

Srednje tirkizno
braon
grimizno
blueviolet
rolelivedrab

Ali danas ga koriste svi pretraživači. Svaka boja može imati vrijednost između 0 i 255. Sigurna je i kompatibilna s više od samo web aplikacija. Heksadecimalni sistem predstavlja prikaz od 6 znakova u boji. Prva dva znaka predstavljaju crvenu vrijednost, sljedeća dva znaka su zelena, a posljednja dva su plava.

Sljedeća tabela pokazuje, preciznije, kako su slova integrisana u heksadecimalni sistem, čime se povećavaju mogućnosti za kreiranje kombinacija. Dakle, mogućnosti su veće i sistem može imati 16 vrijednosti. Primjer heksadecimalnog koda.

Evo kako ovaj kod radi:

Podešavanje boje pomoću RGB

RGB je aditivni model boja. Na engleski jezik dodatak- dodatak. RGB je skraćenica engleske riječi: crvena, zelena, plava - crvena, zelena, plava). Iz ovoga je jasno da se u RGB modelu boje sintetiziraju dodavanjem tri boje (crvena, zelena, plava) u različitim količinama.

Podešavanje boje pomoću RGB

Kada pretraživač vidi ovaj kod, prikazaće se belo. Ako želite da saznate nešto više o tome kako se formiraju heksadecimalne boje, imamo sljedeću formulu. Heksadecimalni sistem se koristi za kreiranje stranica. Ovo je kompatibilno sa većinom pretraživača tako da su boje prikazane na web stranici uvijek iste. Ove vrste boja se ne razlikuju od jednog pretraživača do drugog.

S druge strane, od ovih 216 osigurača, samo 22 su prikazana na isti način na svim monitorima. 8-bitni monitori bili su češći nego danas kada je razvijena paleta od 216 boja. Utvrđeno je da se samo 22 od 216 boja zaista mogu gledati bez preraspodjele na 16-bitnim monitorima.

Miješanje crvene, zelene i plave boje možete dobiti nekoliko miliona nijansi. Sve moguće kombinacije su pohranjene u memoriji računara.

Pređi na stvar.

Za postavljanje svojstava u ovom formatu koristi se oznaka rgb(r, g, b), gdje su r, g, b tri kanala za svaku boju (crvena, zelena, plava). Vrijednosti za svaki kanal su postavljene u rasponu od 0 do 255.

Primjer koda.

Da bi sve bilo jasno, dat ću primjer koda:

RGB u CSS

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)

Ovako bi ovaj primjer trebao funkcionirati:

Fig.1. Boje u RGB.

Objašnjenja na primjer.

Na početku stranice kreiramo klasu div.rgb, potrebna je kako bi blokovi kreirani tagom

prikazano u ispravnoj veličini: 240px x 40px. Dodjeljujemo vrijednost - 40px svojstvu line-height (visina linije), odnosno jednaku visini bloka, to će omogućiti prikaz teksta u bloku
u centru vertikale. vodoravno centrirajte tekst pomoću pravila ( text-align : centar ;).

Zatim u kodu postavite boju pozadine bloka

koristeći atribut stila koristeći svojstvo pozadine, i dodjeljivanje vrijednosti rgb(255, 0, 0) , rgb(0, 255, 0) i rgb(0, 0, 255) . Odnosno, jedan kanal naizmjenično činimo što zasićenijim, a preostali kanali se ne koriste za sintezu, jer je njihova vrijednost nula.

Pokušajte urediti ovaj primjer kako biste uključili vlastite vrijednosti, kao što je rgb(100, 100, 100) .

Podešavanje boje pomoću RGBA

CSS3 je predstavio novi alat za rad sa bojom - RGBA format. Može se nazvati evolucijom RGB modela, ali uz dodatak jednog novog kanala - A ili alfa kanala. Ovaj kanal postavlja transparentnost boje. Njegove vrijednosti su postavljene u rasponu od 0 do 1. Vrijednost jednaka 0 odgovara punoj transparentnosti, 1 - punoj neprozirnosti (boja će biti ista kao što je postavljena u prva tri RGB kanala), a srednje vrijednosti , kao 0,4 ili 0,6 - translucencija u različitim stepenima.

Primjer koda.

RGBA u CSS3

Evo kako će to raditi:

Ovaj kod je vizualno sličan sljedećem, koji koristi RGB model za postavljanje vrijednosti boje:

RGBA u CSS3

Evo njegovog rezultata:

Vrijednost alfa kanala jednaka nuli čini bilo koju boju nevidljivom - apsolutno transparentnom, vrijednost jednaka jedan prevodi boju u RGB kodu bez promjena. Svojstvo rgba(255,0,0,1.0) pokazuje crvenu boju rgb(255, 0, 0) .

Po heksadecimalnoj vrijednosti (HEX kod)

U svakodnevnom životu koristimo decimalni sistem brojanja. Njegovo porijeklo je vrlo jednostavno - imamo deset prstiju na rukama i bilo je zgodno računati na prste u životu. Ako u decimalnom sistemu ima deset cifara: od 0 do 9, a broj 10 je sljedeća znamenka, onda u heksadecimalnom brojevnom sistemu ima 16 cifara, a sljedeća cifra će biti broj 16.

Da biste naveli kodove boja kao heksadecimalne cifre, uobičajeno decimalne cifre od 0 do 9 i za označavanje brojeva od 10 do 15 koristite latinična slova od A do F, tj. (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Radi jasnoće, sumiramo ovo u tabeli:

Za pisanje heksadecimalnih brojeva većih od F (15 decimala), kao u decimalnom sistemu, oni takođe koriste uniju dve cifre, ali već heksadecimalne, što je očigledno. Dakle, da bi se decimalni broj 255 zapisao u heksadecimalu, koristi se oznaka FF.

Heksadecimalni sistem je razumljiviji računaru, brže obrađuje vrijednosti koje su date heksadecimalnom vrijednošću.

Da biste naveli boju u heksadecimalnom sistemu, prethodite brojčanoj vrijednosti znakom "#", na primjer: #FFC0CB . Sama vrijednost #FFC0CB sastoji se od tri heksadecimalne cifre FF, C0 i CB. Značenje ovog unosa je isto kao i podešavanje boje u RGB formatu (rgb(r, g, b)) - svaka heksadecimalna cifra u HEX kodu označava zasićenost boje u svom kanalu RGB modela.

HEX kod u CSS-u

#FF0000
#00FF00
#0000FF

Ovaj kod će prikazati sljedeće elemente:

A evo i slike s rezultatom iz odjeljka "Podešavanje boje uz RGB" na ovoj stranici iznad.

Fig.1. Boje u RGB.

Vidimo da su boje identične.

Dozvoljena je skraćena notacija za HEX kod boje: 6-cifreni broj može se napisati kao trocifreni broj. Ovo vrijedi samo ako se dvije cifre u vrijednosti boje istog kanala ponavljaju.

Odnosno, sljedeća skraćenica je prihvatljiva:

Na primjer, boja #ff22aa se može napisati kao #f2a , ili boja #44aa22 može biti napisana kao #4a2 .

Podešavanje boje pomoću HSL-a

CSS3 ima novi format za određivanje boja.

HSL format je skraćenica od engleskih riječi: Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina).

Nijansa u HSL-u je vrijednost boje na posebnom kotaču boja (slika 2) i određena je u stepenima. Ako povučemo analogije sa RGB modelom, onda 0° odgovara crvenoj, 120° odgovara zelenoj, a 240° odgovara plavoj.

Vrijednost nijanse će se promijeniti od 0 do 359.



Slika 2. HSL točak boja.

Druga vrijednost - zasićenost (Saturate) je postavljena kao postotak. Pri 100% zasićenosti, boja je što je moguće "sočnija", kako se indikator zasićenosti pomiče prema 0%, boja postaje sve dosadnija i postaje siva.

Treća vrijednost - lakoća (Lightness) je također postavljena kao procenat. Što je veći procenat, to će boja biti svetlija. Ekstremne vrijednosti od 0% i 100% će ukazivati ​​na crnu (nedostatak svjetla) i bijelu (izložena) boje, i nije bitno koja je boja iz kotača boja odabrana u prvom kanalu. Optimalna vrijednost može se smatrati vrijednost svjetline boje jednaka 50%.

Podešavanje boja sa HSLA

HSLA format je povezan sa HSL-om, kao što je RGB i RGBA. AT HSL format A, kao u RGBA, dodat je alfa kanal koji je odgovoran za transparentnost boja.

Boja specificirana u HSL formatu je lakša za čitanje. Možemo reći da je intuitivan. Na primjer, kod hsl(120,60%,50%) može predstavljati konačnu boju ako postoji slika HSL kotača boja u memoriji. Pro RGB formati a HEX je nemoguće reći, kod boja dat u ovim formatima postaje jasan tek nakon što se prikaže na monitoru.

Novi formati u CSS3 (HSL, HSLA i RGBA) rade u pretraživačima od verzija: IE 9.0, Opera 10.0 Firefox 3.0. Kako natjerati stilove da rade na starijim pretraživačima?

Neki blok (boja pozadine: rgb(255,50,50); boja pozadine: rgba(255,50,50,0.85))

Kada koristite ovaj kod u starijim pretraživačima, boja pozadine za .someblosk klasu, iako ne koristi alfa kanal, biće prikazana u RGB formatu.