Ruskeat värikoodit. Tyylien värit 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 – käytetään heksadesimaalilukujärjestelmässä määritettyä koodia. 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. Melkein jokainen on varustettu sellaisella työkalulla. graafinen editori. 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.
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 välillä 000000 - FFFFFF heksadesimaalikoodi. 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 |
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äri malli, joka edustaa menetelmää kaikkien värien ja niiden sävyjen saamiseksi sekoittamalla eri suhteissa kolme pääkomponenttia, jotka ovat:
- Punainen väri ( 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 tietokoneen näytöt. Koska valmistajat tarjoavat tuotteitaan erilaisia ominaisuuksia, perustettiin vuonna 1996 yksi järjestelmä RGB-pohjainen värisynteesi nimeltä sRGB, jonka parissa teimme yhteistyötä Microsoft ja HP.
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ä pöytä 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 välttämättömällä tavalla 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 verkkokehittäjä ei voi huolehtia värien näyttämisestä sivustonsa sivuilla, kun niitä tarkastellaan eri selaimet, päällä erilaisia alustoja ja monitorit. Vaikka päällä Tämä hetki turvallisten värien taulukko menettää merkityksensä ( tekninen kehitys ei silti pysy paikallaan), 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äri kestää melkoisesti merkittävä paikka historiassa, vaikka hän ei olekaan ilmaisuvoimaisin. Monet kulttuurimonumentit, erityisesti muinaiset veistokset, tehtiin vuolukivestä ja vuolukivestä, joilla on beige sävy. RGB mallissa beige väri on seuraavat numeeriset esitykset.
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(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 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ä, verrattuna desimaalijärjestelmä, perustuu nimensä mukaisesti numeroon 16. Heksadesimaalijärjestelmä käyttää 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ä ennen heksadesimaaliluku laita 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.
