Vihreä väri koodissa. Tyylien värit voidaan määrittää eri tavoin: heksadesimaaliarvolla, nimellä, RGB-, RGBA-, HSL-, HSLA-muodossa
>> Värinhallinta
Heksadesimaaliset RGB-väriarvot
Värien 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ärit voivat vaihdella 0
ennen 255
, tai alkaen 0%
ennen 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 ennen 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 asia- sininen värit. Kaikki luvut voivat saada arvoja alueella alkaen 00 ennen 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 | ||||
| Keltaisen vihreä | Suklaa | Koralli | Ruiskukansininen | ||||
| Cornsilkki | Crimson | Syaani | Tummansininen | ||||
| Tummansyaani | Darkgoldenrod | Tumman harmaa | Tummanvihreä | ||||
| Darkkhaki | Tummanmagenta | tummanvihreä | Tummansininen | ||||
| Darkorchid | Tummanpunainen | Tummalohi | Tummanvihreä | ||||
| Tummansininen | Tummanharmaa | Tummaturkoosi | Tummanvioletti | ||||
| Deeppinkki | Deepskyblue | Hämärä | Dodgerblue | ||||
| Tulenkestävä tiili | Kukkavalkoinen | Metsänvihreä | Fuschia | ||||
| Gainsboro | Ghostwhite | Kulta | Kultapuikko | ||||
| harmaa | Vihreä keltainen | Mesikaste | Kuuma pinkki | ||||
| Intiaanipunainen | Indigo | Norsunluu | Khaki | ||||
| Laventeli | Laventelipuna | Sitruunasifonki | Vaaleansininen | ||||
| Vaaleakoralli | Vaaleansyaani | Vaalean kylmän keltainen | Vaaleanvihreä | ||||
| Vaalean harmaa | Vaalea pinkki | Kevytlohi | Vaaleanvihreä | ||||
| Vaaleansininen | Vaalean harmaa | Vaaleanteräksensininen | Vaaleankeltainen | ||||
| Lime | Limenvihreä | Liinavaatteet | Magenta | ||||
| Kastanjanruskea | Mediumaquamariini | Keskisininen | Mediummorchid | ||||
| Keskivioletti | Keskivihreä | Keskipitkänsininen | Keskikeväänvihreä | ||||
| Keskiturkoosi | Keskivioletti | Yönsininen | Minttuvoide | ||||
| Mistyrose | Navajovalkoinen | Laivasto | Oldlace | ||||
| Oliivi | Oliverab | Oranssinpunainen | Orkidea | ||||
| Palegoldenrod | Vaaleanvihreä | Paletteurquoise | Vaaleanpunainen | ||||
| Papayawhip | Persikkapuff | Peru | Vaaleanpunainen | ||||
| Luumu | Puuterinsininen | Ruusunruskea | Kuninkaallisen sininen | ||||
| Satulanruskea | Meren vihreä | Kotilo | Sienna | ||||
| Hopea | Taivaansininen | Slateblue | Slategray | ||||
| Lumi | Keväänvihreä | Teräksensininen | Tan | ||||
| Sinivihreä | Ohdake | Tomaatti | Turkoosi | ||||
| Violetti | Vehnä | Valkoinen savu | 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 |
HEX/HTML
HEX-väri on vain RGB:n heksadesimaaliesitys.
Värit esitetään kolmena heksadesimaalilukuryhmänä, joissa jokainen ryhmä vastaa omasta väristään: #112233, jossa 11 on punainen, 22 on vihreä, 33 on sininen. Kaikkien arvojen on oltava välillä 00 ja FF.
Monet sovellukset mahdollistavat lyhennetyn heksadesimaalivärimerkinnän. Jos jokainen kolmesta ryhmästä sisältää samat merkit, esimerkiksi #112233, ne voidaan kirjoittaa numerolla #123.
- h1 ( väri: #ff0000; ) /* punainen */
- h2 ( väri: #00ff00; ) /* vihreä */
- h3 ( väri: #0000ff; ) /* sininen */
- h4 ( väri: #00f; ) /* sama sininen, lyhenne */
RGB
RGB-väriavaruus (Red, Green, Blue) koostuu kaikista mahdollisista väreistä, jotka voidaan luoda sekoittamalla punaista, vihreää ja sinistä. Tämä malli on suosittu valokuvauksessa, televisiossa ja tietokonegrafiikassa.
RGB-arvot määritetään kokonaislukuina välillä 0 - 255. Esimerkiksi rgb(0,0,255) näytetään sinisenä, koska sinisen parametrin arvo on suurin (255) ja muut arvot ovat 0.
Jotkut sovellukset (erityisesti verkkoselaimet) tukevat RGB-arvojen prosentuaalista tallennusta (0 % - 100 %).
- h1 ( väri: rgb(255, 0, 0); ) /* punainen */
- h2 ( väri: rgb(0, 255, 0); ) /* vihreä */
- h3 ( väri: rgb(0, 0, 255); ) /* sininen */
- h4 ( väri: rgb(0%, 0%, 100%); ) /* sama sininen, prosenttimerkintä */
RGB-väriarvoja tuetaan kaikissa yleisimmissä selaimissa.
RGBA
Viime aikoina nykyaikaiset selaimet ovat oppineet työskentelemään RGBA-värimallin kanssa - RGB-laajennus, joka tukee alfakanavaa, joka määrittää objektin peittävyyden.
RGBA-väriarvo on määritetty seuraavasti: rgba(punainen, vihreä, sininen, alfa). Alfa-parametri on luku, joka vaihtelee välillä 0,0 (täysin läpinäkyvä) 1,0:aan (täysin läpinäkymätön).
- h1 ( väri: rgb(0, 0, 255); ) /* sininen tavallisessa RGB:ssä */
- h2 ( väri: rgba(0, 0, 255, 1); ) /* sama sininen RGBA:ssa, koska peittävyys: 100 % */
- h3 ( väri: rgba(0, 0, 255, 0,5); ) /* peittävyys: 50 % */
- h4 ( väri: rgba(0, 0, 255, .155); ) /* peittävyys: 15,5 % */
- h5 ( väri: rgba(0, 0, 255, 0); ) /* täysin läpinäkyvä */
RGBA:ta tukevat IE9+, Firefox 3+, Chrome, Safari ja Opera 10+.
HSL
HSL-värimalli on esitys RGB-mallista sylinterimäisessä koordinaattijärjestelmässä. HSL edustaa värejä intuitiivisemmin ja ihmisten luettavammin kuin tyypillinen RGB. Mallia käytetään usein grafiikkasovelluksissa, väripaletteissa ja kuva-analyysissä.
HSL tarkoittaa Hue (väri/sävy), Saturation (saturation), Lightness/Luminance (vaaleus/vaaleus/kirkkaus, ei pidä sekoittaa kirkkauteen).
Sävy määrittää värin sijainnin väriympyrässä (0 - 360). Kylläisyys on kylläisyyden prosenttiarvo (0 % - 100 %). Vaaleus on prosenttiosuus vaaleudesta (0 % - 100 %).
- h1 ( väri: hsl(120, 100%, 50%); ) /* vihreä */
- h2 ( väri: hsl(120, 100%, 75%); ) /* vaaleanvihreä */
- h3 ( väri: hsl(120, 100%, 25%); ) /* tummanvihreä */
- h4 ( väri: hsl(120, 60%, 70%); ) /* pastellinvihreä */
HSL:ää tuetaan seuraavissa versioissa: IE9+, Firefox, Chrome, Safari ja Opera 10+.
HSLA
Samoin kuin RGB/RGBA, HSL:ssä on HSLA-tila, joka tukee alfakanavaa osoittamaan objektin peittävyyttä.
HSLA-väriarvo määritetään seuraavasti: hsla(sävy, kylläisyys, vaaleus, alfa). Alfa-parametri on luku, joka vaihtelee välillä 0,0 (täysin läpinäkyvä) 1,0:aan (täysin läpinäkymätön).
- h1 ( väri: hsl(120, 100%, 50%); ) /* vihreä normaalissa HSL:ssä */
- h2 ( väri: hsla(120, 100%, 50%, 1); ) /* sama vihreä HSLA:ssa, koska peittävyys: 100% */
- h3 ( väri: hsla(120, 100%, 50%, 0,5); ) /* peittävyys: 50% */
- h4 ( väri: hsla(120, 100%, 50%, .155); ) /* peittävyys: 15,5 % */
- h5 ( väri: hsla(120, 100%, 50%, 0); ) /* täysin läpinäkyvä */
CMYK
CMYK-värimalli yhdistetään usein väritulostukseen ja -tulostukseen. CMYK (toisin kuin RGB) on vähentävä malli, mikä tarkoittaa, että korkeammat arvot liittyvät tummempiin väreihin.
Värit määräytyvät syaanin (Cyan), magentan (Magenta), keltaisen (keltainen) suhteen, johon on lisätty musta (Key/blackK).
Jokainen numero, joka määrittää värin CMYK:ssä, edustaa tietyn värin musteen prosenttiosuutta, joka muodostaa väriyhdistelmän, tai tarkemmin sanottuna sen näyttöpisteen kokoa, joka tulostetaan valoladontakoneella kyseisen väriselle filmille (tai suoraan painolevylle CTP:n tapauksessa).
Esimerkiksi PANTONE 7526 -värin saamiseksi sekoitat 9 osaa syaania, 83 osaa magentaa, 100 osaa keltaista ja 46 osaa mustaa. Tämä voidaan merkitä seuraavasti: (9,83,100,46). Joskus käytetään seuraavia nimityksiä: C9M83Y100K46 tai (9%, 83%, 100%, 46%) tai (0,09/0,83/1,0/0,46).
HSB/HSV
HSB (tunnetaan myös nimellä HSV) on samanlainen kuin HSL, mutta ne ovat kaksi eri värimallia. Molemmat perustuvat sylinterimäiseen geometriaan, mutta HSB/HSV perustuu "hexcone" -malliin, kun taas HSL perustuu "bi-hexcone" -malliin. Taiteilijat käyttävät usein mieluummin tätä mallia, on yleisesti hyväksyttyä, että HSB/HSV-laite on lähempänä luonnollista värien havaitsemista. Erityisesti HSB-värimallia käytetään Adobe Photoshopissa.
HSB/HSV tarkoittaa Hue (väri/sävy), Saturation (saturation), Brightness/Value (kirkkaus/arvo).
Sävy määrittää värin sijainnin väriympyrässä (0 - 360). Kylläisyys on kylläisyyden prosentuaalinen arvo (0 % - 100 %). Kirkkaus on prosenttiosuus kirkkaudesta (0 % - 100 %).
XYZ
XYZ-värimalli (CIE 1931 XYZ) on puhtaasti matemaattinen avaruus. Toisin kuin RGB-, CMYK- ja muut mallit, XYZ:n pääkomponentit ovat "imaginaarisia", mikä tarkoittaa, että X:tä, Y:tä ja Z:tä ei voi yhdistää mihinkään sekoitettavien värien joukkoon. XYZ on päämalli lähes kaikille muille tekniikan aloilla käytettäville värimalleille.
LAB
LAB-värimalli (CIELAB, “CIE 1976 L*a*b*”) lasketaan CIE XYZ-avaruudesta. Labin suunnittelutavoitteena oli luoda väriavaruus, jossa värimuutokset olisivat lineaarisempia ihmisen havainnon kannalta (verrattuna XYZ:ään), eli niin, että sama muutos värikoordinaattiarvoissa väriavaruuden eri alueilla tuottaa saman värinmuutoksen tunteen.
Katso tarkkaan piirustusta. Pudotusvalikon tausta on tehty läpikuultavaksi. Tämä on melko yleinen suunnittelutekniikka. Mietitään, miten tämä voidaan toteuttaa.
Tehtävä
Tee selaimen väristä läpikuultava.
Ratkaisu
Ensimmäinen ajatus tässä tilanteessa on käyttää png24-kuvaa, jonka taustalla on esiasetettu läpikuultavuus. Mutta tämä kuva on täysin tarpeeton. Voit pärjätä hyvin ilman sitä (ja siksi ilman ylimääräistä pyyntöä palvelimelle). Yritetään silti löytää optimaalinen ratkaisu.
Toinen ajatus on käyttää . Mutta tässä tapauksessa se ei ole kovin kätevää. Loppujen lopuksi ei vain tausta, vaan myös kirjoitukset muuttuvat läpikuultaviksi. Kyllä, itse asiassa koko ikkuna kerralla.
Tietysti voit yrittää lisätä ylimääräisen säilön ja lisätä siihen vain peittävyyttä, mutta tämä HTML-elementti on tarkoitettu vain koristeeksi ja on ilmeisesti tarpeeton. Onko mahdollista tulla ilman sitä?
Voit tietysti! Jos käytät RGBA:ta.
RGBA-värin kuvausmuoto
CSS3:lla voit määrittää värit RGB- ja RGBA-toimintojen avulla. Tässä tapauksessa meidän on ilmoitettava kunkin värikomponentin osuus, jolle yksi tavu on varattu (0-255, jos joku ei tiedä).
Tämän tapauksen syntaksi on hyvin yksinkertainen:
Tausta: rgb(0, 255, 0); /* puhdas vihreä */
RGBA:lle lisätään neljäs parametri - alfaläpinäkyvyys (0 - 1).
Tausta: rgba(255, 0, 0, 0,5); /* puhdas punainen, 50 % läpinäkyvyys */
Tässä se on, ratkaisu ongelmaamme. Aseta vain taustaväri rgba:lla ja kaikki näyttää haluamaltamme. Ilman turhia kuvia ja elementtejä!
Mistä näitä numeroita saa?
Voit tarkastella värin komponentteja Photoshopin pipettityökalulla.
Tietoja selainten välisestä yhteensopivuudesta
Koska RGB-toiminto on paljon vanhempi kuin RGBA ja se on ollut olemassa CSS2-standardin ajoista lähtien, voit suojautua vanhimmilta selaimilta käyttämällä seuraavaa kaksoisrakennetta:
SomeBlock ( tausta: rgb(255, 0, 0); tausta: rgba(255, 0, 0, 0.5); )
Tällä lähestymistavalla nykyaikaisten selainten isoisillä ei ole läpikuultavuutta, mutta itse väri pysyy oikeana.
Sinun on huolehdittava IE:stä erikseen. Aasit eivät ymmärrä RGBA:ta aina versioon 8 asti.
Kuten aina: maata talonpojille, tehtaita työläisille ja aasille kainalosauva! Kuten .
Tietenkin taisteluolosuhteissa laitamme tämän säännön erilliseen CSS:ään, jonka yhdistämme.
SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
Temppu on määrittää aloitus- ja loppuvärit samaksi (ff0000 - punainen) ja hyödyntää sitä, että voit asettaa gradientin alfakanavan tässä suodattimessa (esimerkissä arvo on 80).
Viitteeksi: suodatin käyttää heksadesimaalijärjestelmää ja täysin läpinäkymättömän värin koodi on FF (desimaalilukuna tämä on 255). Vastaavasti heksadesimaaliluku 80 on desimaaliluku 128, eli 50 % läpinäkyvyys.
Testattu:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Kromi
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; 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), joka esittää päävärit (punainen, vihreä, sininen) ja 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. 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ärintoistolaaduksi 8 bittiä (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 | 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
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 .
