CSS modul boja jasno opisuje vrijednosti koje omogućuju autorima da specificiraju boju i jasnoću html elemenata, kao i vrijednosti boja.
Boja snage
1. Prioritetne boje: boja svjetline
Autoritet postavlja boju fonta koristeći različite sustave prijenosa boja. Snaga se odnosi na boju elementa teksta. Osim toga, koristi se za pružanje potencijalnog neizravnog značenja (currentColor) za sve druge moći koje stvaraju značenje za boju.
Snaga opada.
2. Značaj boje
2.1. Glavne ključne riječi
Popis glavnih ključnih riječi uključuje sljedeće vrijednosti:
| Ime | HEX | RGB | Kolir |
|---|---|---|---|
| crno | #000000 | 0,0,0 | |
| srebro | #C0C0C0 | 192,192,192 | |
| siva | #808080 | 128,128,128 | |
| bijela | #FFFFFF | 255,255,255 | |
| kesten | #800000 | 128,0,0 | |
| Crvena | #FF0000 | 255,0,0 | |
| ljubičasta | #800080 | 128,0,128 | |
| fuksija | #FF00FF | 255,0,255 | |
| zelena | #008000 | 0,128,0 | |
| vapno | #00FF00 | 0,255,0 | |
| maslina | #808000 | 128,128,0 | |
| žuta boja | #FFFF00 | 255,255,0 | |
| mornarica | #000080 | 0,0,128 | |
| plava | #0000FF | 0,0,255 | |
| plavozelena | #008080 | 0,128,128 | |
| aqua | #00FFFF | 0,255,255 |
Nazivi boja ne razlikuju velika i mala slova.
Sintaksa
Boja: plavozelena;
2.2. Brojčane vrijednosti boja
2.2.1. Colori modeli RGB
RGB format vrijednosti u heksadecimalnom formatu je znak # iza kojeg slijede tri ili šest heksadecimalnih znakova. Troznamenkasti RGB zapis #rgb pretvara se u šesteroznamenkasti oblik #rrggbb kopiranjem brojeva, a ne dodavanjem nula. Na primjer, #fb0 proširuje se u #ffbb00. To jamči da se bijeli #ffffff može koristiti kao indikacija u kratkom unosu #ffff i uklanja sve razlike ovisno o boji zaslona.
RGB format vrijednosti funkcionalne notacije je rgb (praćen odvojenim popisom od tri numeričke vrijednosti (ili tri cjelobrojne vrijednosti, ili tri stotinke vrijednosti), nakon čega slijedi simbol). Vrijednost cijelog broja 255 odgovara 100% i F ili FF u heksadecimalnom zapisu:
RGB(255,255,255) = RGB(100%, 100%, 100%) = #FFF
Uz numeričke vrijednosti dopušteni su prazni znakovi.
Web dizajn ima brojne načine predstavljanja boje
HEX je heksadecimalni sustav za predstavljanje boja temeljen na 16. Za ovaj sustav, arapske desetice od 0 do 9 i latinična slova od A do F koriste se za povećanje digitalnog broja do 16. Za web dizajn, 16 glavnih (ključnih) boje se uzimaju, dakle rang šesnaest. Šifra boje je #RRGGBB, gdje svaki par predstavlja boju za svoj dio: RR – crvena, GG – zelena i BB – plava. Boja kože se kreće od 00 do FF.
Dvije druge manifestacije boje u web dizajnu su: u obliku RGB(*,*,*), gdje je “*” dio boje predstavljen desecima znamenki od 0 do 255 i nazivima boja u Engleski.
Kod izrade slike u boji glavni problem je ispravan prijenos boja na različite vrste računala, monitora i preglednika. Ako preglednik ne može ispravno prikazati boju, odabire sličnu ili miješa više boja. Ili je možete zamijeniti potpuno drugom bojom.
Stol 16 glavnih boja, koji se koriste u svim preglednicima
| Ime | Kolir | Hex | (RGB) |
| Aqua (morska hvilya) | #00FFFF | (000,255,255) | |
| Crno | #000000 | (000,000,000) | |
| Plava | #0000FF | (000,000,255) | |
| Fuksija (magenta) | #FF00FF | (255,000,255) | |
| Siva (serija) | #808080 | (128,128,128) | |
| zelena | #008000 | (000,128,000) | |
| Limeta (svijetlo zelena) | #00FF00 | (000,255,000) | |
| Kestenjasta (tamno bordo) | #800000 | (128,000,000) | |
| Tamnoplava (tamnoplava) | #000080 | (000,000,128) | |
| Maslina | #808000 | (128,128,000) | |
| Ljubičasta | #800080 | (128,000,128) | |
| Crveno (crveno) | #FF0000 | (255,000,000) | |
| Srebro | #C0C0C0 | (192,192,192) | |
| Teal (sivo-zelena) | #008080 | (000,128,128) | |
| Bijela | #FFFFFF | (255,255,255) | |
| žuta (zhovtiy) | #FFFF00 | (255,255,000) |
Stol ljubičasta boje i boje
| Ime | Kolir | Hex | (RGB) |
| Magenta (ljubičasta) | #FFCBDB | (255,203,219) | |
| Magenta (ljubičasta) | #FF0099 | (255,000,153) | |
| magenta (magenta) | #F95A61 | (249,090,097) | |
| Fuksija (fuksija) | #FF00FF | (255,000,255) | |
| Movein (anilin ljubičasta) | #EF0097 | (239,000,151) | |
| Ružičasta boja lososa (narančasta-hrđa) | #FF91A4 | (255,145,164) | |
| Cenise (nijansa ljubičaste) | #DE3163 | (153,149,140) | |
| Patlidžan (patlidžan) | #990066 | (153,000,132) | |
| Rumenilo boje lavande (ružičasto-lavande) | #FFF0F5 | (255,240,245) | |
| jorgovan (boozkoviy) | #C8A2C8 | (200,162,200) | |
| magenta (magenta) | #FF008F | (255,000,143) | |
| Orhideja (orhideja) | #DA70D6 | (218,112,214) | |
| Crveno-ljubičasta (ljubičasto-crvena) | #C71585 | (199,021,133) | |
| sangvinik | #92000A | (146,000,010) | |
| Čičak (nijansa ljubičaste) | #D8BFD8 | (185,211,238) | |
| Ljubičasto-patlidžan (nijansa ljubičaste) | #991199 | (153,017,153) | |
| Rosa vivo (inkubirani rožnjak) | #FF007F | (255,000,127) | |
| Lavanda-ruža (nijansa ljubičaste) | #FBA0E3 | (108,123,139) | |
| Mountbatten ružičasta | #997ABD | (153,122,141) |
Stol siva boje i boje
| Ime | Kolir | Hex | (RGB) |
| siva (Sirija) | #808080 | (128,128,128) | |
| siva (Sirija) | #bebebe | (190,190,190) | |
| (Siry-vidtinok) | #858585 | (133,133,133) | |
| Gray33 (Syriy-33) | #545454 | (084,084,084) | |
| (Sirogo škriljevac) | #708090 | (112,128,144) | |
| (kvarcni) | #99958s | (153,149,140) | |
| (Svjetlo Siriy) | #bbbbbb | (187,187,187) | |
| (Sriblyasty) | #c0c0c0 | (192,192,192) | |
| (Siro-bijelo) | #f0f0f0 | (240,240,240) | |
| (Borody Abdel-Kerim) | #e0e0e0 | (224,224,224) | |
| LightGray (svijetlo siva) | #d3d3d3 | (211,211,211) | |
| LightStateGray() | #778899 | (119,136,153) | |
| StateGray-1 (Blído-različak1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (Blído-različak plava2) | #b9d3ee | (185,211,238) | |
| StateGray3() | #9fb6cd | (159,182,205) | |
| StateGray4() | #6c7b8b | (108,123,139) |
Na ovoj stranici nalazi se tablica s ključnim riječima koje se mogu koristiti za dodjeljivanje boja u jezicima web-programera kao što su: HTML, CSS, JavaScript, Flash itd.
U starim specifikacijama koncern WC3 imao je propisano samo 16 ključnih riječi, uz koje su ugrađene boje u HTML i CSS. U daljnjim, aktualnijim specifikacijama, dodano je još 130 ključnih riječi za određivanje naziva boja. Ovdje je tablica koja prikazuje nazive boja, heksadecimalne i RGB kodove koje predstavljaju.
U skladu s CSS pravilima, nazivi boja ne razlikuju velika i mala slova. Unosi za boje IndianRed i indianred jednaki su.
Također je vrijedno napomenuti da od 146 ključnih riječi u tablici zapravo ima manje boja. To znači da ove ključne riječi znače istu boju. Tako nazivi Gray i Gray označavaju 50-hex boju s kodom #808080, a riječ Magenta je sinonim za HTML boju Fuchsia, što odgovara hex kodu #FF00FF. Također sinonim za riječi Aqua i Cyan, smradovi odgovaraju kodu #00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Za postavljanje boja koriste se brojevi u heksadecimalnim kodovima. Šesnaesti sustav, umjesto desetog sustava, temelji se, kako mu samo ime kaže, na broju 16. Pojavit će se brojevi: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Brojevi od 10 do 15 zamijenjeni su latiničnim slovima. Brojevi veći od 15 u šesnaestinom sustavu nastaju spajanjem dva broja u jedan. Na primjer, broj 255 u desetom sustavu potvrđuje broj FF u šesnaestom sustavu. Kako biste izbjegli zabunu s određenim sustavom brojeva, stavite simbol # ispred šesnaestog broja, na primjer #666999. Skinovi iz tri boje - crvena, zelena i plava - mogu imati vrijednosti od 00 do FF. Dakle, oznaka boje podijeljena je u tri skladišta #rrggbb, gdje prva dva simbola označavaju crvenu komponentu boje, srednja dva - zelenu, a preostala dva - plavu. Dopušteno je koristiti skraćeni oblik #rgb, gdje se može dodati simbol. Dakle, zapis #fe0 trag se vrednuje kao #ffee00.
Za ime
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Preglednici podržavaju različite boje iza svojih imena. U stolu 1 naznačeno je ime, heksadecimalni kod, vrijednosti u RGB, HSL formatu i opis.
| Ja sam | Kolir | Kodirati | RGB | HSL | Opis |
|---|---|---|---|---|---|
| bijela | #ffffff ili #fff | rgb(255,255,255) | hsl(0,0%,100%) | Bily | |
| srebro | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Sirija | |
| siva | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Tamno sivo | |
| crno | #000000 ili #000 | rgb(0,0,0) | hsl(0,0%,0%) | Čorni | |
| kesten | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Tamno crvena | |
| Crvena | #ff0000 ili #f00 | rgb(255,0,0) | hsl(0,100%,50%) | crveno zlato | |
| naranča | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | naranča | |
| žuta boja | #ffff00 ili #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Zhovtiy | |
| maslina | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Maslina | |
| vapno | #00ff00 ili #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Svijetlo zelena | |
| zelena | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Zeleni | |
| aqua | #00ffff ili #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blakitni | |
| 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 | |
| plavozelena | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Plavo zeleno | |
| fuksija | #ff00ff ili #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Rozheviy | |
| ljubičasta | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | ljubičica |
Za dodatnu pomoć RGB
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Možete odrediti boju, vikory i crvene, zelene i plave vrijednosti u desetinkama. Koža s tri komponente boje poprima vrijednosti od 0 do 255. Također je moguće postaviti boju za visokokvalitetnu boju, koja će biti 100% konzistentna s brojem 255. Ključna riječ rgb je inicijalno navedena, a zatim za krakove, kroz koje se čini da su komponente boja, na primjer rgb(255, 128, 128) ili RGB (100%, 50%, 50%).
RGBA
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format RGBA sličan je sintaksi RGB-u, ali uključuje alfa kanal koji određuje jasnoću elementa. Vrijednosti 0 označavaju povećanu jasnoću, 1 – nedostatak jasnoće, a srednje vrijednosti na razini 0,5 – potpunu jasnoću.
RGBA proširenja za CSS3 zahtijevaju provjeru valjanosti samog CSS koda za tu verziju. Imajte na umu da je standard CSS3 još uvijek u razvoju i može biti podložan promjenama. Na primjer, boja RGB formata dodataka pikselu boje pozadine mora proći provjeru valjanosti, ali više nema dodataka pikselu pozadine. U ovom slučaju, preglednici općenito ispravno razumiju boju za ovu i drugu snagu.
HSL
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL format je dobio ime po prvim slovima Hue, Saturate i Lightness. Boja je ista kao boja na stupu (slika 1) i navedena je u stupnjevima. 0° je crveno, 120° je zeleno, a 240° je plavo. Vrijednost boje se može promijeniti od 0 do 359.
Mali 1. Krug u boji
Intenzitet je intenzitet boje, koji varira od 0% do 100%. Vrijednost od 0% znači prisutnost boja i nijansi sive, 100% je maksimalna vrijednost zasićenosti.
Svjetlina postavlja koliko je svijetla boja i naznačena je u rasponu od 0% do 100%. Važno je da boje budu tamne, a visoke vrijednosti svijetle, ekstremne vrijednosti od 0% i 100% označavaju crno-bijelu boju.
HSLA
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA format sličan je sintaksi HSL-u, ali uključuje alfa kanal koji određuje jasnoću elementa. Vrijednosti 0 označavaju povećanu jasnoću, 1 – nedostatak jasnoće, a srednje vrijednosti na razini 0,5 – povećanu jasnoću.
Vrijednosti boja za RGBA, HSL i HSLA formate dodaju se u CSS3, stoga, kada mijenjate ove formate, provjerite valjanost koda s ispravnom verzijom.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Unaprijed
Sve metode ribolova lavova navedene na web stranici su teoretske i temeljene na metodama izračuna. Autori ne jamče vašu sigurnost u njihovoj uporabi i ne preuzimaju nikakvu odgovornost za rezultate. Zapamtite, lav je koliba i nemarno stvorenje!
Rezultat ovog stražnjeg dijela prikazan je na sl. 2.
Mali 2. Colori na web stranici
Prijenosna računala
