Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • vijesti
  • Tabela kodova boja. Boja u stilovima se može postaviti na različite načine: heksadecimalnom vrijednošću, imenom, u RGB, RGBA, HSL, HSLA formatu

Tabela kodova boja. Boja u stilovima se može postaviti na različite načine: heksadecimalnom vrijednošću, imenom, u RGB, RGBA, HSL, HSLA formatu

CSS modul boja detaljno opisuje vrijednosti koje omogućavaju autorima da definiraju boje i neprozirnost html elemenata, kao i vrijednosti svojstva boje.

Svojstvo boje

1. Boje prioriteta: svojstvo boje

Svojstvo postavlja boju fonta koristeći različite sisteme za prikazivanje boja. Svojstvo opisuje boju tekstualnog sadržaja elementa. Također se koristi za pružanje potencijalne indirektne vrijednosti (currentColor) za bilo koja druga svojstva koja prihvataju vrijednosti boja.

Imovina je naslijeđena.

2. Vrijednosti boja

2.1. Glavne ključne riječi

Lista glavnih ključnih riječi uključuje sljedeća značenja:

Ime HEX RGB Boja
crna #000000 0,0,0
srebro # C0C0C0 192,192,192
siva #808080 128,128,128
bijela #FFFFFF 255,255,255
maroon #800000 128,0,0
crvena # FF0000 255,0,0
ljubičasta #800080 128,0,128
fuksija # FF00FF 255,0,255
zeleno #008000 0,128,0
kreč # 00FF00 0,255,0
maslina #808000 128,128,0
žuta # FFFF00 255,255,0
mornarica #000080 0,0,128
plava # 0000FF 0,0,255
teal #008080 0,128,128
aqua # 00FFFF 0,255,255

Nazivi boja ne razlikuju velika i mala slova.

Sintaksa

Boja: teal;

2.2. Numeričke vrijednosti boja

2.2.1. RGB boje

RGB heksadecimalni format vrijednosti je znak # odmah iza kojeg slijede tri ili šest heksadecimalnih znakova. Trocifreni RGB #rgb se pretvara u šestocifreni #rrggbb kopiranjem cifara umjesto dodavanjem nula. Na primjer, # fb0 se proširuje na # ffbb00. Ovo osigurava da se bijela #ffffff može specificirati u kratkom #fff i uklanja sve ovisnosti o dubini boje s prikaza.

Format RGB vrijednosti u funkcionalnoj notaciji je rgb (praćen zarezom razdvojenom listom od tri numeričke vrijednosti (bilo tri vrijednosti cijelog broja ili vrijednosti od tri posto) nakon čega slijedi znak). Cjelobrojna vrijednost 255 odgovara 100% i F ili FF u heksadecimalnom zapisu:

Rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF

Znakovi za razmak su dozvoljeni oko numeričkih vrijednosti.

Vlad Merzhevich

U HTML-u, boja se specificira na jedan od dva načina: korištenjem heksadecimalnog koda i imenom nekih boja. Uglavnom se koristi metoda zasnovana na heksadecimalnom brojevnom sistemu, kao najuniverzalnija.

Heksadecimalne boje

Heksadecimalni brojevi se koriste za određivanje boja u HTML-u. Heksadecimalni sistem, za razliku od decimalnog, zasnovan je, kao što mu ime kaže, 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. Table 6.1 pokazuje korespondenciju između decimalnih i heksadecimalnih brojeva.

Brojevi veći od 15 u heksadecimalnom sistemu formiraju se kombinovanjem dva broja u jedan (tabela 6.2). Na primjer, 255 decimalno je FF heksadecimalno.

Da bi se izbjegla zabuna u definiciji brojevnog sistema, hash znak # stavlja se ispred heksadecimalnog broja, na primjer # aa69cc. U ovom slučaju registar nije bitan, pa je dozvoljeno upisati # F0F0F0 ili # f0f0f0.

Tipična boja koja se koristi u HTML-u izgleda ovako.

Ovdje je boja pozadine web stranice postavljena na # FA8E47. Haš simbol # ispred broja znači da je heksadecimalan. Prve dvije cifre (FA) definiraju crvenu komponentu boje, treće do četvrte cifre (8E) su zelene, a posljednje dvije cifre (47) su plave. Kao rezultat, dobijate ovu boju.

FA + 8E + 47 = FA8E47

Svaka od tri boje - crvena, zelena i plava - može poprimiti vrijednosti od 00 do FF, što rezultira 256 nijansi. Dakle, ukupan broj boja može biti 256x256x256 = 16.777.216 kombinacija. Model boja zasnovan na crvenoj, zelenoj i plavoj komponenti naziva se RGB (crvena, zelena, plava; crvena, zelena, plava). Ovaj model je aditivni (od dodati - dodati), u kojem se dodavanjem sve tri komponente dobija bela boja.

Da biste olakšali navigaciju u heksadecimalnim bojama, uzmite u obzir neka pravila.

  • Ako su vrijednosti komponenti boje iste (na primjer: # D6D6D6), tada ćete dobiti sivu nijansu. Što je broj veći, to je boja svjetlija, vrijednosti variraju od # 000000 (crno) do #FFFFFF (bijelo).
  • Jarko crvena boja se formira ako je crvena komponenta postavljena na maksimum (FF), a ostale komponente na nulu. Boja # FF0000 je najcrvenija moguća crvena nijansa. Isti je slučaj sa zelenom (# 00FF00) i plavom (# 0000FF).
  • Žuta (#FFFF00) se dobija mešanjem crvene sa zelenom. To je jasno vidljivo na krugu boja (slika 6.1), gdje su prikazane primarne boje (crvena, zelena, plava) i komplementarne ili komplementarne boje. Tu spadaju žuta, cijan i ljubičasta (takođe se zovu magenta). Općenito, bilo koja boja se može dobiti miješanjem obližnjih boja. Dakle, cijan (# 00FFFF) se dobija kombinacijom plave i zelene.

Rice. 6.1. Krug u boji

Heksadecimalne boje ne moraju se birati empirijski. U tu svrhu je prikladan grafički uređivač koji može raditi s različitim modelima boja, na primjer, Adobe Photoshop. Na sl. 6.2 prikazuje prozor za izbor boje u ovom programu, rezultujuća heksadecimalna vrijednost trenutne boje je ocrtana linijom. Možete ga kopirati i zalijepiti u svoj kod.

Rice. 6.2. Prozor za odabir boje u Photoshopu

Web boje

Ako postavite kvalitet boje monitora na 8 bita (256 boja), tada se ista boja može različito prikazati u različitim pretraživačima. To je zbog načina na koji se grafika prikazuje, gdje pretraživač radi sa svojom paletom i ne može prikazati boju koju nema u paleti. U ovom slučaju, boja se zamjenjuje kombinacijom piksela drugih, njoj bliskih boja koje imitiraju navedenu. Kako bi boja ostala nepromijenjena u različitim pretraživačima, uveli smo paletu takozvanih web boja. Web boje su takve boje, za svaku komponentu od kojih je - crvena, zelena i plava - postavljena jedna od šest vrijednosti - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Zagrade označavaju heksadecimalnu vrijednost ove komponente. Ukupan broj boja iz svih mogućih kombinacija daje 6x6x6 - 216 boja. Primjer web boje je # 33FF66.

Glavna karakteristika web boje je da se pojavljuje ista u svim pretraživačima. Trenutno je relevantnost web boja vrlo mala zbog povećanja kvaliteta monitora i proširenja njihovih mogućnosti.

Boje po imenu

Kako ne biste pamtili skup brojeva, umjesto toga možete koristiti nazive najčešće korištenih boja. Table 6.3 navodi imena popularnih naziva boja.

Tab. 6.3. Neki nazivi boja
Naziv boje Boja Opis Heksadecimalna vrijednost
crna Crno #000000
plava Plava # 0000FF
fuksija Svijetlo ljubičasta # FF00FF
siva Tamno siva #808080
zeleno Zeleno #008000
kreč Svijetlo zelena # 00FF00
maroon Tamno crvena #800000
mornarica Mornarsko plava #000080
maslina Maslina #808000
ljubičasta Tamno ljubičasta #800080
crvena Crveni # FF0000
srebro Svijetlo siva # C0C0C0
teal Plavo zeleno #008080
bijela Bijelo #FFFFFF
žuta Žuta # FFFF00

Nije bitno na koji način navedete boju - njenim imenom ili koristeći heksadecimalne brojeve. Ove metode su jednake u svom djelovanju. Primjer 6.1 pokazuje kako postaviti pozadinu i boju teksta web stranice.

Primjer 6.1. Boja pozadine i teksta

Boje

Primer teksta

U ovom primjeru, boja pozadine je postavljena pomoću atributa bgcolor oznake , i boju teksta kroz atribut teksta. Za promenu, atribut teksta je postavljen na heksadecimalni broj, a bgcolor je postavljen na ključnu reč rezervisanu teal.

Minecraft vara cveće, ili Minecraft kodovi formatiranje, omogućite bilo kojem igraču da dodaje cvijeće i formatira tekst na svaki način u Minecraftu. Kodovi boja& 0-9 - do & a-f. Dodajte ih ispred teksta. Poruke igrača mogu sadržavati kodove boja koji vam omogućavaju da dodate boju vašim prijedlozima.

Ampersand (&) iza kojeg slijedi heksadecimalni broj u porukama signalizira klijentu da promijeni boje prilikom prikazivanja teksta. Alternativno, tekst se može formatirati sa znakom & praćeno pismom. Možete dodati različite boje knjigama, komandnim blokovima, nazivu servera, opisu servera ( motd), u imenima svjetova, u tablicama, pa čak i u imena igrači.

Vrlo je lako formatirati svoj tekst u konfiguracijama ili u igri koristeći tablicu boja ispod. & r se koristi za brisanje svih kodova, tj. & mAAA & rBBB će biti prikazani kao AAA BBB.

Tabela kodova boja

Kod ImeTehnički nazivBoja simbolaBoja sjene simbola
RGBHexRGBHex
&0 Crnocrna0 0 0 000000 0 0 0 000000
&1 Mornarsko plavatamno plava0 0 170 0000AA0 0 42 00002A
&2 Tamno zelenatamno zelena0 170 0 00AA000 42 0 002A00
&3 Tamno plava zelenadark_aqua0 170 170 00AAAA0 42 42 002A2A
&4 Tamno crvenatamno crvena170 0 0 AA000042 0 0 2A0000
&5 Tamno ljubičastadark_purple170 0 170 AA00AA42 0 42 2A002A
&6 Zlatozlato255 170 0 FFAA0042 42 0 2A2A00
&7 sivasiva170 170 170 AAAAAA42 42 42 2A2A2A
&8 Tamno sivatamno siva85 85 85 555555 21 21 21 151515
&9 Plavaplava85 85 255 5555FF21 21 63 15153F
& a Zelenozeleno85 255 85 55FF5521 63 21 153F15
& b Plavo zelenoaqua85 255 255 55FFFF21 63 63 153F3F
& c Crvenicrvena255 85 85 FF555563 21 21 3F1515
& d Svijetlo ljubičastasvjetlo_ljubičasta255 85 255 FF55FF63 21 63 3F153F
& e Žutažuta255 255 85 FFFF5563 63 21 3F3F15
& f Bijelobijela255 255 255 Fffffff63 63 63 3F3F3F

Formatiranje tabele kodova

Ponekad ti treba podvuci, precrtati, highlight bilo koji tekst... Za to se koristi formatiranje teksta. Koristi se na isti način kao i boje (ispred teksta koji stavljamo kod npr. & lMinecraft = Minecraft.

Postoji nekoliko načina za predstavljanje boja u web dizajnu.

HEX je osnovni heksadecimalni sistem predstavljanja boja od 16. Za ovaj sistem se koriste arapske decimalne cifre od 0 do 9 i latinična slova od A do F za dopunu digitalnog broja do 16. Za web dizajn se uzima 16 osnovnih (ključnih) boja , takozvani heksadecimalni kod boje #RRGGBB, gdje je svaki par odgovoran za svoj udio u boji: RR - crvena, GG - zelena i BB - plava. Svaka frakcija boje se kreće od 00 do FF.

Druga dva prikaza boje u web dizajnu su: u obliku RGB (*, *, *), gdje je svaki dio boje "*" predstavljen decimalnim ciframa od 0 do 255 i nazivima boja na engleskom.

Prilikom kreiranja slike u boji, glavni problem je ispravan prikaz boja na različitim tipovima računara, monitora i pretraživača. Ako preglednik ne može ispravno prikazati boju, tada bira sličnu ili miješa nekoliko boja. A ponekad se može zamijeniti nekom potpuno drugom bojom.

sto 16 osnovnih boja koji se koriste u svim pretraživačima

Ime Boja Hex (RGB)
Aqua (morski val) # 00FFFF (000,255,255)
crna (crna) #000000 (000,000,000)
Plava # 0000FF (000,000,255)
fuksija (fuksin) # FF00FF (255,000,255)
siva (siva) #808080 (128,128,128)
zelena (zelena) #008000 (000,128,000)
Limeta (jarko zelena) # 00FF00 (000,255,000)
kestenjasta (kestenjasta) #800000 (128,000,000)
mornarsko plava (teget) #000080 (000,000,128)
maslina (maslina) #808000 (128,128,000)
Ljubičasta #800080 (128,000,128)
crvena (crvena) # FF0000 (255,000,000)
srebro (srebro) # C0C0C0 (192,192,192)
Teal (sivo-zelena) #008080 (000,128,128)
bijela (bijela) #FFFFFF (255,255,255)
žuta (žuta) # FFFF00 (255,255,000)

sto ljubičasta boje i nijanse

Ime Boja Hex (RGB)
magenta (magenta) #FFCBDB (255,203,219)
magenta (magenta) # FF0099 (255,000,153)
magenta (magenta) # F95A61 (249,090,097)
fuksija (fuksija) # FF00FF (255,000,255)
Movein (anilin ljubičasta) # EF0097 (239,000,151)
Losos roze (narandžasto roze) # FF91A4 (255,145,164)
Ceniz (nijansa magenta) # DE3163 (153,149,140)
Patlidžan Patlidžan (patlidžan) #990066 (153,000,132)
Rumenilo od lavande (ružičasta lavanda) & nbsp # FFF0F5 (255,240,245)
jorgovan (jorgovan) # C8A2C8 (200,162,200)
magenta (magenta) # FF008F (255,000,143)
orhideja (orhideja) # DA70D6 (218,112,214)
Crveno-ljubičasta # C71585 (199,021,133)
sangvinik (sangvinik) # 92000A (146,000,010)
čičak (nijansa magenta) # D8BFD8 (185,211,238)
Ljubičasto-patlidžan (nijansa ljubičaste) #991199 (153,017,153)
Rosa vivo (tamno ružičasta) # FF007F (255,000,127)
Lavanda-ruža (nijansa ljubičaste) # FBA0E3 (108,123,139)
Mountbatten pink # 997ABD (153,122,141)

sto siva boje i nijanse

Ime Boja Hex (RGB)
siva #808080 (128,128,128)
siva #bebebe (190,190,190)
(siva nijansa) #858585 (133,133,133)
Siva33 (Siva-33) #545454 (084,084,084)
(sivi škriljevci) #708090 (112,128,144)
(kvarc) # 99958s (153,149,140)
(Svijetlo siva) #bbbbbb (187,187,187)
(srebro) # c0c0c0 (192,192,192)
(sivo-bijelo) # f0f0f0 (240,240,240)
(Abdel-Kerimove brade) # e0e0e0 (224,224,224)
svjetlosiva (svijetlo siva) # d3d3d3 (211,211,211)
LightStateGray () #778899 (119,136,153)
StateGray-1 (Blijedo plavi različak1) # c6e2ff (198,226,255)
StateGray-2 (Blijedo plavi različak2) # b9d3ee (185,211,238)
StateGray3 () # 9fb6cd (159,182,205)
StateGray4 () # 6c7b8b (108,123,139)

Heksadecimalni brojevi se koriste za postavljanje boja. Heksadecimalni sistem, za razliku od decimalnog, zasnovan je, kao što mu ime kaže, 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 u heksadecimalu formiraju se kombinovanjem dva broja u jedan. Na primjer, 255 decimala jednako je FF heksadecimalno. Da bi se izbjegla zabuna u definiciji brojevnog sistema, hex simbol # stavlja se ispred heksadecimalnog broja, na primjer # 666999. Svaka od tri boje - crvena, zelena i plava - može se kretati od 00 do FF. Dakle, oznaka boje je podijeljena na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja - zelenu, a zadnja dva - plavu. Dozvoljeno je koristiti skraćeni oblik kao što je #rgb, gdje svaki znak treba udvostručiti. Dakle, #fe0 unos treba tretirati kao #ffee00.

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. Table 1 prikazuje nazive, heksadecimalni kod, RGB, HSL vrijednosti i opis.

Tab. 1. Nazivi boja
Ime Boja Kod RGB Hsl Opis
bijela #fffff ili #fff 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%) Crno
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%) Mornarsko 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%) Ljubičasta

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 odrediti boju pomoću decimalnih vrijednosti crvene, zelene i plave komponente. Svaka od tri komponente boje ima vrijednost od 0 do 255. Dozvoljeno je i postavljanje boje kao postotak, dok će 100% odgovarati broju 255. Prvo je navedena ključna riječ rgb, a zatim u zagradi komponente boje su označene, odvojene zarezima, na primjer rgb (255, 128, 128) ili rgb (100%, 50%, 50%).

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 kontrolira transparentnost elementa. Vrijednost 0 odgovara punoj transparentnosti, 1 neprozirnosti, a srednja vrijednost poput 0,5 poluprozirnosti.

RGBA je dodat u CSS3, tako da bi valjanost CSS koda trebala biti obavljena pomoću ove verzije. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke karakteristike mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color je potvrđena, ali boja dodana svojstvu background-a više ne. Istovremeno, pretraživači sasvim ispravno razumiju boju za oba svojstva.

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 vrednost boje na krugu boja (slika 1) i data je u stepenima. 0° je crvena, 120° je zelena, a 240° je plava. Vrijednost nijanse može biti u rasponu od 0 do 359.

Rice. 1. Točak boja

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

Svjetlost postavlja koliko je svijetla boja i prikazuje se u procentima od 0% do 100%. Niske vrijednosti čine boju tamnijom, a visoke vrijednosti posvjetljuju, ekstremne vrijednosti od 0% i 100% odgovaraju crno-bijeloj.

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 odgovara punoj transparentnosti, 1 neprozirnosti, a srednja vrijednost poput 0,5 poluprozirnosti.

Vrijednosti boja u formatima RGBA, HSL i HSLA dodane su u CSS3, stoga provjerite valjanost verzije kada koristite ove formate.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Boje

Upozorenje

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

Arrrrgh!

Rezultat ovog primjera prikazan je na sl. 2.

Rice. 2. Boje na web stranici

Top srodni članci