Kodovi boja u CSS-u se koriste za specifikaciju boja. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje za prednji plan elementa (npr. tekst, boja veze) ili pozadinu elementa (pozadina, boja bloka). Također se mogu koristiti za promjenu boje gumba, ivica, markera, lebdenja i drugih dekorativnih efekata.
Možete postaviti svoje vrijednosti boja u različitim formatima. Sljedeća tabela navodi sve moguće formate:
Ovi formati su detaljnije opisani u nastavku.
CSS Boje - Hex kodovi
Heksadecimalni kod boja je šestocifreni prikaz boja. Prve dvije cifre (RR) su crvena vrijednost, sljedeće dvije su zelena vrijednost (GG), a posljednje dvije su plava vrijednost (BB).
CSS boje - kratki heksadecimalni kodovi
Kratki heksadecimalni kod boje je kraći oblik notacije od šest znakova. 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 upotrebe heksadecimalne notacije.
CSS boje - RGB vrijednosti
RGB vrijednost je kod boje koji se postavlja pomoću svojstva rgb(). Ovo svojstvo ima 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
Pomoću naše usluge možete kreirati milione kodova boja.
Sigurne boje pretraživača
Ispod je tabela od 216 boja koje su najsigurnije i nezavisne od računara. Ove boje u CSS-u se kreću od 000000 do FFFFFF hex koda. Oni su bezbedni za upotrebu jer obezbeđuju da će svi računari ispravno prikazati boju kada rade sa paletom od 256 boja.
Tabela "sigurnih" boja u CSS-u | |||||
#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 |
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 u heksadecimalnom sistemu formiraju se kombinovanjem dva broja u jedan. Na primjer, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalnom. 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.
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.
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%).
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.
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.
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.
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.
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.
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
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!
Rezultat ovog primjera prikazan je na sl. 2.
Rice. 2. Boje na web stranici
U HTML-u, boja se može specificirati na tri načina:
Postavljanje boje u HTML-u prema njenom imenu
Neke boje se mogu specificirati njihovim imenom, koristeći naziv boje na engleskom kao vrijednost. Najčešće ključne riječi: crna (crna), bijela (bijela), crvena (crvena), zelena (zelena), plava (plava) itd.:
Boja teksta - crvena
Najpopularnije boje standarda World Wide Web Consortium (W3C) su:
Boja | Ime | Boja | Ime | Boja | Ime | Boja | Ime |
---|---|---|---|---|---|---|---|
Crna | siva | Srebro | Bijelo | ||||
Žuta | kreč | Aqua | Fuksija | ||||
Crveni | Zeleno | Plava | Ljubičasta | ||||
maroon | Maslina | mornarica | Teal |
Primjer korištenja različitih naziva boja:
Primjer: postavljanje boje prema njenom imenu
Zaglavlje na crvenoj pozadini
Zaglavlje na narandžastoj pozadini
Zaglavlje na krečnoj pozadini
Bijeli tekst na plavoj pozadini
Zaglavlje na crvenoj pozadini
Zaglavlje na narandžastoj pozadini
Zaglavlje na krečnoj pozadini
Bijeli tekst na plavoj pozadini
Određivanje boje pomoću RGB
Kada se na monitoru prikazuju različite boje, kao osnova se uzima RGB paleta. Bilo koja boja se dobija mešanjem tri glavne: R - crveno, G - zelena (zelena), B - plava (plava). Svjetlina svake boje je data jednim bajtom i stoga može imati vrijednosti od 0 do 255. Na primjer, RGB (255,0,0) se prikazuje kao crvena jer je crvena postavljena na najveću vrijednost (255) i drugi su postavljeni na 0 Možete također postaviti boju u postocima. Svaki od parametara označava nivo svjetline odgovarajuće boje. Na primjer: vrijednosti rgb(127, 255, 127) i rgb(50%, 100%, 50%) će postaviti istu zelenu boju srednje zasićenosti:
Primjer: Određivanje boje pomoću RGB-a
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Postavite boju po heksadecimalnoj vrijednosti
Vrijednosti R G B također se može specificirati korištenjem heksadecimalnih (HEX) vrijednosti boja u obliku: #RRGGBB gdje su RR (crvena), GG (zelena) i BB (plava) heksadecimalne vrijednosti od 00 do FF (isto kao decimalna 0- 255) . Heksadecimalni sistem, za razliku od decimalnog sistema, zasnovan je, kao što mu ime govori, na broju 16. Heksadecimalni sistem koristi sledeće znakove: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Ovdje su brojevi od 10 do 15 zamijenjeni latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sistemu su unija dva znaka u jednu vrijednost. Na primjer, najveći broj 255 u decimalnom obliku odgovara najvećem FF u heksadecimalnom. Za razliku od decimalnog sistema, heksadecimalnom broju prethodi znak funte. # , na primjer, #FF0000 se prikazuje kao crvena jer je crvena postavljena na najvišu vrijednost (FF), a druge boje su postavljene na minimalnu vrijednost (00). Znakovi nakon heš simbola # može se pisati i velikim i malim slovima. Heksadecimalni sistem vam omogućava da koristite skraćeni oblik #rgb, gde je svaki znak jednak dva puta. Dakle, unos #f7O treba smatrati #ff7700.
Primjer: Boja HEX
crvena: #FF0000
zeleno: #00FF00
plava: #0000FF
crvena: #FF0000
zeleno: #00FF00
plava: #0000FF
crvena+zelena=žuta: #FFFF00
crvena+plava=ljubičasta: #FF00FF
zeleno+plavo=cijan: #00FFFF
Lista najčešće korištenih boja (naziv, HEX i RGB):
engleski naziv | Rusko ime | Uzorak | HEX | RGB | ||
---|---|---|---|---|---|---|
Amarant | amarant | #E52B50 | 229 | 43 | 80 | |
Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
Aqua | plavo zeleno | #00FFFF | 0 | 255 | 255 | |
Azure | Azure | #007FFF | 0 | 127 | 255 | |
Crna | Crna | #000000 | 0 | 0 | 0 | |
Plava | Plava | #0000FF | 0 | 0 | 255 | |
Bondi Blue | Plaža Bondi | #0095B6 | 0 | 149 | 182 | |
Brass | Brass | #B5A642 | 181 | 166 | 66 | |
Brown | Brown | #964B00 | 150 | 75 | 0 | |
Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
tamno proljetno zelena | Tamno proljetno zeleno | #177245 | 23 | 114 | 69 | |
Emerald | Emerald | #50C878 | 80 | 200 | 120 | |
Patlidžan | Patlidžan | #990066 | 153 | 0 | 102 | |
Fuksija | Fuksija | #FF00FF | 255 | 0 | 255 | |
Zlato | Zlato | #FFD700 | 250 | 215 | 0 | |
siva | Siva | #808080 | 128 | 128 | 128 | |
Zeleno | Zeleno | #00FF00 | 0 | 255 | 0 | |
Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
Jade | Jade | #00A86B | 0 | 168 | 107 | |
kreč | Lime | #CCFF00 | 204 | 255 | 0 | |
Malahit | Malahit | #0BDA51 | 11 | 218 | 81 | |
mornarica | Tamno plava | #000080 | 0 | 0 | 128 | |
Oker | Oker | #CC7722 | 204 | 119 | 34 | |
Maslina | Maslina | #808000 | 128 | 128 | 0 | |
Narandžasta | Narandžasta | #FFA500 | 255 | 165 | 0 | |
breskva | Breskva | #FFE5B4 | 255 | 229 | 180 | |
Tikva | Tikva | #FF7518 | 255 | 117 | 24 | |
Ljubičasta | Violet | #800080 | 128 | 0 | 128 | |
Crveni | Crveni | #FF0000 | 255 | 0 | 0 | |
Šafran | Šafran | #F4C430 | 244 | 196 | 48 | |
morsko zeleno | zeleno more | #2E8B57 | 46 | 139 | 87 | |
Močvarno zeleno | Bolotny | #ACB78E | 172 | 183 | 142 | |
Teal | plavo zeleno | #008080 | 0 | 128 | 128 | |
Ultramarin | ultramarin | #120A8F | 18 | 10 | 143 | |
ljubičasta | Violet | #8B00FF | 139 | 0 | 255 | |
Žuta | Žuta | #FFFF00 | 255 | 255 | 0 |
Kodovi boja (pozadina) prema zasićenosti i nijansama.