Vlad Merževitš
HTML:ssä väri määritetään kahdella tavalla: heksadesimaalikoodilla ja tiettyjen värien 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 desimaaliluku 255 vastaa heksadesimaalilukua FF.
Sekaannusten välttämiseksi numerojärjestelmän määrittelyssä heksadesimaalilukua edeltää hash-symboli #, 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). 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. Mitä suurempi luku, sitä vaaleampi väri, ja arvot vaihtelevat välillä #000000 (musta) #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. Sama koskee vihreää (#00FF00) ja sinistä (#0000FF).
- Keltainen (#FFFF00) valmistetaan 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äripyörä
Heksadesimaaliarvoihin perustuvia värejä ei tarvitse valita empiirisesti. Tähän tarkoitukseen sopii graafinen editori, joka voi toimia eri värimallien kanssa, 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 valintaan Photoshopissa
Webin värit
Jos asetat näytön värintoiston laaduksi 8-bit (256 väriä), sama väri voidaan näyttää eri tavalla eri selaimissa. 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. Tällä hetkellä 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 näyttää suosittujen värinimien nimet.
Värin nimi | Väri | Kuvaus | Heksadesimaaliarvo |
---|---|---|---|
musta | Musta | #000000 | |
sininen | Sininen | #0000FF | |
fuksia | Vaalea violetti | #FF00FF | |
harmaa | Tumman harmaa | #808080 | |
vihreä | Vihreä | #008000 | |
lime | Vaaleanvihreä | #00FF00 | |
kastanjanruskea | Tummanpunainen | #800000 | |
laivasto | Tummansininen | #000080 | |
oliivi | Oliivi | #808000 | |
violetti | Tumman 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. Taustan ja tekstin väri
Esimerkkiteksti
Tässä esimerkissä taustaväri asetetaan käyttämällä tunnisteen bgcolor-attribuuttia
ja tekstin väri text-attribuutin kautta. Vaihtelemista varten text-attribuutti on asetettu heksadesimaaliluvuksi ja attribuutti bgcolor on varattu avainsanaksi teal .Kuten tiedät, väri voi vaikuttaa ihmisen tilaan: sekä henkiseen että fyysiseen. Joka päivä Internet-sivustoja selatessaan silmät arvioivat miljoonia värejä ja sävyjä. Verkkosuunnittelija, joka tuntee värien psykologian, voi manipuloida vierailijan mielialaa tiettyjen tavoitteiden saavuttamiseksi.
Tämä johtuu siitä, että jotkut sävyt rauhoittavat ja jotkut päinvastoin kiihottavat. Seuraavaksi puhumme siitä, kuinka värit syntetisoidaan ja näytetään tietokonetekniikan avulla.
RGB on värimalli, joka edustaa menetelmää saada kaikki värit ja niiden sävyt sekoittamalla eri suhteissa kolme pääkomponenttia, jotka ovat:
- punainen ( Punainen);
- vihreä väri ( Vihreä);
- sininen väri ( Sininen).
Tästä tulee lyhennetty nimi RGB. Nämä värit valittiin pääväreiksi syystä: syynä on ihmissilmän verkkokalvon fysiologia ja se, miten se havaitsee ne:
RGB-malli on edelleen suosituin nykyään, ja sitä käytetään värien toistamiseen televisioruuduilla ja tietokonenäytöissä. Koska valmistajat antavat tuotteilleen erilaisia ominaisuuksia, vuonna 1996 luotiin yhtenäinen RGB-pohjainen värisynteesijärjestelmä nimeltä sRGB, jonka parissa Microsoft ja HP työskentelivät yhdessä.
Värin numeerinen esitys
Kuten aiemmin mainittiin, RGB-värit muodostetaan sekoittamalla päävärejä. Jokaisen niistä intensiteetin kuvaamiseksi otettiin käyttöön malli, jossa väriä edustaa alue 0-255 (8 bittiä), joka heksadesimaalimuodossa vastaa 00-FF.
Eli päävärit näyttävät tältä:
- punainen – RGB (255,0,0);
- Vihreä – RGB (0 255,0);
- Sininen – RGB (0,0,255);
Jos värin intensiteetti saa arvot alle 255, saadaan erilaisia punaisen, vihreän ja sinisen sävyjä. Seuraavassa on taulukko niiden asteikoista sekä kunkin sävyn heksadesimaaliarvoista:
RGB-väritaulukot
Luonnollisesti päävärien asteikkojen lisäksi on sekoitettuja, ja niiden määrä on melko suuri. Siksi luotiin RGB-värien taulukko, joka esittää kaikki olemassa olevat sävyt sekä niiden nimet ja numeeriset esitykset ( desimaali- ja heksadesimaalimuodossa).
Voit katsoa sen täältä. Tämä taulukko helpottaa huomattavasti web-suunnittelijoiden elämää, sillä muutamassa sekunnissa voit löytää haluamasi sävyn ja selvittää sen numeerisen esityksen.
Turvallinen RGB-väripaletti
Jossain vaiheessa kuitenkin ilmeni ongelma värien näyttämisessä eri selaimissa ja sen ratkaisemiseksi koottiin ns. ”turvallinen” RGB-värien paletti, joka johdettiin matemaattisilla laskelmilla.
Kun selain ei pysty näyttämään väriä oikein, se yrittää saada jotain lähelle tarvitsemaansa sekoittamalla vierekkäisiä värejä, ja todennäköisesti tulos on täysin mahdoton hyväksyä:
Käyttämällä tämän paletin RGB-värikoodeja web-kehittäjä voi olla mielenrauhallinen koskien värien näyttämistä verkkosivustonsa sivuilla, kun niitä tarkastellaan eri selaimilla, alustoilla ja näytöillä. Vaikka tällä hetkellä turvavärien taulukko on menettämässä merkityksensä ( tekninen kehitys ei vieläkään pysähdy), sitä käyttämällä voit, kuten sanotaan, nukkua rauhassa.
Kullan väri RGB-mallissa
Sanaa "kulta" käytettiin ensimmäisen kerran 1300-luvun alussa kuvaamaan Aurum-nimisen alkuaineen väriä - kultaa. RGB-mallissa kullan väriä edustavat seuraavat numeroarvot:
- RGB (255, 215, 0) – desimaalijärjestelmä;
- HEX #FFD700 – heksadesimaalijärjestelmä.
Beige väri RGB-mallissa
Beige värillä on melko merkittävä paikka historiassa, vaikka se ei olekaan ilmaisuvoimaisin. Monet kulttuurimonumentit, erityisesti muinaiset veistokset, tehtiin vuolukivestä ja vuolukivestä, joilla on beige sävy. RGB-mallissa beigellä on seuraavat numeeriset esitykset:
- RGB (245, 245, 220) – desimaalijärjestelmä;
- HEX #F5F5DC – heksadesimaalijärjestelmä.
Nykyään, varsinkin World Wide Webissä, on harvinaista nähdä niin "tylsää" väriä. Kehittäjät suosivat tarttuvaa suunnittelua kirkkailla väreillä. Tekninen kehitys mahdollistaa valtavan määrän värejä näyttämisen näytöillä, mikä tekee kuvasta realistisemman.
Hyvä Huono
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ä arvona englanninkielistä värin nimeä. Yleisimmät avainsanat: musta, valkoinen, punainen, vihreä, sininen jne.:
Tekstin väri - punainen
World Wide Web Consortium (W3C) -standardin suosituimmat värit:
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ä |
Esimerkki eri värinimien käytöstä:
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 se voi siksi 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 saman keskivihreän värin:
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 desimaaliluku 255 vastaa suurinta FF-arvoa heksadesimaalimuodossa. Toisin kuin desimaalijärjestelmässä, heksadesimaalilukua edeltää hash-symboli. # Esimerkiksi #FF0000 näkyy punaisena, koska punainen on asetettu korkeimpaan arvoonsa (FF) ja muiden värien vähimmäisarvoon (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):
Englanninkielinen 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 | |
Merenvihreä | 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.
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 määrittää väriarvosi eri muodoissa. 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 vihreää arvoa (GG) ja kaksi viimeistä sinistä arvoa (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 grafiikkaohjelmistosta, 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ä käyttämällä RGB-arvoja.
Värikoodigeneraattori
Palvelumme avulla voit luoda miljoonia värikoodeja.
Selaimen turvalliset värit
Alla on taulukko 216 väristä, jotka ovat turvallisimpia ja tietokoneista riippumattomimpia. Nämä värit CSS:ssä vaihtelevat 000000:sta FFFFFF-heksadesimaalikoodiin. Ne ovat turvallisia käyttää, koska ne varmistavat, että kaikki tietokoneet näyttävät värit oikein, kun ne työskentelevät 256-väripaletin kanssa.
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 |
>> Värinhallinta
Heksadesimaaliset RGB-väriarvot
Värin kuvaus- ja käsittelymenetelmät eroavat toisistaan siinä, mihin lopulliseen esitykseen ne on tarkoitettu. Verrataanpa vaikkapa värien esitystapaa tulostukseen ja tietokonenäyttöihin. Ensimmäisessä tapauksessa otetaan perusta valkoinen sen paperin väri, jolle myöhemmin levitetään kolme pääväriä: sininen, violetti Ja keltainen. Sekoittaen keskenään ja paperin valkoisen värin kanssa eri suhteissa nämä kolme pääväriä antavat erilaisia värisävyjä, paitsi puhdasta mustaa, tai maalien täydellisessä puuttuessa valkoista paperia. Jos lisäämme niihin mustan värin, saamme CMYK-menetelmä värin siirtämiseksi, kun haluttu väri saadaan vähentämällä puuttuvat värit valkoisesta.
Toisessa tapauksessa otetaan perusta musta näytön väri, jonka jokainen solu hehkuu jollakin kolmesta väristä: punainen-punainen, vihreä-vihreä ja sininen-sininen. Sitten ilman hehkua saamme puhtaan mustan näytön värin, ja mikä tahansa vaadituista väreistä saadaan kunkin kolmen värin suhteesta. Tässä tapauksessa saamme RGB- värinsiirtomenetelmä. Päävärien arvot voivat vaihdella 0
to 255
, tai alkaen 0%
to 100%
, tai se voidaan esittää heksadesimaaliarvona. Alla olevasta kuvasta näet päävärien sekoittamisen tulokset.
Heksadesimaalilukujärjestelmässä, toisin kuin desimaalilukujärjestelmässä, ei ole kymmentä numeroa, vaan kuusitoista - tästä syystä nimi. Näin ollen kahden numeron yhdistelmistä voi olla vain ei-toistuvia muunnelmia - 256 , jatkaaksesi numerosarjaa sen jälkeen 9 kirjeet lähettäjältä A to F joten sarja näyttää tältä -
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Tässä tapauksessa väri määritellään kolmella heksadesimaaliluvulla, joista jokainen koostuu kahdesta numerosta. Ensimmäinen numero määrittää intensiteetin punainen värit, medium- vihreä, viimeinen- sininen värit. Kaikki luvut voivat saada arvoja alueella alkaen 00 to FF(0 - 255). Esimerkiksi: vihreä väri annetaan muodossa #00FF00, punainen - kuten #FF0000, sininen - kuten #0000FF, valkoinen - kuten #FFFFFF, täydellinen värin tai mustan puuttuminen annetaan muodossa #000000 .
Alla olevassa lomakkeessa voit määrittää heksadesimaaliarvot jokaiselle kolmelle värille ja nähdä niiden sekoituksen tuloksen napsauttamalla tuloskenttää.
Esimerkkejä joistakin heksadesimaalisista RGB-väriarvoista: punaisen, sinisen ja vihreän sävyt.
näkymä | koodi | näkymä | koodi | näkymä | koodi | näkymä | koodi | näkymä | koodi | näkymä | koodi |
#010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
#100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
#200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
#300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
#400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
#500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
#600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
#700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Värin määrittäminen merkkijonokirjaimilla
Käytön helpottamiseksi joillekin väreille ja niiden yhdistelmille annettiin nimiä, jotka kaikki selaimet tunnistavat, ja monet niistä on voitu määrittää nimellä. Alla olevassa taulukossa on joitain värien nimiä:
näkymä | Nimi | näkymä | Nimi | näkymä | Nimi | näkymä | Nimi |
Valkoinen | Punainen | Oranssi | Keltainen | ||||
Vihreä | Sininen | Violetti | Musta | ||||
Aliceblue | Antiikkivalkoinen | Aqua | Akvamariini | ||||
Taivaansininen | Beige | Äyriäiskeitto | Blanchedalmond | ||||
Sinivioletti | Ruskea | Burlywood | Cadetblue | ||||
Chartreuse | Suklaa | Koralli | Ruiskukansininen | ||||
Cornsilkki | Crimson | Syaani | Tummansininen | ||||
Tummansyaani | Darkgoldenrod | Tummanharmaa | Tummanvihreä | ||||
Darkkhaki | Tummanmagenta | tummanvihreä | Tumma | ||||
Darkorchid | Tumma | Tummalohi | Tummanvihreä | ||||
Tummansininen | Tummanharmaa | Tummaturkoosi | Tummanvioletti | ||||
Deeppinkki | Deepskyblue | Himmeä | Dodgerblue | ||||
Tulenkestävä tiili | Kukkavalkoinen | Metsänvihreä | Fuschia | ||||
Gainsboro | Ghostwhite | Kulta | Kultapuikko | ||||
Harmaa | Vihreänkeltainen | Mesikaste | Hot pink | ||||
Intiaanipunainen | Indigo | Norsunluu | Khaki | ||||
Laventeli | Laventelipuna | Sitruunasifonki | Vaaleansininen | ||||
Vaaleakoralli | Vaaleansyaani | Vaalean kylmän keltainen | Vaaleanvihreä | ||||
Vaaleanharmaa | Vaaleanpunainen | Kevytlohi | Vaaleanvihreä | ||||
Vaaleansininen | Vaalean harmaa | Vaaleanteräksensininen | Vaaleankeltainen | ||||
Lime | Limegreen | Liinavaatteet | Magenta | ||||
Kastanjanruskea | Mediumaquamariini | Keskisininen | Mediummorchid | ||||
Keskivioletti | Keskivihreä | Keskipitkänsininen | Keskikeväänvihreä | ||||
Keskiturkoosi | Keskivioletti | Midnightblue | Minttuvoide | ||||
Mistyrose | Navajovalkoinen | Laivasto | Oldlace | ||||
Oliivi | Oliverab | Oranssittu | Orkidea | ||||
Palegoldenrod | Paleggreen | Paletteurquoise | Vaaleanpunainen | ||||
Papayawhip | Persikkapuff | Peru | Vaaleanpunainen | ||||
Luumu | Powderblue | Ruusunruskea | Royalblue | ||||
Satulanruskea | Merenvihreä | Kotilo | Sienna | ||||
Hopea | Taivaansininen | Slateblue | Slategray | ||||
Lumi | Keväänvihreä | Teräksensininen | Tan | ||||
Sinivihreä | Ohdake | Tomaatti | Turkoosi | ||||
Violetti | Vehnä | Whitesmoke | Keltaisenvihreä |
Turvallisen väripaletin käyttö
Valitettavasti oikea värintoisto on ongelma eri alustoilla ja eri järjestelmäasetuksissa. Asia on siinä, että selain yrittää aina säätää asiakirjan väripaletin järjestelmäasetusten ja näytön ominaisuuksien mukaan sekoittamalla itsenäisesti värejä ja korvaamalla niitä. Tämän seurauksena joskus käyttäjä ei näe tarkalleen sitä, mitä verkkovastaava halusi näyttää hänelle. Ulospääsy tästä tilanteesta löydettiin käyttämällä palettia, jonka jokainen väri on taatusti samanlainen kaikissa selaimissa eri alustoilla. Tämä on ns taattu paletti, jota kutsutaan myös turvallinen paletti. Tämä paletti sisältää värejä, joiden värikomponentit saavat seuraavat arvot: 00 ,33 ,66 ,99 , CC,FF, kaikilla mahdollisilla tavoilla 216 niiden yhdistelmiä.
näkymä | koodi | näkymä | koodi | näkymä | koodi | näkymä | koodi | näkymä | koodi | näkymä | koodi |
FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
99 FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
66 FF00 | 66FF33 | 33 FF00 | 33CC00 | 339900 | 009900 | ||||||
33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
66FF99 | 33 FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
6699FF | 3366FF | 0000 FF | 0000CC | 0033CC | 000033 | ||||||
3333FF | 3300 FF | 3300 cc | 3333CC | 000099 | 000066 | ||||||
9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
CCCCFF | 9999FF | 6666FF | 6600 FF | 330099 | 330066 | ||||||
9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
CC99FF | CC66FF | 9933FF | 9900 FF | 660099 | 663366 | ||||||
CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
FFCCCC | 9999 FF | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
FF6633 | CC3300 | 3300 FF | FF0000 | CC0000 | 990000 | ||||||
FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
9900 FF | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |