Kuusinumeroinen värikoodi. Värikoodit Minecraftissa. Esimerkki: Värin määrittäminen RGB:n avulla
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ä, ennen heksadesimaaliluku laita 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. Kukin kolmesta värikomponentista saa arvon 0 - 255. On myös sallittua määrittää väri prosentteina, jolloin 100 % vastaa lukua 255. Määritä ensin rgb-avainsana ja sitten suluissa olevat värikomponentit. , erotettuna pilkuilla, 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 on täysin läpinäkyvä, 1 on läpinäkymätön ja väliarvo, kuten 0,5, on puoliläpinäkyvä.
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 RGB-muodossa oleva taustaväri-ominaisuuteen lisätty 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+ |
HSL-muodon nimi on johdettu ensimmäisten kirjainten Hue (sävy), Saturate (saturation) 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 prosentteina välillä 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 vaaleamman; ää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!
Tämän esimerkin tulos on esitetty kuvassa. 2.
Riisi. 2. Värit verkkosivulla
Vlad Merževitš
SISÄÄN HTML väri määritetään kahdella tavalla: käyttämällä heksadesimaalikoodia ja joidenkin 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; punainen, vihreä, sininen). Tämä malli on additiivinen (lisäyksestä - add), jossa kaikkien kolmen komponentin lisääminen muodostaa valkoisen värin.
Jotta heksadesimaaliväreissä liikkuminen olisi helpompaa, 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äri ympyrä
Heksadesimaaliarvoihin perustuvia värejä ei tarvitse valita empiirisesti. Sopii tähän tarkoitukseen graafinen editori, joka pystyy työskentelemään eri värimallien, esimerkiksi Adobe Photoshopin, kanssa. 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ä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 oman paletin kanssa 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 näyttää suosittujen värinimien nimet.
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. Taustan ja tekstin väri
Esimerkkiteksti
SISÄÄN 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. Yleisin avainsanoja: musta (musta), valkoinen (valkoinen), punainen (punainen), vihreä (vihreä), sininen (sininen) jne.:
Tekstin väri - punainen
Consortium-standardin suosituimmat värit Maailman laajuinen verkko(Englanninkielinen World Wide Web Consortium, 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ä |
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). Merkkejä 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 yleisistä 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.
HTML-värit on merkitty kuudella merkillä vinoviivamerkin jälkeen - esimerkiksi #000000. Nämä kuusi symbolia edustavat eri värien (punainen, vihreä, sininen) suhteita lopullisessa värissä. Tietokoneen näytöllä kuva muodostuu valtavasta määrästä pisteitä, joita kutsutaan pikseleiksi. Jokainen pikseli on pieni valonlähde, kutsutaan sitä "taskulamoksi", joka puolestaan koostuu kolmesta taskulampusta - punaisesta, vihreästä ja sinisestä. Vähentämällä tai lisäämällä yksittäisten värillisten taskulamppujen hehkua saamme halutun värin.
HTML-värikoodit
HTML:n värit esitetään punaisen, sinisen ja vihreän (RGB) heksadesimaalimerkinnällä (HEX).
Pienin väriarvo on 0 (heksadesimaali 00). Suurin väriarvo on 255 (heksa FF).
Heksadesimaaliväriarvo on kolme numeroa alkaen #-merkistä.
Värikoodit (merkitykset)
Väri | HEX-koodi | RGB-koodi |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255;0;0) | |
#00FF00 | rgb(0;255;0) | |
#0000FF | rgb(0;0;255) | |
#FFFF00 | rgb(255 255,0) | |
#00FFFF | rgb(0 255 255) | |
#FF00FF | rgb(255;0;255) | |
#C0C0C0 | rgb(192 192 192) | |
#FFFFFF | rgb(255 255 255) |
16 miljoonaa sävyä
Yhdistämällä punaisen, sinisen ja vihreän arvot välillä 0-255 kunkin värin prosenttiosuudelle saadaan yhteensä yli 16 miljoonaa sävyä (256 x 256 x 256).
Useimmat nykyaikaiset näytöt pystyvät näyttämään vähintään 16 384 eri sävyä (LCD-näytöt pystyvät yleensä näyttämään 262 tuhatta 16 miljoonaa (päivitetty lokakuussa 2013) värit, ja CRT-näytöt voivat näyttää lähes rajattoman määrän värejä).
Alla oleva väritaulukko näyttää punaisen osuuden muutoksen 0:sta 255:een sinisen ja vihreän nolla-arvoilla:
Punainen | HEX-koodi | RGB-koodi |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8;0;0) | |
#100000 | rgb(16;0;0) | |
#180000 | rgb(24;0;0) | |
#200000 | rgb(32;0;0) | |
#280000 | rgb(40;0;0) | |
#300000 | rgb(48;0;0) | |
#380000 | rgb(56;0;0) | |
#400000 | rgb(64;0;0) | |
#480000 | rgb(72;0;0) | |
#500000 | rgb(80;0;0) | |
#580000 | rgb(88;0;0) | |
#600000 | rgb(96;0;0) | |
#680000 | rgb(104;0;0) | |
#700000 | rgb(112;0;0) | |
#780000 | rgb(120;0;0) | |
#800000 | rgb(128;0;0) | |
#880000 | rgb(136;0;0) | |
#900000 | rgb(144;0;0) | |
#980000 | rgb(152;0;0) | |
#A00000 | rgb(160;0;0) | |
#A80000 | rgb(168;0;0) | |
#B00000 | rgb(176;0;0) | |
#B80000 | rgb(184;0;0) | |
#C00000 | rgb(192;0;0) | |
#C80000 | rgb(200;0;0) | |
#D00000 | rgb(208;0;0) | |
#D80000 | rgb(216;0;0) | |
#E00000 | rgb(224;0;0) | |
#E80000 | rgb(232;0;0) | |
#F00000 | rgb(240;0;0) | |
#F80000 | rgb(248;0;0) | |
#FF0000 | rgb(255;0;0) |
Harmaan sävyt
Harmaan sävyjen saamiseksi käytetään yhtä suuria osuuksia kaikista väreistä. Jotta oikean värin valitseminen olisi helpompaa, tarjoamme sinulle harmaan sävykoodit
Harmaan sävyt | HEX-koodi | RGB-koodi |
---|---|---|
#000000 | rgb(0,0,0) | |
#080808 | RGB(8;8;8) | |
#101010 | rgb(16;16;16) | |
#181818 | rgb(24;24;24) | |
#202020 | rgb(32;32;32) | |
#282828 | rgb(40;40;40) | |
#303030 | rgb(48;48;48) | |
#383838 | rgb(56;56;56) | |
#404040 | rgb(64;64;64) | |
#484848 | rgb(72;72;72) | |
#505050 | rgb(80;80;80) | |
#585858 | rgb(88;88;88) | |
#606060 | RGB(96;96;96) | |
#686868 | rgb(104 104 104) | |
#707070 | rgb(112 112 112) | |
#787878 | rgb(120 120 120) | |
#808080 | rgb(128 128 128) | |
#888888 | rgb(136 136 136) | |
#909090 | rgb(144 144 144) | |
#989898 | rgb(152 152 152) | |
#A0A0A0 | rgb(160 160 160) | |
#A8A8A8 | rgb(168 168 168) | |
#B0B0B0 | rgb(176 176 176) | |
#B8B8B8 | rgb(184 184 184) | |
#C0C0C0 | rgb(192 192 192) | |
#C8C8C8 | rgb(200 200 200) | |
#D0D0D0 | rgb(208 208 208) | |
#D8D8D8 | rgb(216 216 216) | |
#E0E0E0 | rgb(224 224 224) | |
#E8E8E8 | rgb(232 232 232) | |
#F0F0F0 | rgb(240 240 240) | |
#F8F8F8 | rgb(248 248 248) | |
#FFFFFF | rgb(255 255 255) |
Selainten väliset (kaikki selaimet) html-värien nimet
Kokoelma 150 värin nimeä html-muodossa, tuettu kaikissa selaimissa.
Standardoidut värinimet
W3C listaa 16 kelvollista värinimeä HTML:lle ja CSS:lle: vesi, musta, sininen, fuksia, harmaa, vihreä, lime, kastanjanruskea (kastanja), navy (ultramariini), oliivi (oliivi), violetti (violetti), punainen (punainen) , hopea (hopea), tavi (harmaa), valkoinen (valkoinen) ja keltainen (keltainen).
Käytettäessä värejä, jotka eivät sisälly tähän luetteloon, on oikeampaa käyttää niiden heksadesimaalikoodia (HEX) tai RGB-koodia.
Turvalliset värit
Useita vuosia sitten, kun tietokoneet pystyivät tukemaan enintään 256 eri väriä, ehdotettiin luetteloa 216 "Web Safe Colors" -väristä, joista 40 oli varattu järjestelmälle.
Tämä 216 värin paletti luotiin näyttämään värit oikein 256 värin palettitilassa.
Tällä ei nyt ole väliä, koska useimmat tietokoneet ympäri maailmaa tukevat miljoonia värisävyjä. Joka tapauksessa tässä on luettelo näistä väreistä:
000000 | 000033 | 000066 | 000099 | 0000CC | 0000 FF |
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 | 3300 FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33 FF00 | 33FF33 | 33FF66 | 33 FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600 FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66 FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900 FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99 FF00 | 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 |
3300 FF | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
9900 FF | FF9933 | FF9966 | 9999 FF | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
On olemassa useita tapoja esittää väriä web-suunnittelussa.
HEX on heksadesimaalinen värinesitysjärjestelmä, joka perustuu kantaan 16. Tämä järjestelmä käyttää arabialaisia desimaalilukuja 0-9 ja kirjaimet A:sta F täydentämään digitaalista numeroa 16:een. Verkkosuunnitteluun otettiin 16 ensisijaista (avain) väriä, ns. heksadesimaalivärikoodi #RRGGBB, jossa jokainen pari vastaa omasta osuudestaan väristä: RR - punainen , GG - vihreä ja BB - sininen. Jokainen värifraktio vaihtelee välillä 00 - FF.
Kaksi muuta värin esitystapaa web-suunnittelussa ovat: RGB(*,*,*) muodossa, jossa jokainen värin "*"-osa esitetään desimaaliluvuilla 0-255 ja värien nimillä englanniksi.
Värikuvaa luotaessa pääongelma on oikea värientoisto päällä erilaisia tyyppejä tietokoneet, näytöt ja selaimet. Jos selain ei pysty näyttämään väriä oikein, se valitsee samanlaisen tai sekoittaa useita värejä. Ja joskus se voidaan korvata jollain täysin eri värillä.
Pöytä 16 perusväriä, joita käytetään kaikissa selaimissa
Nimi | Väri | Hex | (RGB) |
Aqua (meren aalto) | #00FFFF | (000,255,255) | |
Musta | #000000 | (000,000,000) | |
Sininen | #0000FF | (000,000,255) | |
fuksia (magenta) | #FF00FF | (255,000,255) | |
harmaa | #808080 | (128,128,128) | |
Vihreä | #008000 | (000,128,000) | |
Lime (kirkkaan vihreä) | #00FF00 | (000,255,000) | |
Kastanjanruskea (tumma viininpunainen) | #800000 | (128,000,000) | |
Navy (tummansininen) | #000080 | (000,000,128) | |
Oliivi | #808000 | (128,128,000) | |
Violetti | #800080 | (128,000,128) | |
Punainen | #FF0000 | (255,000,000) | |
Hopea | #C0C0C0 | (192,192,192) | |
Taal (harmaa-vihreä) | #008080 | (000,128,128) | |
Valkoinen | #FFFFFF | (255,255,255) | |
Keltainen | #FFFF00 | (255,255,000) |
Pöytä violetti värit ja sen sävyt
Nimi | Väri | Hex | (RGB) |
Magenta (magenta) | #FFCBDB | (255,203,219) | |
Magenta (magenta) | #FF0099 | (255,000,153) | |
Magenta (magenta) | #F95A61 | (249,090,097) | |
fuksia (fuksia) | #FF00FF | (255,000,255) | |
Mauvein (aniliinivioletti) | #EF0097 | (239,000,151) | |
Lohen pinkki (oranssi pinkki) | #FF91A4 | (255,145,164) | |
Cenise (violetti sävy) | #DE3163 | (153,149,140) | |
Munakoiso (munakoiso) | #990066 | (153,000,132) | |
Laventeli poskipuna (vaaleanpunainen-laventeli) |  #FFF0F5 | (255,240,245) | |
Lila (lila) | #C8A2C8 | (200,162,200) | |
Magenta (magenta) | #FF008F | (255,000,143) | |
Orkidea (orkidea) | #DA70D6 | (218,112,214) | |
Puna-violetti (violetti-punainen) | #C71585 | (199,021,133) | |
Sanguine (sanguine) | #92000A | (146,000,010) | |
Ohdake (violetti sävy) | #D8BFD8 | (185,211,238) | |
Violetti-munakoiso (violetti sävy) | #991199 | (153,017,153) | |
Rosa vivo (syvän vaaleanpunainen) | #FF007F | (255,000,127) | |
Laventeli-ruusu (violetti sävy) | #FBA0E3 | (108,123,139) | |
Mountbatten vaaleanpunainen | #997ABD | (153,122,141) |
Pöytä harmaa värit ja sen sävyt
Nimi | Väri | Hex | (RGB) |
harmaa | #808080 | (128,128,128) | |
harmaa | #bebebe | (190,190,190) | |
(Harmaa-sävy) | #858585 | (133,133,133) | |
Harmaa 33 | #545454 | (084,084,084) | |
(Harmaa liuskekivi) | #708090 | (112,128,144) | |
(Kvartsi) | #99958с | (153,149,140) | |
(Vaalean harmaa) | #bbbbbb | (187,187,187) | |
(Hopea) | #c0c0c0 | (192,192,192) | |
(harmaa-valkoinen) | #f0f0f0 | (240,240,240) | |
(Abdel-Kerimin parta) | #e0e0e0 | (224,224,224) | |
Vaaleanharmaa (vaaleanharmaa) | #d3d3d3 | (211,211,211) | |
LightStateGray() | #778899 | (119,136,153) | |
StateGray-1 (vaalean ruiskukansininen1) | #c6e2ff | (198,226,255) | |
StateGray-2 (vaalean ruiskukansininen2) | #b9d3ee | (185,211,238) | |
StateGray3() | #9fb6cd | (159,182,205) | |
StateGray4() | #6c7b8b | (108,123,139) |