HTML spalva gali būti nurodyta trimis būdais:
HTML spalvos nustatymas pagal pavadinimą
Kai kurios spalvos gali būti nurodytos pagal jų pavadinimą, naudojant spalvos pavadinimą Anglų kalba. Dažniausi raktažodžiai: juoda (juoda), balta (balta), raudona (raudona), žalia (žalia), mėlyna (mėlyna) ir kt.:
Teksto spalva – raudona
Populiariausios „Consortium“ standarto spalvos pasaulinis tinklas(anglų k. World Wide Web Consortium, W3C):
| Spalva | vardas | Spalva | vardas | Spalva | vardas | Spalva | vardas |
|---|---|---|---|---|---|---|---|
| Juoda | Pilka | sidabras | Baltas | ||||
| Geltona | kalkių | Aqua | Fuksija | ||||
| Raudona | Žalias | Mėlyna | Violetinė | ||||
| kaštoninės spalvos | Alyvuogių | karinis jūrų laivynas | žalsvai mėlyna |
Įvairių spalvų pavadinimų naudojimo pavyzdys:
Pavyzdys: spalvos nustatymas pagal jos pavadinimą
- Išbandykite patys"
Antraštė raudoname fone
Antraštė oranžiniame fone
Antraštė kalkiniame fone
Baltas tekstas mėlyname fone
Antraštė raudoname fone
Antraštė oranžiniame fone
Antraštė kalkiniame fone
Baltas tekstas mėlyname fone
Spalvos nustatymas naudojant RGB
Kai monitoriuje rodomos skirtingos spalvos, kaip pagrindas yra RGB paletė. Bet kokia spalva gaunama sumaišius tris pagrindines: R - raudona, G - žalia (žalia), B - mėlyna (mėlyna). Kiekvienos spalvos ryškumas nurodomas vienu baitu, todėl gali būti nuo 0 iki 255. Pavyzdžiui, RGB (255,0,0) rodoma kaip raudona, nes raudona yra nustatyta į didžiausią reikšmę (255) ir likusi dalis nustatyta į 0. Taip pat galite nustatyti spalvą procentais. Kiekvienas iš parametrų nurodo atitinkamos spalvos ryškumo lygį. Pavyzdžiui: reikšmės rgb(127, 255, 127) ir rgb(50%, 100%, 50%) nustatys tą pačią vidutinio sodrumo žalią spalvą:
Pavyzdys: spalvos nurodymas naudojant RGB
- Išbandykite patys"
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Nustatykite spalvą pagal šešioliktainę reikšmę
Vertybės R G B taip pat galima nurodyti naudojant šešioliktaines (HEX) spalvų reikšmes tokia forma: #RRGGBB kur RR (raudona), GG (žalia) ir BB (mėlyna) yra šešioliktainės reikšmės nuo 00 iki FF (tas pats kaip dešimtainis 0- 255) . Šešioliktainė sistema, skirtingai nei dešimtainė, yra pagrįsta, kaip rodo jos pavadinimas, skaičiumi 16. Šešioliktainėje sistemoje naudojami šie simboliai: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Čia skaičiai nuo 10 iki 15 pakeičiami lotyniškomis raidėmis. Skaičiai, didesni nei 15 šešioliktainėje sistemoje, yra dviejų simbolių sąjunga į vieną reikšmę. Pavyzdžiui, didžiausias skaičius 255 coliai dešimtainė sistema atitinka didžiausią FF reikšmę šešioliktaine. Priešingai nei dešimtainėje sistemoje, prieš šešioliktainį skaičių rašomas svaro ženklas. # , pavyzdžiui, #FF0000 pateikiamas kaip raudonas, nes raudonai nustatyta didžiausia reikšmė (FF), o likusios spalvos yra nustatytos kaip minimali vertė(00). Simboliai po maišos simbolio # galima rašyti tiek didžiosiomis, tiek mažosiomis raidėmis. Šešioliktainė sistema leidžia naudoti sutrumpintą formą, pvz., #rgb, kur kiekvienas simbolis atitinka du kartus. Taigi įrašas #f7O turėtų būti laikomas #ff7700.
Pavyzdys: spalva HEX
- Išbandykite patys"
raudona: #FF0000
žalia: #00FF00
mėlyna: #0000FF
raudona: #FF0000
žalia: #00FF00
mėlyna: #0000FF
raudona+žalia=geltona: #FFFF00
raudona+mėlyna=violetinė: #FF00FF
žalia+mėlyna=mėlyna: #00FFFF
Dažniausiai naudojamų spalvų sąrašas (pavadinimas, HEX ir RGB):
| Angliškas pavadinimas | rusiškas vardas | Pavyzdys | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amarantas | burnočiai | #E52B50 | 229 | 43 | 80 | |
| Gintaras | Gintaras | #FFBF00 | 255 | 191 | 0 | |
| Aqua | mėlyna Žalia | #00FFFF | 0 | 255 | 255 | |
| Azure | Azure | #007FFF | 0 | 127 | 255 | |
| Juoda | Juoda | #000000 | 0 | 0 | 0 | |
| Mėlyna | Mėlyna | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Bondi paplūdimio vanduo | #0095B6 | 0 | 149 | 182 | |
| Žalvaris | Žalvaris | #B5A642 | 181 | 166 | 66 | |
| Ruda | Ruda | #964B00 | 150 | 75 | 0 | |
| Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
| tamsiai pavasario žalia | Tamsiai pavasario žalia | #177245 | 23 | 114 | 69 | |
| smaragdas | smaragdas | #50C878 | 80 | 200 | 120 | |
| Baklažanas | Baklažanas | #990066 | 153 | 0 | 102 | |
| Fuksija | Fuksija | #FF00FF | 255 | 0 | 255 | |
| Auksas | Auksas | #FFD700 | 250 | 215 | 0 | |
| Pilka | Pilka | #808080 | 128 | 128 | 128 | |
| Žalias | Žalias | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| kalkių | Kalkės | #CCFF00 | 204 | 255 | 0 | |
| malachitas | malachitas | #0BDA51 | 11 | 218 | 81 | |
| karinis jūrų laivynas | Tamsiai mėlyna | #000080 | 0 | 0 | 128 | |
| Ochra | Ochra | #CC7722 | 204 | 119 | 34 | |
| Alyvuogių | Alyvuogių | #808000 | 128 | 128 | 0 | |
| Oranžinė | Oranžinė | #FFA500 | 255 | 165 | 0 | |
| Persikas | Persikas | #FFE5B4 | 255 | 229 | 180 | |
| Moliūgas | Moliūgas | #FF7518 | 255 | 117 | 24 | |
| Violetinė | Violetinė | #800080 | 128 | 0 | 128 | |
| Raudona | Raudona | #FF0000 | 255 | 0 | 0 | |
| Šafranas | Šafranas | #F4C430 | 244 | 196 | 48 | |
| jūros žalia | žalia jūra | #2E8B57 | 46 | 139 | 87 | |
| Pelkės žalia | Bolotny | #ACB78E | 172 | 183 | 142 | |
| žalsvai mėlyna | mėlyna Žalia | #008080 | 0 | 128 | 128 | |
| Ultramarinas | ultramarinas | #120A8F | 18 | 10 | 143 | |
| violetinė | Violetinė | #8B00FF | 139 | 0 | 255 | |
| Geltona | Geltona | #FFFF00 | 255 | 255 | 0 | |
Spalvų kodai (fonas) pagal sodrumą ir atspalvį.
Šešioliktainiai skaičiai naudojami spalvoms nurodyti. Šešioliktainė sistema, skirtingai nei dešimtainė sistema, kaip rodo jos pavadinimas, yra pagrįsta skaičiumi 16. Skaičiai bus tokie: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Skaičiai nuo 10 iki 15 pakeičiami lotyniškomis raidėmis. Skaičiai, didesni nei 15 šešioliktainėje sistemoje, susidaro sujungiant du skaičius į vieną. Pavyzdžiui, skaičius 255 dešimtainiu būdu atitinka skaičių FF šešioliktaine. Siekiant išvengti painiavos apibrėžiant skaičių sistemą, prieš šešioliktainį skaičių rašomas maišos simbolis #, pavyzdžiui, #666999. Kiekvienos iš trijų spalvų – raudonos, žalios ir mėlynos – reikšmės gali būti nuo 00 iki FF. Taigi spalvos žymėjimas yra padalintas į tris komponentus #rrggbb, kur pirmieji du simboliai žymi raudoną spalvos komponentą, du viduriniai – žalią, o paskutiniai du – mėlyną. Leidžiama naudoti sutrumpintą formą #rgb, kur kiekvienas simbolis turi būti padvigubintas. Taigi įrašas #fe0 turėtų būti laikomas #ffee00.
pagal vardą
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Naršyklės palaiko kai kurias spalvas pagal pavadinimą. Lentelėje. 1 rodomi pavadinimai, šešioliktainis kodas, reikšmės RGB, HSL formatu ir aprašymas.
| vardas | Spalva | Kodas | RGB | HSL | apibūdinimas |
|---|---|---|---|---|---|
| baltas | #fffff arba #ffff | rgb (255 255 255) | hsl (0,0 %, 100 %) | Baltas | |
| sidabras | #c0c0c0 | rgb(192,192,192) | hsl (0,0 %, 75 %) | Pilka | |
| pilka | #808080 | rgb(128 128 128) | hsl (0,0 %, 50 %) | Tamsiai pilka | |
| juodas | #000000 arba #000 | rgb(0,0,0) | hsl(0,0%,0%) | Juoda | |
| kaštoninės spalvos | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Tamsiai raudona | |
| raudona | #ff0000 arba #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Raudona | |
| oranžinė | #ffa500 | rgb(255,165,0) | hsl (38,8 100 %, 50 %) | Oranžinė | |
| geltona | #ffff00 arba #ff0 | rgb(255,255,0) | hsl (60 100 %, 50 %) | Geltona | |
| alyvuogių | #808000 | rgb(128,128,0) | hsl (60 100 %, 25 %) | Alyvuogių | |
| kalkių | #00ff00 arba #0f0 | rgb(0,255,0) | hsl (120 100 %, 50 %) | šviesiai žalia | |
| žalias | #008000 | rgb(0,128,0) | hsl (120 100 %, 25 %) | Žalias | |
| aqua | #00ffff arba #0ffff | rgb(0 255 255) | hsl (180 100 %, 50 %) | Mėlyna | |
| mėlyna | #0000ff arba #00f | rgb(0,0,255) | hsl (240 100 %, 50 %) | Mėlyna | |
| karinis jūrų laivynas | #000080 | rgb(0,0,128) | hsl (240 100 %, 25 %) | Tamsiai mėlyna | |
| žalsvai mėlyna | #008080 | rgb(0 128 128) | hsl (180 100 %, 25 %) | mėlyna Žalia | |
| fuksija | #ff00ff arba #f0f | rgb(255;0,255) | hsl(300,100%,50%) | Rožinis | |
| violetinė | #800080 | rgb(128,0,128) | hsl (300 100 %, 25 %) | Violetinė |
Su RGB
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Galite apibrėžti spalvą naudodami raudoną, žalią ir mėlyną reikšmes dešimtainiais skaičiais. Kiekvienas iš trijų spalvų komponentų turi reikšmę nuo 0 iki 255. Taip pat priimtina spalvą nustatyti procentais, o 100 % atitiks skaičių 255. Pirmiausia nurodomas rgb raktinis žodis, o tada spalvos komponentai nurodyti skliausteliuose, atskirti kableliais, pavyzdžiui, rgb(255 , 128, 128) arba 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 formatas yra panašus į RGB sintaksę, tačiau apima alfa kanalą, kuris nustato elemento skaidrumą. 0 reikšmė yra visiškai skaidri, 1 yra nepermatoma, o tarpinė vertė, pvz., 0,5, yra permatoma.
RGBA yra pridėta prie CSS3, todėl CSS kodo patvirtinimas turėtų būti atliekamas pagal šią versiją. Reikėtų pažymėti, kad CSS3 standartas vis dar kuriamas ir kai kurios jo funkcijos gali keistis. Pavyzdžiui, RGB spalva, pridėta prie fono spalvos ypatybės, yra patvirtinama, o pridėta prie fono ypatybės – ne. Tuo pačiu metu naršyklės gana teisingai supranta abiejų savybių spalvą.
HSL
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL formato pavadinimas susidaro iš pirmųjų raidžių Hue (atspalvis), Saturate (soturumas) ir Lightness (lightness) derinio. Atspalvis yra spalvų rato spalvos reikšmė (1 pav.) ir nurodoma laipsniais. 0° yra raudona, 120° yra žalia, o 240° yra mėlyna. Atspalvio reikšmė gali svyruoti nuo 0 iki 359.
Ryžiai. 1. Spalvų ratas
Sodrumas yra spalvos intensyvumas, matuojamas procentais nuo 0% iki 100%. 0% reikšmė rodo, kad nėra spalvos ir yra pilkas atspalvis, 100% yra didžiausia sodrumo reikšmė.
Šviesumas nustato spalvos ryškumą ir nurodomas procentais nuo 0% iki 100%. Mažos reikšmės daro spalvą tamsesnę, o didelės – šviesesnę, kraštutinės 0% ir 100% reikšmės atitinka juodą ir baltą spalvą.
HSLA
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA formatas yra panašus į HSL sintaksę, tačiau apima alfa kanalą, kuris nustato elemento skaidrumą. 0 reikšmė yra visiškai skaidri, 1 yra nepermatoma, o tarpinė vertė, pvz., 0,5, yra permatoma.
RGBA, HSL ir HSLA formatų spalvų reikšmės pridedamos prie CSS3, todėl naudodami šiuos formatus patikrinkite kodo galiojimą pagal versiją.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Įspėjimas
Visi svetainėje išvardyti liūto gaudymo būdai yra teoriniai ir pagrįsti skaičiavimo metodais. Autoriai negarantuoja jūsų saugumo juos naudojant ir neprisiima jokios atsakomybės už rezultatą. Atminkite, kad liūtas yra plėšrūnas ir pavojingas gyvūnas!
Šio pavyzdžio rezultatas parodytas fig. 2.
Ryžiai. 2. Spalvos tinklalapyje
11/28/14 11,1 tūkstDeja, svetainėje kol kas neįmanoma parodyti skonio pojūčių. Tačiau tai galima visiškai kompensuoti naudojant spalvos. Galų gale, html spalvos leidžia parodyti bet kurį iš milijonų atspalvių. Taigi, kad " spalvoti piestukai“ jo rinkinyje yra daug daugiau nei septyni.
spalvų schema html
HTML spalva gali būti nurodyta keliais formatais:
1. Kaip šešioliktainė reikšmė – naudojamas šešioliktainėje sistemoje nurodytas kodas. Tokie html spalvų kodai susideda iš trijų šešioliktainių skaičių porų. Kiekviena pora yra atsakinga už atspalvio prisotinimą pagrindine spalva:
- Pirmoji skaičių pora yra atsakinga už raudoną spalvą;
- Antroji pora skirta žalios spalvos turiniui;
- Pastaroji skirta mėlynos spalvos turiniui.
Kodo pradžioje (prieš skaičius) dedamas maišos ženklas. Štai kaip yra šešioliktainis spalvos kodas. Be skaičių nuo 1 iki 9, šioje skaičių sistemoje naudojamos lotyniškos abėcėlės raidės (A, B, C, D, E, F).
Pavyzdžiui, baltos spalvos kodas HTML atrodytų kaip #FFFFFF:
2. Raktinis žodis – šiuo metu html palaiko apie 147 raktinius žodžius. Tačiau ne visi šie žodžiai yra unikalūs. Kai kurie iš jų nurodo tą patį spalvų atspalvį.
Pilka spalva žymima dviem raktiniais žodžiais: pilka ir pilka . Jų šešioliktainis kodas (HEX ) pateikiamas ta pačia reikšme #808080 .
Pavyzdys :
#808080
3. RGB formatu – šis html spalvų kodavimas pagrįstas trijų reikšmių naudojimu, nustatytomis intervale nuo 0 iki 255. Kiekviena iš jų nustato atspalvio sodrumą viena iš pagrindinių spalvų:
- R - raudona (raudona);
- G - žalia (žalia);
- B - mėlyna (mėlyna).
Spalvos numeris RGB formatu rašomas taip: rgb(0, 210, 100).
fono spalva:rgb(100,186,43)
4. Į RGBA formatu- tai išplėstinis RGB formatas, kur ketvirtoji reikšmė nurodo spalvos skaidrumą dešimtainės trupmenos pavidalu nuo 0 iki 1.
Naudojimo pavyzdys:
fono spalva:rgba(100,86,143,0,2)
fono spalva:rgba(100,86,143,0,5)
fono spalva:rgba(100,86,143,0,8)
fono spalva:rgba(100,86,143,1)
html spalvų lentelės ir spalvų generatoriai
Turint tokį platų spalvų nustatymo formatų asortimentą, lengva susipainioti. Todėl buvo išrastas specialus spalvų stalas. Jame 147 pagrindinių spalvų atspalvių pavadinimų atitikimo kodai pateikti visuose pagrindiniuose spalvų vaizdavimo standartuose. Be to, kiekviename lauke yra juosta, skirta vizualiai suderinti spalvas. Viena iš šių lentelių pateikiama svetainėje colourcheme.ru:
Tačiau net ir naudojant tokią korespondencijos struktūrą, norimo atspalvio pasirinkimas gali būti sunkus. Ir tai nėra faktas, kad spalvų kodų lentelėje yra tinkamas.
Siekiant apeiti šią kliūtį ir kuo lengviau pasirinkti tinkamą atspalvį, buvo sukurtos interaktyvios interneto paslaugos. Juos vartotojo sąsaja gali šiek tiek skirtis.
Svetainėje html-color-codes.info spalvų generatorius atrodo taip:
O paslaugoje color-picker.appsmaster.co šis įrankis įdiegtas šiek tiek kitaip:
Kiekvienos generatoriaus spalvos sodrumas nustatomas naudojant specialius slankiklius. Vizualiai atspalvis rodomas rėmelio ir stačiakampio spalva kairėje pusėje. Apačioje 3 laukuose rodomas pagrindinių formatų spalvų kodas.
Tačiau spalvų generatorių galima įsigyti ne tik specializuotose svetainėse. Beveik visi grafiniai redaktoriai aprūpinti panašiu įrankiu. Pavyzdžiui, „Photoshop“:
Spalvų sauga
Ir tai buvo labai seniai, vaizdo plokščių, kurios palaiko tik 256 spalvas, laikais. Tais tolimais laikais Operacinės sistemos galėtų rodyti tik tam tikrą aštuonių bitų atspalvių skaičių be iškraipymų.
Tada buvo išvesta puiki lentelė saugios spalvos. Jame buvo nurodyta 216 atspalvių, kurie galėjo būti rodomi be iškraipymų bet kurioje to meto naršyklėje. Ir iki šios dienos tai puikus rankraštis» vis dar pasiekiama kai kuriuose šaltiniuose:
Mūsų laikais viskas pasikeitė. Todėl visos saugos taisyklės dirbant su spalva html yra visiškai atšauktos. Juk šiuolaikinė kompiuterinė įranga palaiko daugiau nei 16 milijonų skirtingų atspalvių. O 216 saugių spalvų nugrimzdo į užmarštį.
Vladas Merževičius
HTML spalva nurodoma vienu iš dviejų būdų: naudojant šešioliktainį kodą ir kai kurių spalvų pavadinimus. Dažniausiai naudojamas metodas yra pagrįstas šešioliktaine sistema, kaip universaliausias.
Šešioliktainės spalvos
HTML naudoja šešioliktainius skaičius spalvoms nurodyti. Šešioliktainė sistema, skirtingai nei dešimtainė sistema, kaip rodo jos pavadinimas, yra pagrįsta skaičiumi 16. Skaičiai bus tokie: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Skaičiai nuo 10 iki 15 pakeičiami lotyniškomis raidėmis. Lentelėje. 6.1 rodo dešimtainių ir šešioliktainių skaičių atitikimą.
Didesni nei 15 skaičiai šešioliktainėje sistemoje susidaro sujungus du skaičius į vieną (6.2 lentelė). Pavyzdžiui, skaičius 255 dešimtainiu būdu atitinka skaičių FF šešioliktaine.
Siekiant išvengti painiavos apibrėžiant skaičių sistemą, prieš šešioliktainį skaičių rašomas svaro ženklas #, pavyzdžiui, #aa69cc. Šiuo atveju raidė neturi reikšmės, todėl leidžiama rašyti #F0F0F0 arba #f0f0f0.
Tipiška HTML naudojama spalva yra tokia.
Čia tinklalapio fono spalva nustatyta į #FA8E47. Svaro ženklas # prieš skaičių reiškia, kad jis yra šešioliktainis. Pirmieji du skaitmenys (FA) apibrėžia raudoną spalvos komponentą, trečias–ketvirtas skaitmenys (8E) – žalią, o paskutiniai du skaitmenys (47) – mėlyną. Galutinis rezultatas yra ši spalva.
| FA | + | 8E | + | 47 | = | FA8E47 |
Kiekviena iš trijų spalvų – raudonos, žalios ir mėlynos – gali turėti reikšmes nuo 00 iki FF, o tai galiausiai sudaro 256 atspalvius. Taigi, bendras spalvų skaičius gali būti 256x256x256 = 16.777.216 derinių. Spalvų modelis, pagrįstas raudonos, žalios ir mėlynos spalvos komponentais, vadinamas RGB (raudona, žalia, mėlyna; raudona, žalia, mėlyna). Šis modelis yra priedas (iš pridėti - pridėti), kuriame visų trijų komponentų pridėjimas sudaro baltą spalvą.
Kad būtų lengviau naršyti šešioliktainėmis spalvomis, atsižvelkite į kai kurias taisykles.
- Jei spalvų komponentų reikšmės yra vienodos (pavyzdžiui: #D6D6D6), bus gautas pilkas atspalvis. Kuo didesnis skaičius, tuo šviesesnė spalva, o reikšmės pasikeičia iš #000000 (juoda) į #FFFFFF (balta).
- Ryškiai raudona spalva susidaro, jei raudonas komponentas yra didžiausias (FF), o kiti komponentai nustatomi į nulį. Spalva, kurios reikšmė #FF0000, yra raudoniausias įmanomas raudonas atspalvis. Tas pats pasakytina apie žalią (#00FF00) ir mėlyną (#0000FF).
- Geltona (#FFFF00) gaunama sumaišius raudoną su žalia. Tai aiškiai matoma spalvų ratuke (6.1 pav.), kuriame pateikiamos pagrindinės spalvos (raudona, žalia, mėlyna) ir papildomos arba papildomos. Tai geltona, žalsvai mėlyna ir violetinė (taip pat vadinama purpurine). Apskritai, bet kokią spalvą galima gauti maišant šalia esančias spalvas. Taigi žalsvai mėlyna (#00FFFF) gaunama derinant mėlyną ir žalią spalvas.
Ryžiai. 6.1. Spalvų ratas
Spalvos, pagrįstos šešioliktainėmis reikšmėmis, neturi būti pasirinktos empiriškai. Tinka šiam tikslui grafikos redaktorius kurie gali dirbti su įvairių spalvų modeliais, pvz. Adobe Photoshop. Ant pav. 6.2 rodomas šios programos spalvos pasirinkimo langas, linija apjuosia gautą šešioliktainę esamos spalvos reikšmę. Galite nukopijuoti ir įklijuoti jį į savo kodą.
Ryžiai. 6.2. Spalvų parinkiklis „Photoshop“.
Interneto spalvos
Jei monitoriaus spalvų kokybę nustatote į 8 bitus (256 spalvos), ta pati spalva gali būti rodoma skirtingos naršyklės savaip. Tai susiję su grafikos atvaizdavimu, kai naršyklė dirba su savo palete ir negali rodyti spalvos, kurios nėra paletėje. Šiuo atveju spalva pakeičiama kitų, jai artimų, spalvų, imituojančių duotąją, pikselių deriniu. Kad spalva skirtingose naršyklėse išliktų ta pati, buvo pristatyta vadinamųjų interneto spalvų paletė. Interneto spalvos yra tos spalvos, kurių kiekvienam komponentui - raudonai, žaliai ir mėlynai - viena iš šešių reikšmių - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Šio komponento šešioliktainė reikšmė nurodyta skliausteliuose. Bendras spalvų skaičius iš visų galimų derinių duoda 6x6x6 - 216 spalvų. Žiniatinklio spalvos pavyzdys yra #33FF66.
Pagrindinė žiniatinklio spalvų savybė yra ta, kad visose naršyklėse ji rodoma vienodai. AT Šis momentas interneto spalvų aktualumas yra labai mažas dėl monitorių kokybės padidėjimo ir jų galimybių išplėtimo.
Spalvos pagal pavadinimą
Kad neprisimintumėte skaičių rinkinio, vietoj jų galite naudoti dažniausiai naudojamų spalvų pavadinimus. Lentelėje. 6.3 rodo populiarių spalvų pavadinimų pavadinimus.
| Spalvos pavadinimas | Spalva | apibūdinimas | Hex vertė |
|---|---|---|---|
| juodas | Juoda | #000000 | |
| mėlyna | Mėlyna | #0000FF | |
| fuksija | Šviesiai violetinė | #FF00FF | |
| pilka | Tamsiai pilka | #808080 | |
| žalias | Žalias | #008000 | |
| kalkių | šviesiai žalia | #00FF00 | |
| kaštoninės spalvos | Tamsiai raudona | #800000 | |
| karinis jūrų laivynas | Tamsiai mėlyna | #000080 | |
| alyvuogių | Alyvuogių | #808000 | |
| violetinė | Tamsiai violetinė | #800080 | |
| raudona | Raudona | #FF0000 | |
| sidabras | šviesiai pilka | #C0C0C0 | |
| žalsvai mėlyna | mėlyna Žalia | #008080 | |
| baltas | Baltas | #FFFFFF | |
| geltona | Geltona | #FFFF00 |
Nesvarbu, kaip nurodysite spalvą – pagal pavadinimą ar naudodami šešioliktainius skaičius. Savo poveikiu šie metodai yra vienodi. 6-1 pavyzdyje parodyta, kaip nustatyti tinklalapio fono ir teksto spalvas.
6.1 pavyzdys. Fono ir teksto spalva
Teksto pavyzdys
AT šis pavyzdys fono spalva nustatoma naudojant žymos atributą bgcolor
ir teksto spalvą per teksto atributą. Įvairove teksto atributo reikšmė nustatoma į šešioliktainį skaičių, o bgcolor – į rezervuotą reikšmę. raktažodįžalsvai mėlyna.Spalvų kodai CSS naudojami spalvoms nurodyti. Paprastai spalvų kodai arba spalvų reikšmės naudojami elemento priekinio plano (pvz., teksto, nuorodos spalvos) arba elemento fono (fono, bloko spalvos) spalvai nustatyti. Jais taip pat galima pakeisti mygtukų spalvą, kraštelius, žymeklį, užvedimą ir kitus dekoratyvinius efektus.
Galite nustatyti savo spalvų reikšmes įvairių formatų. Šioje lentelėje išvardyti visi galimi formatai:
Šie formatai išsamiau aprašyti toliau.
CSS spalvos – šešioliktainiai kodai
Šešioliktainis spalvų kodas yra šešių skaitmenų spalvų atvaizdas. Pirmieji du skaitmenys (RR) yra raudona reikšmė, kiti du yra žalia reikšmė (GG), o paskutiniai du yra mėlyna reikšmė (BB).
CSS spalvos – trumpi šešioliktainiai kodai
Trumpas šešioliktainis spalvos kodas yra trumpesnė šešių simbolių žymėjimo forma. Šiame formate kiekvienas skaitmuo kartojamas, kad būtų gauta lygiavertė šešių skaitmenų spalvos reikšmė. Pavyzdžiui: #0F0 tampa #00FF00.
Šešioliktainę reikšmę galima paimti iš bet kurios grafikos programinė įranga, pvz., „Adobe Photoshop“, „Core Draw“ ir kt.
Prieš kiekvieną šešioliktainį CSS spalvos kodą bus nurodytas maišos ženklas „#“. Toliau pateikiami šešioliktainio žymėjimo pavyzdžiai.
CSS spalvos – RGB reikšmės
RGB vertė yra spalvos kodas, kuris nustatomas naudojant rgb() ypatybę. Ši savybė turi tris vertes: po vieną raudonai, žaliai ir mėlynai. Reikšmė gali būti sveikas skaičius nuo 0 iki 255 arba procentas.
Pastaba: Ne visos naršyklės palaiko rgb() spalvos ypatybę, todėl nerekomenduojama jos naudoti.
Toliau pateikiamas pavyzdys, rodantis kelias spalvas naudojant RGB reikšmes.
Spalvų kodų generatorius
Naudodamiesi mūsų paslauga galite sukurti milijonus spalvų kodų.
Saugios naršyklės spalvos
Žemiau yra 216 spalvų lentelė, kurios yra saugiausios ir nepriklausomos nuo kompiuterio. Šios spalvos CSS svyruoja nuo 000000 iki FFFFFF šešioliktainio kodo. Juos saugu naudoti, nes jie užtikrina, kad visi kompiuteriai tinkamai parodys spalvas dirbant su 256 spalvų palete.
| „Saugių“ spalvų lentelė CSS | |||||
| #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 |