>> Upravljanje bojama
Heksadecimalne RGB vrijednosti boja
Metode opisivanja i obrade boje razlikuju se jedna od druge po tome za koju konačnu prezentaciju su namijenjene. Uporedimo, na primjer, prikaze boja za štampu i za kompjuterske monitore. U prvom slučaju uzima se osnova Bijelo boja papira na koji se naknadno nanose tri osnovne boje: plava, ljubičasta i žuta... Miješajući se jedna s drugom i sa bijelom bojom papira u različitim omjerima, ove tri osnovne boje daju različite nijanse boja, osim čiste crne, ili, u potpunom odsustvu boje, daju bijelu boju papira. Ako im dodamo crno, dobićemo CMYK- metoda prikazivanja boja, kada se tražena boja dobije oduzimanjem nedostajućih boja od bijele.
U drugom slučaju, uzima se osnova crna boja ekrana monitora, čija svaka ćelija svijetli u jednoj od tri boje: crvena-crveni, zeleno-zeleno i plava-plava. Tada, u potpunom odsustvu bilo kakvog sjaja, dobijamo čistu crnu boju ekrana, a bilo koja od traženih boja je postavljena omjerom svake od tri boje. U ovom slučaju dobijamo RGB- metod prenosa boja. Primarne boje mogu varirati od 0
prije 255
, ili od 0%
prije 100%
, ili se može predstaviti kao heksadecimalna vrijednost. Na slici ispod možete vidjeti rezultate miješanja primarnih boja.
Heksadecimalni sistem brojeva, za razliku od decimalnog broja, u svom nizu brojeva nema deset cifara, već šesnaest - otuda i naziv. Shodno tome, neponavljajuće varijante kombinacija dvije cifre mogu biti samo - 256 , za nastavak niza cifara nakon 9 pisma od A prije F stoga će red izgledati ovako -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
U ovom slučaju, boja je određena sa tri heksadecimalna broja, od kojih se svaki sastoji od dvije znamenke. Prvi broj određuje intenzitet crvena boje, prosječne zeleno, zadnja stvar- plava boje. Svi brojevi mogu imati vrijednosti u rasponu od 00 prije FF(od 0 do 255). Na primjer: zelena je data kao # 00FF00, crvena - kao # FF0000, plava - kao # 0000FF, bijela - kao #FFFFFF, potpuno odsustvo boje ili crne boje se daje kao #000000 .
U donjem obrascu možete postaviti bilo koje heksadecimalne vrijednosti za svaku od tri boje i vidjeti rezultat njihovog miješanja klikom na polje za izlaz.
Primjeri nekih heksadecimalnih RGB vrijednosti boja su gradacije crvene, plave i zelene.
| pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | # A00000 | #002000 | # 00A000 | #000020 | # 0000A0 | ||||||
| #300000 | # B00000 | #003000 | # 00B000 | #000030 | # 0000B0 | ||||||
| #400000 | # C00000 | #004000 | # 00C000 | #000040 | # 0000C0 | ||||||
| #500000 | # D00000 | #005000 | # 00D000 | #000050 | # 0000D0 | ||||||
| #600000 | # E00000 | #006000 | # 00E000 | #000060 | # 0000E0 | ||||||
| #700000 | # FF0000 | #007000 | # 00FF00 | #000070 | # 0000FF |
Određivanje boje pomoću literala niza
Radi lakšeg korišćenja, nekim bojama i njihovim kombinacijama dodeljena su imena koja prepoznaju svi pretraživači, a postalo je moguće postaviti mnoge od njih po imenu. U tabeli ispod su navedeni neki od naziva boja:
| pogled | ime | pogled | ime | pogled | ime | pogled | ime |
| Bijelo | Crveni | Narandžasta | Žuta | ||||
| Zeleno | Plava | Ljubičasta | Crno | ||||
| Aliceblue | Antiquewhite | Aqua | Akvamarin | ||||
| Azure | Bež | Bisque | Blanchedalmond | ||||
| Blueviolet | Brown | Burlywood | Cadetblue | ||||
| Chartreuse | Čokolada | Coral | Cornflowerblue | ||||
| Cornssilk | Crimson | Cyan | Tamno plava | ||||
| Darkcyan | Darkgoldenrod | Tamno siva | Tamno zelena | ||||
| Darkkhaki | Darkmagenta | Darkolivegreen | Darkorange | ||||
| Darkorchid | Tamno crvena | Darklosos | Darkseagreen | ||||
| Darkslateblue | Darkslategray | Tamnotirkizno | Darkviolet | ||||
| Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
| Vatrogasna cigla | Floralwhite | Forestgreen | Fuschia | ||||
| Gainsboro | Ghostwhite | Zlato | Goldenrod | ||||
| siva | Greenyellow | Honeydew | Hotpink | ||||
| Indianred | Indigo | Ivory | Kaki | ||||
| Lavanda | Lavenderblush | Lemonchiffon | Svijetlo plavo | ||||
| Lightcoral | Lightcyan | Lightcoldenrodyellow | Svijetlozelena | ||||
| Svijetlo siva | Lightpink | Lightlosos | Lightseagreen | ||||
| Lightskyblue | Lightslategray | Lightsteelblue | Svijetložuta | ||||
| Lime | Limegreen | Posteljina | Magenta | ||||
| Maroon | Mediumaquamarine | Srednje plava | Mediumorchid | ||||
| Srednje ljubičasta | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
| Srednje tirkizno | Srednjevioletred | Midnightblue | Mintcream | ||||
| Mistyrose | Navajowhite | mornarica | Oldlace | ||||
| Maslina | Oliverab | Orangered | Orhideja | ||||
| Palegoldenrod | Palegreen | Paleturquoise | Palevioletred | ||||
| Papayawhip | Peachpuff | Peru | Pink | ||||
| Šljiva | Powderblue | Rosybrown | Royalblue | ||||
| Saddlebrown | Seagreen | Školjka | Sienna | ||||
| Srebro | Nebo plavo | Slateblue | Slategray | ||||
| Snijeg | Springgreen | Steelblue | Tan | ||||
| Teal | Thistle | Paradajz | Tirkizna | ||||
| Violet | Pšenica | Whitesmoke | Yellowgreen |
Korištenje sigurnog birača boja
Nažalost, na različitim platformama, sa različitim sistemskim postavkama, ispravan prikaz boja predstavlja problem. Stvar je u tome što pretraživač uvek pokušava da prilagodi paletu boja dokumenta sistemskim postavkama i mogućnostima monitora, nezavisno mešanjem boja i njihovom zamenom. Kao rezultat toga, ponekad korisnik ne vidi baš ono što je web-master želio da mu pokaže. Izlaz iz ove situacije pronađen je u korišćenju palete, čija je svaka boja zagarantovana ista od strane svih pretraživača na različitim platformama. Ovo je tzv garantovano paleta, koja se još naziva sigurno paleta. Ova paleta uključuje boje čije komponente boje imaju sljedeće vrijednosti: 00 ,33 ,66 ,99 , CC,FF, u svim mogućim 216 njihove kombinacije.
| pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod |
| Fffffff | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
CSS kodovi boja se koriste za određivanje boje. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje bilo za prednji plan elementa (na primjer, boja teksta, boja veze) ili za pozadinu elementa (boja pozadine, boja bloka). Mogu se koristiti i za promjenu boje dugmeta, ivice, markera, lebdenja i drugih dekorativnih efekata.
Možete postaviti vlastite vrijednosti boja u različitim formatima. Sljedeća tabela navodi sve moguće formate:
Navedeni formati su detaljnije opisani u nastavku.
CSS boje - heksadecimalni kodovi
Heksadecimalni kod boja je šestocifreni prikaz boje. Prve dvije cifre (RR) predstavljaju crvenu vrijednost, sljedeće dvije predstavljaju zelenu vrijednost (GG), a posljednje dvije predstavljaju plavu vrijednost (BB).
CSS boje - kratki heksadecimalni kodovi
Kratki heksadecimalni kod boje je kraći oblik šestocifrenih zapisa. U ovom formatu, svaka cifra se ponavlja kako bi se dobila ekvivalentna šestocifrena vrijednost boje. Na primjer: # 0F0 postaje # 00FF00.
Heksadecimalna vrijednost može se uzeti iz bilo kojeg grafičkog softvera kao što je Adobe Photoshop, Core Draw, itd.
Svakom heksadecimalnom kodu boje u CSS-u prethodiće heš znak "#". Slijede primjeri korištenja heksadecimalne notacije.
CSS boje - RGB vrijednosti
RGB vrijednost je kod boje, koji se postavlja pomoću svojstva rgb (). Ovo svojstvo uzima tri vrijednosti, po jednu za crvenu, zelenu i plavu. Vrijednost može biti cijeli broj, od 0 do 255, ili postotak.
Bilješka: ne podržavaju svi pretraživači svojstvo boje rgb (), pa se ne preporučuje da ga koristite.
Ispod je primjer koji prikazuje više boja koristeći RGB vrijednosti.
Generator kodova boja
Možete kreirati milione kodova boja koristeći našu uslugu.
Sigurne boje pretraživača
Ispod je tabela od 216 boja koje su najsigurnije i najzavisnije od računara. Ove CSS boje se kreću od 000000 do FFFFFF heksadecimalno. Oni su bezbedni za upotrebu jer obezbeđuju da svi računari ispravno prikazuju boju kada rade sa paletom od 256 boja.
| CSS "sigurna" tabela boja | |||||
| #000000 | #000033 | #000066 | #000099 | # 0000CC | # 0000FF |
| #003300 | #003333 | #003366 | #003399 | # 0033CC | # 0033FF |
| #006600 | #006633 | #006666 | #006699 | # 0066CC | # 0066FF |
| #009900 | #009933 | #009966 | #009999 | # 0099CC | # 0099FF |
| # 00CC00 | # 00CC33 | # 00CC66 | # 00CC99 | # 00CCCC | # 00CCFF |
| # 00FF00 | # 00FF33 | # 00FF66 | # 00FF99 | # 00FFCC | # 00FFFF |
| #330000 | #330033 | #330066 | #330099 | # 3300CC | # 3300FF |
| #333300 | #333333 | #333366 | #333399 | # 3333CC | # 3333FF |
| #336600 | #336633 | #336666 | #336699 | # 3366CC | # 3366FF |
| #339900 | #339933 | #339966 | #339999 | # 3399CC | # 3399FF |
| # 33CC00 | # 33CC33 | # 33CC66 | # 33CC99 | # 33CCCC | # 33CCFF |
| # 33FF00 | # 33FF33 | # 33FF66 | # 33FF99 | # 33FFCC | # 33FFFF |
| #660000 | #660033 | #660066 | #660099 | # 6600CC | # 6600FF |
| #663300 | #663333 | #663366 | #663399 | # 6633CC | # 6633FF |
| #666600 | #666633 | #666666 | #666699 | # 6666CC | # 6666FF |
| #669900 | #669933 | #669966 | #669999 | # 6699CC | # 6699FF |
| # 66CC00 | # 66CC33 | # 66CC66 | # 66CC99 | # 66CCCC | # 66CCFF |
| # 66FF00 | # 66FF33 | # 66FF66 | # 66FF99 | # 66FFCC | # 66FFFF |
| #990000 | #990033 | #990066 | #990099 | # 9900CC | # 9900FF |
| #993300 | #993333 | #993366 | #993399 | # 9933CC | # 9933FF |
| #996600 | #996633 | #996666 | #996699 | # 9966CC | # 9966FF |
| #999900 | #999933 | #999966 | #999999 | # 9999CC | # 9999FF |
| # 99CC00 | # 99CC33 | # 99CC66 | # 99CC99 | # 99CCCC | # 99CCFF |
| # 99FF00 | # 99FF33 | # 99FF66 | # 99FF99 | # 99FFCC | # 99FFFF |
| # CC0000 | # CC0033 | # CC0066 | # CC0099 | # CC00CC | # CC00FF |
| # CC3300 | # CC3333 | # CC3366 | # CC3399 | # CC33CC | # CC33FF |
| # CC6600 | # CC6633 | # CC6666 | # CC6699 | # CC66CC | # CC66FF |
| # CC9900 | # CC9933 | # CC9966 | # CC9999 | # CC99CC | # CC99FF |
| # CCCC00 | # CCCC33 | # CCCC66 | # CCCC99 | #CCCCCC | #CCCCFF |
| # CCFF00 | # CCFF33 | # CCFF66 | # CCFF99 | #CCFFCC | #CCFFFF |
| # FF0000 | # FF0033 | # FF0066 | # FF0099 | # FF00CC | # FF00FF |
| # FF3300 | # FF3333 | # FF3366 | # FF3399 | # FF33CC | # FF33FF |
| # FF6600 | # FF6633 | # FF6666 | # FF6699 | # FF66CC | # FF66FF |
| # FF9900 | # FF9933 | # FF9966 | # FF9999 | # FF99CC | # FF99FF |
| # FFCC00 | # FFCC33 | # FFCC66 | # FFCC99 | #FFCCCC | #FFCCFF |
| # FFFF00 | # FFFF33 | # FFFF66 | # FFFF99 | #FFFFCC | #FFFFFF |
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 sistemu brojeva, 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, boja je 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 se jasno vidi 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 one boje, za čiju komponentu - crvenu, zelenu i plavu - postavljena je 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.
| 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
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.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.
| Ime | Boja | Šifra | 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%) | 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 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
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!
Rezultat ovog primjera prikazan je na sl. 2.
Rice. 2. Boje na web stranici
HEX / HTML
HEX boja nije ništa drugo do RGB heksadecimalna reprezentacija.
Boje su predstavljene kao tri grupe heksadecimalnih cifara, pri čemu je svaka grupa odgovorna za svoju boju: # 112233, gdje je 11 crvena, 22 zelena, 33 plava. Sve vrijednosti moraju biti između 00 i FF.
U mnogim aplikacijama dozvoljen je skraćeni oblik zapisa za heksadecimalne boje. Ako svaka od tri grupe sadrži iste znakove, na primjer # 112233, onda se mogu napisati kao # 123.
- h1 (boja: # ff0000;) / * crvena * /
- h2 (boja: # 00ff00;) / * zelena * /
- h3 (boja: # 0000ff;) / * plava * /
- h4 (boja: # 00f;) / * ista plava, skraćenica * /
RGB
RGB (crvena, zelena, plava) prostor boja sastoji se od svih mogućih boja koje se mogu dobiti miješanjem crvene, zelene i plave. Ovaj model je popularan u fotografiji, televiziji i kompjuterskoj grafici.
RGB vrijednosti su specificirane kao cijeli broj od 0 do 255. Na primjer, rgb (0,0,255) se prikazuje kao plava jer je plavi parametar postavljen na najveću vrijednost (255), a ostali su postavljeni na 0.
Neke aplikacije (posebno web pretraživači) podržavaju procentualno pisanje RGB vrijednosti (0% do 100%).
- h1 (boja: rgb (255, 0, 0);) / * crvena * /
- h2 (boja: rgb (0, 255, 0);) / * zelena * /
- h3 (boja: rgb (0, 0, 255);) / * plava * /
- h4 (boja: rgb (0%, 0%, 100%);) / * ista plava, postotak pisanja * /
RGB vrijednosti boja su podržane u svim glavnim pretraživačima.
RGBA
Nedavno su moderni pretraživači naučili da rade sa RGBA modelom boja - RGB ekstenzijom sa podrškom za alfa kanal koji određuje neprozirnost objekta.
Vrijednost RGBA boje je specificirana kao: rgba (crvena, zelena, plava, alfa). Alfa je broj u rasponu od 0,0 (potpuno transparentan) do 1,0 (potpuno neproziran).
- h1 (boja: rgb (0, 0, 255);) / * plava u normalnom RGB * /
- h2 (boja: rgba (0, 0, 255, 1);) / * ista plava u RGBA, jer neprozirnost: 100% * /
- h3 (boja: rgba (0, 0, 255, 0.5);) / * neprozirnost: 50% * /
- h4 (boja: rgba (0, 0, 255, .155);) / * neprozirnost: 15,5% * /
- h5 (boja: rgba (0, 0, 255, 0);) / * potpuno transparentan * /
RGBA je podržan u IE9 +, Firefox 3+, Chrome, Safari i Opera 10+.
Hsl
HSL model u boji je cilindrični prikaz RGB modela. HSL predstavlja boje na intuitivniji i razumljiviji način od tipičnog RGB-a. Model se često koristi u grafičkim aplikacijama, u biračima boja i za analizu slike.
HSL je skraćenica za Hue, Saturation, Lightness/Luminance, ne treba se brkati sa svjetlinom.
Nijansa postavlja poziciju boje na krugu boja (od 0 do 360). Zasićenost je postotak zasićenja (0% do 100%). Lakoća je procenat lakoće (0% do 100%).
- h1 (boja: hsl (120, 100%, 50%);) / * zelena * /
- h2 (boja: hsl (120, 100%, 75%);) / * svijetlo zelena * /
- h3 (boja: hsl (120, 100%, 25%);) / * tamno zelena * /
- h4 (boja: hsl (120, 60%, 70%);) / * pastelno zelena * /
HSL je podržan u IE9 +, Firefoxu, Chromeu, Safariju i Opera 10+.
HSLA
Slično RGB / RGBA, HSL ima HSLA način rada s alfa kanalom koji označava neprozirnost objekta.
HSLA vrijednost boje je data kao: hsla (nijansa, zasićenost, svjetlina, alfa). Alfa je broj u rasponu od 0,0 (potpuno transparentan) do 1,0 (potpuno neproziran).
- h1 (boja: hsl (120, 100%, 50%);) / * zelena u normalnom HSL * /
- h2 (boja: hsla (120, 100%, 50%, 1);) / * ista zelena u HSLA, jer neprozirnost: 100% * /
- h3 (boja: hsla (120, 100%, 50%, 0,5);) / * neprozirnost: 50% * /
- h4 (boja: hsla (120, 100%, 50%, .155);) / * neprozirnost: 15,5% * /
- h5 (boja: hsla (120, 100%, 50%, 0);) / * potpuno transparentan * /
CMYK
CMYK model boja se često povezuje sa štampanjem i štampanjem u boji. CMYK (za razliku od RGB) je subtraktivan model, što znači da su veće vrijednosti povezane s tamnijim bojama.
Boje su određene omjerom Cyan, Magenta, Yellow, uz dodatak crne (Key / crna).
Svaki od brojeva koji definiraju boju u CMYK-u predstavlja postotak mastila date boje koji čini kombinaciju boja, odnosno veličinu rasterske tačke prikazane na fotoseteru na filmu date boje (ili direktno na štamparska ploča u slučaju CTP).
Na primjer, da biste dobili boju PANTONE 7526, pomiješajte 9 dijelova cijan, 83 magenta, 100 žutih i 46 crnih. To se može naznačiti na sljedeći način: (9,83,100,46). Ponekad koriste takve oznake: C9M83Y100K46, ili (9%, 83%, 100%, 46%), ili (0,09 / 0,83 / 1,0 / 0,46).
HSB / HSV
HSB (također poznat kao HSV) je sličan HSL-u, ali su to dva modela različitih boja. Oba su zasnovana na cilindričnoj geometriji, ali je HSB / HSV baziran na modelu "hexcone", dok je HSL zasnovan na "bi-hexcone" modelu. Umjetnici često radije koriste ovaj model, općenito je prihvaćeno da je HSB / HSV uređaj bliži prirodnoj percepciji boja. Konkretno, model boja HSB se koristi u Adobe Photoshopu.
HSB / HSV je skraćenica za Hue, Saturation, Brightness / Value.
Nijansa postavlja poziciju boje na krugu boja (od 0 do 360). Zasićenost je postotak zasićenja (0% do 100%). Svjetlina je postotak svjetline (0% do 100%).
XYZ
Model boja XYZ (CIE 1931 XYZ) je čisto matematički prostor. Za razliku od RGB, CMYK i drugih modela, u XYZ, glavne komponente su "imaginarne", to jest, ne možete povezati X, Y i Z ni sa jednim skupom boja za miješanje. XYZ je glavni model za gotovo sve druge modele boja koji se koriste u tehničkim poljima.
LAB
LAB model boja (CIELAB, "CIE 1976 L * a * b *") se izračunava iz CIE XYZ prostora. Prilikom razvoja Lab-a cilj je bio stvoriti prostor boja u kojem će promjena boje biti linearnija sa stanovišta ljudske percepcije (u poređenju sa XYZ), odnosno da ista promjena vrijednosti koordinata boje u različite regije prostora boja proizvode isti osjećaj promjene boje.
