Spalvoti html kodai. Stilių spalvas galima nustatyti įvairiais būdais: pagal šešioliktainę reikšmę, pagal pavadinimą, RGB, RGBA, HSL, HSLA formatu
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 lygiu 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 raudona sudedamoji dalis yra maksimali (FF), o likusios sudedamosios dalys yra nulinės. 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. Tam tikslui tinka grafinis redaktorius, galintis dirbti su įvairių spalvų modeliais, pavyzdžiui, 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), tai ta pati spalva skirtingose naršyklėse gali būti rodoma skirtingai. 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. Tam, kad skirtingose naršyklėse spalva išliktų ta pati, buvo pristatyta vadinamųjų interneto spalvų paletė. Interneto spalvos yra tos spalvos, kurių kiekvienam komponentui - raudonai, žaliai ir mėlynai - nustatyta 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.
| 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
Šiame pavyzdyje fono spalva nustatoma naudojant žymos atributą bgcolor
, o teksto spalva per teksto atributą. Dėl įvairovės teksto atributo reikšmė nustatoma į šešioliktainį skaičių, o bgcolor nustatytas kaip rezervuotas raktinis žodis teal .Minecraft kodai spalvos arba Minecraft kodai formatavimą, leiskite bet kuriam žaidėjui pridėti gėlių ir visais įmanomais būdais formatuoti tekstą tiesiai „Minecraft“. Spalvų kodai nuo &0-9 iki &a-f. Pridėkite juos prieš tekstą. Žaidėjų pranešimuose gali būti spalvų kodų, kurie leidžia sakiniams suteikti spalvų.
Spalvos ir formatavimo kodai
Ampersandas (&), po kurio seka šešioliktainis skaičius pranešimuose, rodo klientui, kad rodant tekstą reikia keisti spalvas. Arba tekstą galima formatuoti naudojant & simbolį, po kurio rašoma raidė. Galite pridėti įvairių spalvų prie knygų, komandų blokų, serverio pavadinimo, serverio aprašymo (motd), pasaulio pavadinimų, ženklų ir net žaidėjų pavadinimų.
Labai lengva suformatuoti tekstą konfigūracijose arba žaidime, naudojant toliau pateiktą spalvų lentelę. &r naudojamas visiems kodams išvalyti, t.y. &mAAA&rBBB bus rodomas kaip AAA BBB.
Jūsų patogumui pateikiame esamų Minecraft spalvų kodų lentelę:
| Kodas | vardas | Techninis pavadinimas | Simbolio spalva | Simbolio šešėlių spalva | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| R | G | B | šešiakampis | R | G | B | šešiakampis | |||
| &0 | Juoda | juodas | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
| &1 | tamsiai mėlyna | tamsiai mėlyna | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
| &2 | tamsiai žalia | tamsiai žalia | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
| &3 | Tamsiai mėlyna-žalia | tamsus_aqua | 0 | 170 | 170 | 00AAAA | 0 | 42 | 42 | 002A2A |
| &4 | Tamsiai raudona | tamsiai raudona | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
| &5 | Tamsiai violetinė | tamsiai violetinė | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
| &6 | Auksas | auksas | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
| &7 | Pilka | pilka | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
| &8 | Tamsiai pilka | tamsiai pilka | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
| &9 | Mėlyna | mėlyna | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
| &a | Žalias | žalias | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
| &b | mėlyna Žalia | aqua | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
| ir kt | Raudona | raudona | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
| &d | Šviesiai violetinė | šviesiai violetinė | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
| &e | Geltona | geltona | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
| &f | Baltas | baltas | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
Kartais tai būtina pabraukti, pabraukti, paryškinti kažkoks tekstas. Tam naudojamas teksto formatavimas. Jis naudojamas taip pat, kaip ir spalvos (prieš įdedame tekstą kodas, pavyzdžiui, &lMinecraft= Minecraft.
Jūsų patogumui žemiau pateikiama formatavimo kodų lentelė:
| Kodas | vardas |
|---|---|
| &k | magiškas tekstas |
| &l | Miniatiūra |
| &m | Perbrauktas tekstas |
| &n | Pabrauktas tekstas |
| &o | Kursyvas tekstas |
| &r | Tekstas be formatavimo |
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 įvairiais formatais. Š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ės įrangos, tokios kaip „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 reikšmė 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 |
Kaip žinote, spalva gali paveikti žmogaus būseną: tiek psichinę, tiek fizinę. Kasdien naršant internete akys įvertina milijonus spalvų ir atspalvių. Su spalvų psichologija susipažinęs interneto dizaineris gali valdyti lankytojo nuotaiką, kad pasiektų bet kokius tikslus.
Taip yra dėl to, kad kai kurie atspalviai ramina, o kai kurie, priešingai, jaudina. Toliau kalbėsime apie tai, kaip spalvos sintezuojamos ir atvaizduojamos naudojant kompiuterines technologijas.
RGB yra spalvų modelis, vaizduojantis visų spalvų ir jų atspalvių gavimo būdą įvairiomis proporcijomis maišant tris pagrindinius komponentus, kurie yra:
- Raudona spalva ( Raudona);
- žalia spalva ( Žalias);
- mėlyna spalva ( Mėlyna).
Iš čia kilęs sutrumpintas RGB pavadinimas. Šios spalvos pasirinktos kaip pagrindinės ne be priežasties: priežastis yra žmogaus akies tinklainės fiziologija ir tai, kaip ji jas suvokia:
RGB modelis šiandien išlieka populiariausias ir naudojamas spalvoms atkurti televizoriaus ekranuose ir kompiuterių monitoriuose. Kadangi gamintojai savo gaminiams suteikia skirtingas charakteristikas, 1996 m. buvo sukurta vieninga RGB pagrindu sukurta spalvų sintezės sistema, vadinama sRGB, prie kurios Microsoft ir HP dirbo kartu.
Skaitmeninis spalvų vaizdavimas
Kaip minėta anksčiau, RGB spalvos susidaro maišant pagrindines spalvas. Norint apibūdinti kiekvieno iš jų intensyvumą, buvo priimta schema, kurioje spalva vaizduojama diapazonu 0–255 (8 bitai), o tai atitinka 00-FF šešioliktaine.
Tai yra, pagrindinės spalvos atrodys taip:
- Raudona – RGB (255.0.0);
- Žalia – RGB (0,255,0);
- Mėlyna – RGB (0,0,255);
Jei spalvos intensyvumas yra mažesnis nei 255, tada gaunami įvairūs raudonos, žalios ir mėlynos spalvos atspalviai. Toliau pateikiama jų gradacijos lentelė, taip pat kiekvieno atspalvio šešioliktainės reikšmės:
RGB spalvų diagramos
Natūralu, kad be pagrindinių spalvų gradacijų yra ir mišrių, o jų skaičius yra gana didelis. Todėl buvo sukurta RGB spalvų lentelė, kurioje pateikiami visi esami atspalviai, jų pavadinimai ir skaitiniai atvaizdai ( dešimtaine ir šešioliktaine forma).
Su ja galite susipažinti čia. Ši lentelė labai supaprastina interneto dizainerių gyvenimą, nes per kelias sekundes galite rasti norimą atspalvį ir sužinoti jo skaitinį vaizdą.
Saugi RGB spalvų paletė
Tačiau tam tikru momentu iškilo problemų dėl spalvų rodymo skirtingose naršyklėse, o jai išspręsti buvo sudaryta vadinamoji „saugi“ RGB spalvų paletė, kurios buvo išvestos matematiniais skaičiavimais.
Kai naršyklė negali tinkamai parodyti spalvos, ji bando priartėti prie to, ko jai reikia, maišydama gretimas spalvas ir greičiausiai rezultatas bus visiškai nepriimtinas:
Naudodamas RGB spalvų kodus iš šios paletės, žiniatinklio kūrėjas gali būti ramus, rodydamas spalvas savo svetainės puslapiuose, kai žiūrima naudojant skirtingas naršykles, platformas ir monitorius. Nors šiuo metu saugių spalvų lentelė praranda savo aktualumą ( technologijų pažanga nestovi vietoje), jį naudojant galima, kaip sakoma, ramiai išsimiegoti.
Auksinė spalva RGB modelyje
Pirmą kartą žodis „auksas“ buvo pavartotas XIV amžiaus pradžioje, apibūdinant cheminio elemento Aurum – aukso – spalvą. RGB modelyje aukso spalva pavaizduota šiomis skaitinėmis reikšmėmis:
- RGB (255, 215, 0) - dešimtainė sistema;
- HEX #FFD700 – šešioliktainė sistema.
Smėlio spalva RGB modelyje
Smėlio spalva istorijoje užima gana reikšmingą vietą, net jei ji nėra pati išraiškingiausia. Daugelis kultūros paminklų, ypač antikvarinės skulptūros, buvo pagaminti iš steatito ir muilo akmens, kurie turi smėlio atspalvį. RGB modelyje smėlio spalvos pateikiamos taip:
- RGB (245, 245, 220) – dešimtainė sistema;
- HEX #F5F5DC – šešioliktainė sistema.
Šiais laikais, ypač pasauliniame tinkle, retai galima rasti tokią „nuobodžią“ spalvą. Kūrėjai teikia pirmenybę patraukliam dizainui, naudojant ryškias spalvas. Technologijų pažanga leidžia monitoriuose rodyti daugybę spalvų, todėl vaizdas tampa tikroviškesnis.
Geras Blogas
