Värinumero 6. Tyylien väri voidaan määrittää eri tavoin: heksadesimaaliarvolla, nimellä, RGB-, RGBA-, HSL-, HSLA-muodossa
28.11.2014 11,1 tkValitettavasti makuelämyksiä ei ole vielä mahdollista näyttää verkkosivulla. Mutta tämä voidaan täysin kompensoida värivalikoima. Loppujen lopuksi html-värien avulla voit näyttää minkä tahansa miljoonista sävyistä. niin" värikynät Hänen sarjassaan on paljon enemmän kuin seitsemän.
Värimaailma html-muodossa
html:ssä väri voidaan määrittää useissa muodoissa:
1. Heksadesimaaliarvona – kohdassa määritetty koodi heksadesimaalijärjestelmä laskenta. Tällaiset värikoodit html:ssä koostuvat kolmesta heksadesimaalilukuparista. Jokainen pari on vastuussa sävyn kylläisyydestä päävärillään:
- Ensimmäinen numeropari vastaa punaisesta väristä;
- Toinen pari on vihreän värin sisällölle;
- Jälkimmäinen johtuu sen sinisestä sisällöstä.
Hash-merkki sijoitetaan koodin alkuun (ennen numeroita). Tämä on mitä heksadesimaali tarkoittaa värikoodi. Numeroiden 1-9 lisäksi tämä numerojärjestelmä käyttää latinalaisten aakkosten kirjaimia (A, B, C, D, E, F).
Esimerkiksi koodi valkoinen html:ssä se näyttää tältä #FFFFFF:
2. Avainsana – HTML tukee tällä hetkellä noin 147 avainsanaa. Mutta kaikki nämä sanat eivät ole ainutlaatuisia. Jotkut niistä viittaavat samaan värisävyyn.
Harmaa väriä edustaa kaksi avainsanaa: harmaa ja harmaa . Niiden heksadesimaalikoodi (HEX) on annettu samalla arvolla #808080.
Esimerkki:
#808080
3. B RGB-muoto– tämä html-värikoodaus perustuu kolmen arvon käyttöön, jotka on määritetty alueella 0–255. Jokainen niistä määrittää sävyn kylläisyyden yhdellä pääväreistä:
- R – punainen (punainen);
- G – vihreä (vihreä);
- B – sininen (sininen).
Värinumero RGB-muodossa kirjoitetaan seuraavassa muodossa: rgb(0, 210, 100).
taustaväri:rgb(100,186,43)
4. RGBA-muodossa - se on parannettu RGB-muoto, jossa neljäs arvo määrittää värin läpinäkyvyyden desimaalimurtolukuna 0 - 1.
Käyttöesimerkki:
taustaväri:rgba(100;86,143;0.2)
taustaväri:rgba(100,86,143,0,5)
taustaväri:rgba(100;86,143;0.8)
taustaväri:rgba(100;86,143,1)
HTML-väritaulukot ja värigeneraattorit
Näin laajan valikoiman väriasetusmuotoja on helppo hämmentää. Siksi keksittiin erityinen väritaulukko. Siinä 147:ään avainten nimet värisävyille on annettu vaatimustenmukaisuuskoodit kaikissa tärkeimmissä väristandardeissa. Lisäksi jokainen kenttä on varustettu palkilla visuaalista värien valintaa varten. Yksi näistä taulukoista on esitetty verkkosivulla colorscheme.ru:
Mutta jopa tällaisen kirjeenvaihdon strukturoinnin avulla valinta haluttu sävy voi osoittautua vaikeaksi. Ja se ei ole tosiasia, että värikooditaulukko sisältää tarvitsemasi värikoodin.
Tämän esteen kiertämiseksi ja oikean sävyn valitsemiseksi mahdollisimman helppoa on kehitetty interaktiivisia verkkopalveluita. Heidän käyttöliittymä voivat erota hieman toisistaan.
Verkkosivustolla html-color-codes.info värigeneraattori näyttää tältä:
Ja color-picker.appsmaster.co-palvelussa tämä työkalu on toteutettu hieman eri tavalla:
Generaattorin jokaisen värin kylläisyys asetetaan erityisillä liukusäätimillä. Visuaalisesti varjostus näkyy kehyksen ja suorakulmion värinä vasemmalla puolella. Alareunassa 3 kenttää näyttää värikoodin perusmuodoissa.
Mutta värigeneraattori ei ole saatavana vain erikoistuneilla sivustoilla. Lähes kaikki graafiset editorit on varustettu vastaavalla työkalulla. Esimerkiksi Photoshop:
Turvallisuusohjeet työskennellessäsi värin kanssa
Ja tämä oli kauan sitten, vain 256 väriä tukevien näytönohjainkorttien aikakaudella. Noina kaukaisina aikoina OS pystyi näyttämään vain tietyn määrän kahdeksan bitin sävyjä ilman vääristymiä.
Sitten piirrettiin hieno pöytä turvallisia värejä. Siinä määriteltiin 216 sävyä, jotka voitiin näyttää ilman vääristymiä missään tuolloin selaimessa. Ja tähän päivään asti tämä" hieno käsikirjoitus» on edelleen saatavilla joissakin resursseissa:
Nykyään kaikki on muuttunut. Siksi kaikki turvallisuussäännöt työskennellessäsi värien kanssa html:ssä peruutetaan kokonaan. Loppujen lopuksi moderni tietokoneen kovalevy tukee yli 16 miljoonaa eri sävyä. Ja 216 turvallista väriä on vaipunut unohduksiin.
Vlad Merževitš
SISÄÄN HTML väri on määritetty kahdella tavalla: käyttämällä heksadesimaalikoodi ja joidenkin kukkien nimellä. Pääasiassa käytetään heksadesimaalilukujärjestelmään perustuvaa menetelmää, joka on yleisin.
Heksadesimaalivärit
HTML käyttää heksadesimaalilukuja värien määrittämiseen. Heksadesimaalijärjestelmä, toisin kuin desimaalijärjestelmä, perustuu nimensä mukaisesti numeroon 16. Numerot ovat seuraavat: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Numerot 10-15 korvataan latinalaisilla kirjaimilla. Taulukossa 6.1 näyttää vastaavuuden desimaali- ja heksadesimaalilukujen välillä.
Heksadesimaalijärjestelmässä 15:tä suuremmat luvut muodostetaan yhdistämällä kaksi numeroa yhdeksi (taulukko 6.2). Esimerkiksi numero 255 tuumaa desimaalijärjestelmä vastaa lukua FF heksadesimaalimuodossa.
Sekaannusten välttämiseksi numerojärjestelmän määrittämisessä, ennen heksadesimaaliluku Hash-symbolia # käytetään, esimerkiksi #aa69cc. Tässä tapauksessa kirjainkoolla ei ole väliä, joten on sallittua kirjoittaa #F0F0F0 tai #f0f0f0.
Tyypillinen HTML:ssä käytetty väri näyttää tältä.
Tässä verkkosivun taustaväriksi on asetettu #FA8E47. Hash-symboli # numeron edessä tarkoittaa, että se on heksadesimaali. Kaksi ensimmäistä numeroa (FA) määrittävät värin punaisen komponentin, kolmas - neljäs numero (8E) määrittelevät vihreän komponentin ja kaksi viimeistä numeroa (47) määrittävät sinisen komponentin. Lopputuloksena tulee tämä väri.
| FA. | + | 8E | + | 47 | = | FA8E47 |
Jokainen kolmesta väristä - punainen, vihreä ja sininen - voi saada arvot välillä 00 - FF, jolloin saadaan yhteensä 256 sävyä. Siten värien kokonaismäärä voi olla 256x256x256 = 16 777 216 yhdistelmää. Punaiseen, vihreään ja siniseen komponenttiin perustuvaa värimallia kutsutaan RGB:ksi (punainen, vihreä, sininen; punainen, vihreä, sininen). Tämä malli on additiivinen (lisäyksestä - add), jossa kaikkien kolmen komponentin lisääminen muodostaa valkoisen värin.
Heksadesimaaliväreissä liikkumisen helpottamiseksi ota huomioon joitain sääntöjä.
- Jos värikomponenttien arvot ovat samat (esimerkiksi: #D6D6D6), tuloksena on harmaasävy. Miten suurempi määrä, nuo vaaleampi väri, arvot muuttuvat #000000 (musta) arvosta #FFFFFF (valkoinen).
- Kirkkaan punainen väri muodostuu, jos punainen komponentti on maksimi (FF) ja muut komponentit asetetaan nollaan. Väri, jonka arvo on #FF0000, on punaisin mahdollinen punainen sävy. Tilanne on samanlainen kuin vihreä(#00FF00) ja sininen (#0000FF).
- Keltainen(#FFFF00) saadaan sekoittamalla punaista ja vihreää. Tämä näkyy selvästi väriympyrässä (Kuva 6.1), jossa näkyvät päävärit (punainen, vihreä, sininen) sekä täydentävät tai lisävärit. Näitä ovat keltainen, syaani ja violetti (kutsutaan myös magentaksi). Yleensä mikä tahansa väri voidaan saada sekoittamalla sen lähellä olevia värejä. Siten syaani (#00FFFF) saadaan yhdistämällä sininen ja vihreä.
Riisi. 6.1. Väri ympyrä
Heksadesimaaliarvoihin perustuvia värejä ei tarvitse valita empiirisesti. Sopii tähän tarkoitukseen graafinen editori pystyy työskentelemään erilaisten kanssa värillisiä malleja, Esimerkiksi, Adobe Photoshop. Kuvassa Kuva 6.2 näyttää ikkunan värin valintaa varten tässä ohjelmassa tuloksena olevan nykyisen värin heksadesimaaliarvo on rajattu viivalla. Voit kopioida ja liittää sen koodiisi.
Riisi. 6.2. Ikkuna värien valintaa varten Photoshop ohjelma
Webin värit
Jos asetat näytön värintoistolaaduksi 8 bittiä (256 väriä), sama väri voidaan näyttää eri selaimet omalla tavallani. Tämä johtuu grafiikan näyttötavasta, kun selain toimii omalla palettillaan eikä voi näyttää väriä, joka ei ole sen paletissa. Tässä tapauksessa väri korvataan muiden, sitä lähellä olevien värien pikselien yhdistelmällä, jotka jäljittelevät annettua väriä. Jotta väri pysyy samana eri selaimissa, otettiin käyttöön niin kutsuttujen verkkovärien paletti. Verkkovärit ovat värejä, joiden jokainen komponentti - punainen, vihreä ja sininen - on asetettu johonkin kuudesta arvosta - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Tämän komponentin heksadesimaaliarvo on ilmoitettu suluissa. Värien kokonaismäärä kaikista mahdollisista yhdistelmistä antaa 6x6x6 - 216 väriä. Esimerkki verkkoväristä on #33FF66.
Verkkovärien pääominaisuus on, että se näyttää samalta kaikissa selaimissa. SISÄÄN Tämä hetki Verkkovärien merkitys on erittäin pieni näyttöjen laadun paranemisen ja niiden ominaisuuksien laajentumisen vuoksi.
Värit nimen mukaan
Jotta sinun ei tarvitse muistaa numerosarjaa, voit käyttää sen sijaan yleisesti käytettyjen värien nimiä. Taulukossa 6.3 nimet annetaan suosittuja otsikoita värit.
| Värin nimi | Väri | Kuvaus | Heksadesimaaliarvo |
|---|---|---|---|
| musta | Musta | #000000 | |
| sininen | Sininen | #0000FF | |
| fuksia | Vaaleanvioletti | #FF00FF | |
| harmaa | Tummanharmaa | #808080 | |
| vihreä | Vihreä | #008000 | |
| lime | Vaaleanvihreä | #00FF00 | |
| kastanjanruskea | Tummanpunainen | #800000 | |
| laivasto | Tummansininen | #000080 | |
| oliivi | Oliivi | #808000 | |
| violetti | Tumma violetti | #800080 | |
| punainen | Punainen | #FF0000 | |
| hopea | Vaalean harmaa | #C0C0C0 | |
| sinivihreä | Sinivihreä | #008080 | |
| valkoinen | Valkoinen | #FFFFFF | |
| keltainen | Keltainen | #FFFF00 |
Sillä ei ole väliä, määritätkö värin sen nimellä vai käyttämällä heksadesimaalilukuja. Nämä menetelmät ovat vaikutuksiltaan samanlaisia. Esimerkki 6.1 näyttää, kuinka verkkosivun tausta- ja tekstivärit asetetaan.
Esimerkki 6.1. Tausta ja tekstin väri
Esimerkkiteksti
Tässä esimerkissä taustaväri asetetaan tunnisteen attribuutilla bgcolor
ja tekstin väri text-attribuutin kautta. Vaihtelemista varten text-attribuutti on asetettu heksadesimaaliluvuksi ja attribuutti bgcolor on varattu avainsanaksi teal .HTML:ssä väri voidaan määrittää kolmella tavalla:
Värin asettaminen HTML:ssä sen nimen perusteella
Jotkut värit voidaan määrittää niiden nimellä käyttämällä värin nimeä Englannin kieli. Yleisimmät avainsanat: musta, valkoinen, punainen, vihreä, sininen jne.:
Tekstin väri - punainen
Consortium-standardin suosituimmat värit Maailman laajuinen verkko(Maailma Laaja verkko Konsortio, W3C):
| Väri | Nimi | Väri | Nimi | Väri | Nimi | Väri | Nimi |
|---|---|---|---|---|---|---|---|
| Musta | harmaa | Hopea | Valkoinen | ||||
| Keltainen | Lime | Aqua | fuksia | ||||
| Punainen | Vihreä | Sininen | Violetti | ||||
| Kastanjanruskea | Oliivi | Laivasto | Sinivihreä |
Käyttöesimerkki erilaisia värejä n nimet:
Esimerkki: värin määrittäminen sen nimellä
- Kokeile itse"
Otsikko punaisella pohjalla
Otsikko oranssilla taustalla
Otsikko lime taustalla
Valkoinen teksti sinisellä pohjalla
Otsikko punaisella pohjalla
Otsikko oranssilla taustalla
Otsikko lime taustalla
Valkoinen teksti sinisellä pohjalla
Värin määrittäminen RGB:n avulla
Kun eri värejä näytetään näytöllä, pohjana käytetään RGB-palettia. Mikä tahansa väri saadaan sekoittamalla kolme perusväriä: R - punainen, G - vihreä, B - sininen. Kunkin värin kirkkaus on annettu yhdellä tavulla, ja siksi se voi saada arvot välillä 0 - 255. Esimerkiksi RGB(255,0,0) näytetään punaisena, koska punainen on asetettu korkeimmalle arvolleen (255) ja loput on asetettu arvoon 0. Voit myös määrittää värin prosentteina. Jokainen parametri ilmaisee vastaavan värin kirkkaustason. Esimerkiksi: arvot rgb(127, 255, 127) ja rgb(50%, 100%, 50%) asettavat samat vihreä väri keskikylläisyys:
Esimerkki: Värin määrittäminen RGB:n avulla
- Kokeile itse"
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Aseta väri heksadesimaaliarvon mukaan
Arvot R G B voidaan määrittää myös käyttämällä heksadesimaaliarvoja (HEX) muodossa: #RRGGBB jossa RR (punainen), GG (vihreä) ja BB (sininen) ovat heksadesimaaliarvoja välillä 00 - FF (sama kuin desimaali 0-255 ) . Heksadesimaalijärjestelmä, toisin kuin desimaalijärjestelmä, perustuu nimensä mukaisesti numeroon 16. Heksadesimaalijärjestelmässä käytetään seuraavia merkkejä: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Tässä numerot 10-15 korvataan latinalaisilla kirjaimilla. Lukuja, jotka ovat suurempia kuin 15 heksadesimaalijärjestelmässä, esitetään yhdistämällä kaksi merkkiä yhdeksi arvoksi. Esimerkiksi, suurin määrä 255 desimaaleina vastaa suurinta FF-arvoa heksadesimaalilukuna. Toisin kuin desimaalijärjestelmässä, heksadesimaalilukua edeltää hash-symboli. # esimerkiksi #FF0000 näkyy punaisena, koska punainen on asetettu korkeimmalle arvolleen (FF) ja loput värit on asetettu minimiarvo(00). Merkit hash-symbolin jälkeen # Voit kirjoittaa sekä isoilla että pienillä kirjaimilla. Heksadesimaalijärjestelmän avulla voit käyttää lyhennettä #rgb, jossa jokainen merkki vastaa tuplaa. Näin ollen merkintää #f7O on pidettävä nimellä #ff7700.
Esimerkki: HEX-väri
- Kokeile itse"
punainen: #FF0000
vihreä: #00FF00
sininen: #0000FF
punainen: #FF0000
vihreä: #00FF00
sininen: #0000FF
punainen+vihreä=keltainen: #FFFF00
punainen+sininen=violetti: #FF00FF
vihreä+sininen=syaani: #00FFFF
Luettelo yleisesti käytetyistä väreistä (nimi, HEX ja RGB):
| Englantilainen nimi | venäläinen nimi | Näyte | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amarantti | Amarantti | #E52B50 | 229 | 43 | 80 | |
| Keltainen | Keltainen | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Sinivihreä | #00FFFF | 0 | 255 | 255 | |
| Taivaansininen | Taivaansininen | #007FFF | 0 | 127 | 255 | |
| Musta | Musta | #000000 | 0 | 0 | 0 | |
| Sininen | Sininen | #0000FF | 0 | 0 | 255 | |
| Bondi Sininen | Bondi-rantavettä | #0095B6 | 0 | 149 | 182 | |
| Messinki | Messinki | #B5A642 | 181 | 166 | 66 | |
| Ruskea | Ruskea | #964B00 | 150 | 75 | 0 | |
| Cerulean | Taivaansininen | #007BA7 | 0 | 123 | 167 | |
| Tumma keväänvihreä | Tumma keväänvihreä | #177245 | 23 | 114 | 69 | |
| Smaragdi | Smaragdi | #50C878 | 80 | 200 | 120 | |
| Munakoiso | Munakoiso | #990066 | 153 | 0 | 102 | |
| fuksia | fuksia | #FF00FF | 255 | 0 | 255 | |
| Kulta | Kulta | #FFD700 | 250 | 215 | 0 | |
| harmaa | Harmaa | #808080 | 128 | 128 | 128 | |
| Vihreä | Vihreä | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| Lime | Lime | #CCFF00 | 204 | 255 | 0 | |
| Malakiitti | Malakiitti | #0BDA51 | 11 | 218 | 81 | |
| Laivasto | Tummansininen | #000080 | 0 | 0 | 128 | |
| Okra | Okra | #CC7722 | 204 | 119 | 34 | |
| Oliivi | Oliivi | #808000 | 128 | 128 | 0 | |
| Oranssi | Oranssi | #FFA500 | 255 | 165 | 0 | |
| Persikka | Persikka | #FFE5B4 | 255 | 229 | 180 | |
| Kurpitsa | Kurpitsa | #FF7518 | 255 | 117 | 24 | |
| Violetti | Violetti | #800080 | 128 | 0 | 128 | |
| Punainen | Punainen | #FF0000 | 255 | 0 | 0 | |
| Sahrami | Sahrami | #F4C430 | 244 | 196 | 48 | |
| Meren vihreä | Vihreä meri | #2E8B57 | 46 | 139 | 87 | |
| Suon vihreä | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Sinivihreä | Sinivihreä | #008080 | 0 | 128 | 128 | |
| Ultramariini | Ultramariini | #120A8F | 18 | 10 | 143 | |
| Violetti | Violetti | #8B00FF | 139 | 0 | 255 | |
| Keltainen | Keltainen | #FFFF00 | 255 | 255 | 0 | |
Värikoodit (tausta) kylläisyyden ja sävyn mukaan.
Heksadesimaalilukuja käytetään värien määrittämiseen. Heksadesimaalijärjestelmä, toisin kuin desimaalijärjestelmä, perustuu nimensä mukaisesti numeroon 16. Numerot ovat seuraavat: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Numerot 10-15 korvataan latinalaisilla kirjaimilla. Lukuja, jotka ovat suurempia kuin 15 heksadesimaalijärjestelmässä, muodostetaan yhdistämällä kaksi numeroa yhdeksi. Esimerkiksi desimaaliluku 255 vastaa heksadesimaalilukua FF. Sekaannusten välttämiseksi numerojärjestelmän määrittämisessä heksadesimaaliluvun eteen sijoitetaan hash-symboli #, esimerkiksi #666999. Jokainen kolmesta väristä - punainen, vihreä ja sininen - voi saada arvot välillä 00 - FF. Siten värisymboli on jaettu kolmeen osaan #rrggbb, joissa kaksi ensimmäistä symbolia osoittavat värin punaista komponenttia, kaksi keskimmäistä - vihreää ja kaksi viimeistä - sinistä. On sallittua käyttää lyhennettä #rgb, jossa jokainen merkki tulee kaksinkertaistaa. Näin ollen merkintää #fe0 on pidettävä muodossa #ffee00.
Nimeltä
| Internet Explorer | Kromi | Ooppera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Selaimet tukevat joitain värejä niiden nimellä. Taulukossa 1 näyttää nimet, heksadesimaalikoodin, RGB-, HSL-arvot ja kuvauksen.
| Nimi | Väri | Koodi | RGB | HSL | Kuvaus |
|---|---|---|---|---|---|
| valkoinen | #ffffff tai #ffff | rgb(255 255 255) | hsl(0,0 %, 100 %) | Valkoinen | |
| hopea | #c0c0c0 | rgb(192 192 192) | hsl (0,0 %, 75 %) | Harmaa | |
| harmaa | #808080 | rgb(128 128 128) | hsl (0,0 %, 50 %) | Tummanharmaa | |
| musta | #000000 tai #000 | rgb(0,0,0) | hsl (0,0 %, 0 %) | Musta | |
| kastanjanruskea | #800000 | rgb(128;0;0) | hsl (0,100 %, 25 %) | Tummanpunainen | |
| punainen | #ff0000 tai #f00 | rgb(255;0;0) | hsl(0,100%,50%) | Punainen | |
| oranssi | #ffa500 | rgb(255;165;0) | hsl(38,8 100 %, 50 %) | Oranssi | |
| keltainen | #ffff00 tai #ff0 | rgb(255 255, 0) | hsl(60 100 %, 50 %) | Keltainen | |
| oliivi | #808000 | rgb(128;128;0) | hsl(60 100 %, 25 %) | Oliivi | |
| lime | #00ff00 tai #0f0 | rgb(0;255;0) | hsl(120 100 %, 50 %) | Vaaleanvihreä | |
| vihreä | #008000 | rgb(0;128;0) | hsl(120 100 %, 25 %) | Vihreä | |
| aqua | #00ffff tai #0ffff | rgb(0 255 255) | hsl(180 100 %, 50 %) | Sininen | |
| sininen | #0000ff tai #00f | rgb(0,0,255) | hsl(240 100 %, 50 %) | Sininen | |
| laivasto | #000080 | rgb(0;0;128) | hsl(240 100 %, 25 %) | Tummansininen | |
| sinivihreä | #008080 | rgb(0 128 128) | hsl (180 100 %, 25 %) | Sinivihreä | |
| fuksia | #ff00ff tai #f0f | rgb(255;0;255) | hsl(300,100%,50%) | Vaaleanpunainen | |
| violetti | #800080 | rgb(128;0;128) | hsl(300,100%,25%) | Violetti |
RGB:n käyttö
| Internet Explorer | Kromi | Ooppera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Voit määrittää värin käyttämällä punaista, vihreää ja sinistä arvoa desimaalilukuina. Jokainen kolmesta värikomponentista saa arvon 0 - 255. On myös mahdollista asettaa väri prosentteina, jolloin 100 % vastaa numeroa 255. Osoita ensin avainsana rgb , ja sitten värikomponentit ilmoitetaan suluissa pilkuilla erotettuina, esimerkiksi rgb(255, 128, 128) tai rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Kromi | Ooppera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA-muoto on syntaksilta samanlainen kuin RGB, mutta sisältää alfakanavan, joka määrittää elementin läpinäkyvyyden. Arvo 0 vastaa täysi läpinäkyvyys, 1 - opasiteetti ja väliarvo kuten 0,5 - läpikuultavuus.
RGBA lisättiin CSS3:een, joten CSS-koodi on tarkistettava tätä versiota vastaan. On huomattava, että CSS3-standardi on edelleen kehitteillä ja jotkin ominaisuudet saattavat muuttua. Esimerkiksi taustaväri-ominaisuuteen lisätty RGB-muodossa oleva väri vahvistetaan, mutta tausta-ominaisuuteen lisätty väri ei ole enää voimassa. Samaan aikaan selaimet ymmärtävät molempien ominaisuuksien värin oikein.
HSL
| Internet Explorer | Kromi | Ooppera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Nimi HSL-muodossa muodostuu ensimmäisten kirjainten Hue (sävy), Saturate (kylläisyys) ja Lightness (vaaleus) yhdistelmästä. Sävy on väripyörän väriarvo (kuva 1) ja se ilmoitetaan asteina. 0° vastaa punaista, 120° vihreää ja 240° sinistä. Sävyarvo voi vaihdella välillä 0 - 359.
Riisi. 1. Väripyörä
Kylläisyys on värin intensiteetti, ja se mitataan prosenttiosuutena 0-100%. Arvo 0 % tarkoittaa, että väriä ei ole ja harmaasävyä, 100 % on kylläisyyden maksimiarvo.
Vaaleus määrittää, kuinka kirkas väri on, ja se määritetään prosentteina välillä 0 % - 100 %. Pienet arvot tekevät väristä tummemman ja korkeat arvot vaaleammat ääriarvot 0% ja 100% vastaavat mustaa ja valkoista.
HSLA
| Internet Explorer | Kromi | Ooppera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA-muoto on syntaksilta samanlainen kuin HSL, mutta sisältää alfakanavan elementin läpinäkyvyyden määrittämiseksi. Arvo 0 on täysin läpinäkyvä, 1 on läpinäkymätön ja väliarvo, kuten 0,5, on puoliläpinäkyvä.
RGBA-, HSL- ja HSLA-väriarvot lisätään CSS3:een, joten tarkista koodisi version kelpoisuus, kun käytät näitä muotoja.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Varoitus
Kaikki sivustolla luetellut leijonanpyyntimenetelmät ovat teoreettisia ja perustuvat laskennallisiin menetelmiin. Tekijät eivät takaa turvallisuuttasi käyttäessäsi niitä eivätkä ole vastuussa tuloksista. Muista, että leijona on saalistaja ja vaarallinen eläin!
Tulos tämä esimerkki esitetty kuvassa. 2.
Riisi. 2. Värit verkkosivulla
CSS:n värikoodeja käytetään värien määrittämiseen. Tyypillisesti värikoodeja tai väriarvoja käytetään värin asettamiseen joko elementin etualan värille (esim. tekstin väri, linkin väri) tai elementin taustavärille (taustaväri, lohkon väri). Niitä voidaan käyttää myös painikkeen, reunuksen, merkin, osoittimen ja muiden koristetehosteiden värin vaihtamiseen.
Voit asettaa väriarvosi erilaisia formaatteja. Seuraavassa taulukossa luetellaan kaikki mahdolliset muodot:
Luetellut muodot kuvataan tarkemmin alla.
CSS-värit - Hex-koodit
Heksadesimaalinen värikoodi on kuusinumeroinen esitys väristä. Kaksi ensimmäistä numeroa (RR) edustavat punaista arvoa, kaksi seuraavaa ovat vihreä arvo(GG), ja jälkimmäiset ovat sininen arvo (BB).
CSS-värit - Lyhyet heksadesimaalikoodit
Lyhyt kuusiokoloinen värikoodi on lyhyempi muoto kuuden merkin merkinnöistä. Tässä muodossa jokainen numero toistetaan vastaavan kuusinumeroisen väriarvon tuottamiseksi. Esimerkiksi: #0F0 muuttuu #00FF00.
Heksadesimaaliarvo voidaan ottaa mistä tahansa grafiikasta ohjelmisto, kuten Adobe Photoshop, Core Draw jne.
Jokaista heksadesimaalivärikoodia CSS:ssä edeltää hash-merkki "#". Alla on esimerkkejä heksadesimaalimerkintöjen käytöstä.
CSS-värit - RGB-arvot
RGB-arvo on värikoodi, joka asetetaan rgb()-ominaisuuden avulla. Tämä ominaisuus ottaa kolme arvoa: yksi punaiselle, vihreälle ja siniselle. Arvo voi olla kokonaisluku, 0–255, tai prosenttiosuus.
Huomautus: Kaikki selaimet eivät tue rgb()-väriominaisuutta, joten sen käyttöä ei suositella.
Alla on esimerkki useista väreistä RGB-arvoilla.
Värikoodigeneraattori
Palvelumme avulla voit luoda miljoonia värikoodeja.
Selaimen turvalliset värit
Alla on taulukko 216 väristä, jotka ovat turvallisimpia ja tietokoneista riippumattomia. Nämä värit CSS:ssä vaihtelevat 000000:sta FFFFFF-heksakoodiin. Ne ovat turvallisia käyttää, koska ne varmistavat, että kaikki tietokoneet näyttävät värit oikein käytettäessä 256 väripalettia.
| CSS:n "turvallisten" värien taulukko | |||||
| #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 |
