Pabandykite redaguoti šį pavyzdį, kad įtrauktumėte savo vertes, pvz., rgb(100, 100, 100) .

Spalvos nustatymas su RGBA

CSS3 pasirodė naujas įrankis darbui su spalva - RGBA formatas. Tai galima pavadinti RGB modelio evoliucija, tačiau pridėjus vieną naują kanalą – A arba alfa kanalą. Šis kanalas nustato spalvos skaidrumą. Jo reikšmės nustatomos diapazone nuo 0 iki 1. Reikšmė, lygi 0, atitinka visišką skaidrumą, 1 - visišką neskaidrumą (spalva bus tokia pati, kaip nustatyta pirmieji trys RGB kanalai) ir tarpinės reikšmės, pvz., 0,4 arba 0,6 - įvairaus laipsnio skaidrumas.

Kodo pavyzdys.

Štai kaip tai veiks:

Šis kodas yra vizualiai panašus į šį kodą, kuriame naudojamas RGB modelis spalvos vertei nustatyti:

Štai jo rezultatas:

Alfa kanalo reikšmė, lygi nuliui, bet kokią spalvą paverčia nematoma – absoliučiai skaidria, vienetui lygi reikšmė verčia spalvą RGB kode be pakeitimų. Ypatybė rgba(255,0,0,1.0) rodo raudoną spalvą rgb(255, 0, 0) .

Pagal šešioliktainę reikšmę (HEX kodas)

Kasdieniame gyvenime naudojame dešimtainę skaičiavimo sistemą. Jo ištakos labai paprastos – ant rankų turime dešimt pirštų, o gyvenime buvo patogu suskaičiuoti ant pirštų. Jei į dešimtainė sistema dešimt skaitmenų: nuo 0 iki 9, o skaičius 10 yra kitas skaitmuo, tada šešioliktainėje skaičių sistemoje yra 16 skaitmenų, o kitas skaitmuo bus skaičius 16.

Norint nurodyti spalvų kodus, įprasti dešimtainiai skaitmenys nuo 0 iki 9 naudojami kaip šešioliktainiai skaitmenys, o lotyniškos raidės nuo A iki F – skaičiai nuo 10 iki 15, ty (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Kad būtų aiškumo, apibendrinkime tai lentelėje:

Norėdami rašyti šešioliktainius skaičius, didesnius nei F (15 dešimtųjų), kaip ir dešimtainėje sistemoje, jie taip pat naudoja dviejų skaitmenų sąjungą, bet jau šešioliktainę, o tai akivaizdu. Taip, dėl įrašo dešimtainis skaičius 255 šešioliktainiu žymėjimu yra FF.

Šešioliktainė sistema yra suprantamesnė kompiuteriui, ji greičiau apdoroja šešioliktainės reikšmės reikšmes.

Norėdami nurodyti spalvą šešioliktaine sistema, prieš skaitinę reikšmę parašykite ženklą #, pavyzdžiui: #FFC0CB . Pati #FFC0CB reikšmė susideda iš trijų šešioliktainių skaitmenų FF, C0 ir CB. Šio įrašo reikšmė yra tokia pati, kaip ir spalvos nustatymas RGB formatu(rgb(r, g, b) ) – kiekvienas šešioliktainis skaitmuo HEX kode rodo spalvų sodrumą jo RGB modelio kanale.

Šis kodas parodys šiuos elementus:

Ir štai paveikslėlis su rezultatu iš šio puslapio viršuje esančio skyriaus „Spalvos nustatymas naudojant RGB“.

Matome, kad spalvos identiškos.

Leidžiamas sutrumpintas HEX spalvos kodo žymėjimas: 6 skaitmenų skaičius gali būti parašytas kaip 3 skaitmenų skaičius. Tai galioja tik tuo atveju, jei kartojasi du to paties kanalo spalvos reikšmės skaitmenys.

Tai yra, priimtina tokia santrumpa:

Pavyzdžiui, spalva #ff22aa gali būti parašyta kaip #f2a arba #44aa22 spalva gali būti parašyta #4a2.

Spalvos nustatymas naudojant HSL

CSS3 turi naują formatą spalvoms nurodyti.

HSL formatas yra angliškų žodžių: Hue (atspalvis), Saturate (soturumas) ir Lightness (lightness) santrumpa.

Atspalvis HSL yra spalvos reikšmė specialiame spalvų rate (2 pav.) ir nurodoma laipsniais. Jei nubrėžtume analogijas su RGB modeliu, tai 0° atitinka raudoną, 120° – žalią, o 240° – mėlyną.

Atspalvio reikšmė pasikeis nuo 0 iki 359.

Antroji reikšmė – prisotinimas (Saturate) nustatomas procentais. Esant 100% prisotinimui, spalva yra kiek įmanoma „sultingesnė“, nes sodrumo indikatorius juda link 0%, spalva tampa vis blankesnė ir nusirita į pilką.

Trečioji reikšmė – lengvumas (Lightness) taip pat nustatomas procentais. Kuo didesnis procentas, tuo ryškesnė bus spalva. Kraštutinės 0% ir 100% reikšmės parodys atitinkamai juodą (šviesos trūkumas) ir baltą (eksponuotą) spalvas, ir nesvarbu, kuri spalva iš spalvų rato buvo pasirinkta pirmame kanale. Optimalia verte galima laikyti spalvos ryškumo vertę, lygią 50%.

Spalvų nustatymas su HSLA

HSLA formatas yra susijęs su HSL, kaip ir RGB su RGBA. HSLA formate, taip pat RGBA, pridedamas alfa kanalas, atsakingas už spalvų skaidrumą.

HSL formatu nurodytą spalvą lengviau perskaityti. Galime sakyti, kad tai intuityvu. Pavyzdžiui, kodas hsl(120,60%,50%) gali nurodyti galutinę spalvą, jei atmintyje yra HSL spalvų rato paveikslėlis. To negalima pasakyti apie RGB ir HEX formatus, šiuose formatuose nurodytas spalvų kodas paaiškėja tik jį atvaizdavus monitoriuje.

Nauji CSS3 formatai (HSL, HSLA ir RGBA) veikia naršyklėse nuo versijų: IE 9.0, Opera 10.0 Firefox 3.0. Kaip padaryti, kad stiliai veiktų senesnėse naršyklėse?

Someblock (fono spalva: rgb(255,50,50); fono spalva: rgba(255,50,50,0,85))

Naudojant šį kodą senesnėse naršyklėse, .somebloсk klasės fono spalva, nors ir nenaudoja alfa kanalo, bus rodoma RGB formatu.

Š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ą

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.

Su RGB

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

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

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, o 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

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.

Spalvų vertės RGBA formatai, HSL ir HSLA pridedami 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

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.

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 atvaizdavimo būdu, kai naršyklė veikia su savo palete ir negali rodyti spalvos, kurios nėra jos 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 tokios 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. Šiuo metu žiniatinklio spalvų aktualumas yra labai mažas dėl monitorių kokybės pagerė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.

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.