Vaaleanvihreä värikoodi. Tyylien värit voidaan asettaa eri tavoin: heksadesimaaliarvolla, nimellä, RGB-, RGBA-, HSL-, HSLA-muodossa

>> Värinhallinta

Heksadesimaaliset RGB-väriarvot

Värinkuvaus- ja käsittelymenetelmät eroavat toisistaan ​​siinä, mihin lopulliseen esitykseen ne on tarkoitettu. Verrataanpa vaikkapa värien esityksiä tulostukseen ja tietokonenäyttöihin. Ensimmäisessä tapauksessa otetaan perusteet Valkoinen 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, jos maalia ei ole lainkaan, antavat paperille valkoisen värin. Jos lisäämme niihin mustan, saamme CMYK- värintoistomenetelmä, jossa vaadittu 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ä asetetaan kunkin kolmen värin suhteen. 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 olevassa kuvassa näet päävärien sekoittamisen tulokset.

Heksadesimaalilukujärjestelmässä, toisin kuin desimaaliluvussa, sen numerorivillä ei ole kymmentä numeroa, vaan kuusitoista - tästä nimi. Näin ollen kahden numeron yhdistelmien ei-toistuvat muunnelmat voivat olla vain - 256 , jatkaaksesi numerosarjaa sen jälkeen 9 kirjeet lähettäjältä A ennen F joten rivi näyttää tältä -

Tässä tapauksessa väri määritellään kolmella heksadesimaaliluvulla, joista jokainen koostuu kahdesta numerosta. Ensimmäinen numero määrittää intensiteetin punainen värit, keskimääräinen vihreä, viimeinen asia- sininen värit. Kaikki luvut voivat saada arvoja alueella alkaen 00 ennen FF(0 - 255). Esimerkiksi: vihreä 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 asettaa heksadesimaaliarvot jokaiselle kolmelle värille ja nähdä niiden sekoituksen tuloksen napsauttamalla tuloskenttää.

Esimerkkejä joistakin heksadesimaalisista RGB-väriarvoista ovat punaisen, sinisen ja vihreän sävyt.

Värin määrittäminen merkkijonoliteraaleilla

Käytön helpottamiseksi joillekin väreille ja niiden yhdistelmille on annettu nimiä, jotka kaikki selaimet tunnistavat, ja monet niistä on voitu asettaa nimellä. Alla olevassa taulukossa on joitain värien nimiä:

Turvallisen värinvalitsimen 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 nimellä turvallinen paletti. Tämä paletti sisältää värejä, joiden värikomponentit saavat seuraavat arvot: 00 ,33 ,66 ,99 , CC,FF, kaikessa mahdollisessa 216 niiden yhdistelmiä.

CSS-värikoodeja käytetään värin määrittämiseen. Tyypillisesti värikoodeja tai väriarvoja käytetään värin asettamiseen joko elementin etualalle (esimerkiksi tekstin väri, linkin väri) tai elementin taustalle (taustaväri, lohkon väri). Niitä voidaan käyttää myös painikkeen, reunuksen, merkin, osoittimen ja muiden koristetehosteiden värin vaihtamiseen.

Voit asettaa omat väriarvosi eri muodoissa. Seuraavassa taulukossa luetellaan kaikki mahdolliset muodot:

Luetellut muodot kuvataan tarkemmin alla.

CSS-värit - heksadesimaalikoodit

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 kuusinumeroisen merkinnän lyhyempi muoto. Tässä muodossa jokainen numero toistetaan vastaavan kuusinumeroisen väriarvon saamiseksi. Esimerkiksi: # 0F0 muuttuu # 00FF00.

Heksadesimaaliarvo voidaan ottaa mistä tahansa grafiikkaohjelmistosta, kuten Adobe Photoshop, Core Draw jne.

Jokaista heksadesimaalivärikoodia CSS:ssä edeltää hash-merkki "#". Seuraavassa on esimerkkejä heksadesimaalimerkinnän 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.

merkintä: 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.

Turvalliset selaimen värit

Alla on taulukko 216 väristä, jotka ovat turvallisimpia ja tietokoneista riippumattomimpia. Nämä CSS-värit vaihtelevat välillä 000000 - FFFFFF heksadesimaali. Niitä on turvallista käyttää, koska ne varmistavat, että kaikki tietokoneet näyttävät värit oikein käytettäessä 256 väripalettia.

Kuten tiedät, väri voi vaikuttaa ihmisen tilaan: sekä henkiseen että fyysiseen. Joka päivä, kun katsot Internetin sivustoja, silmät arvioivat miljoonia värejä ja sävyjä. Verkkosuunnittelija, joka tuntee värien psykologian, voi manipuloida vierailijan mielialaa saavuttaakseen minkä tahansa tavoitteen.

Tämä johtuu siitä, että jotkut sävyt ovat rauhoittavia, kun taas toiset päinvastoin ovat jännittäviä. 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 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:

Numeerinen väriesitys

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 heksadesimaalijärjestelmässä vastaa arvoa 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ä. Alla on taulukko niiden asteittaisuudesta sekä kunkin sävyn heksadesimaaliarvot:

RGB-väritaulukot

Luonnollisesti päävärien sävyjen lisäksi on sekoitettuja, ja niiden määrä on melko suuri. Siksi luotiin RGB-värien taulukko, jossa esitetään kaikki olemassa olevat sävyt sekä niiden nimet ja numeeriset esitykset ( desimaali ja heksadesimaali).

Voit tutustua siihen täällä. 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 niin sanottu "turvallinen" RGB-värien paletti, joka pääteltiin matemaattisilla laskelmilla.

Kun selain ei pysty näyttämään väriä oikein, se yrittää päästä lähelle haluttua väriä 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 pelätä värejä näyttävänsä sivuillaan eri selaimilla, alustoilla ja näytöillä katsottuna. Vaikka tällä hetkellä turvavärien taulukko on menettämässä merkityksensä ( tekninen kehitys ei edelleenkään pysy paikallaan), kun käytät sitä, voit, kuten sanotaan, nukkua hyvin.

Kullan väri RGB-mallissa

Ensimmäistä kertaa sanaa "kulta" käytettiin XIV vuosisadan alussa kuvaamaan Aurum-nimisen alkuaineen väriä - kultaa. RGB:ssä kultaa 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 antiikkiveistokset, tehtiin vuolukivestä ja vuolukivestä, jotka ovat beigen sävyjä. RGB:ssä beigellä on seuraavat numeeriset esitykset.

CSS-kielen värit voidaan asettaa eri tavoin:

• nimeltä,
• heksadesimaaliarvon mukaan,
• RGB- ja RGBA-muodoissa,
• HSL- ja HSLA-muodoissa.

Värimääritys nimen mukaan

Selaimet tukevat joidenkin elementtien värien määrittämistä nimen perusteella. Tässä taulukossa jotkin väriominaisuuksien määrittämiseen käytetyt avainsanat (englanninkieliset värinimet) ovat RGB-koodi, heksadesimaalikoodi (HEX) ja HSL-koodi.

Tämä on esimerkki värinimien käytöstä, värin nimeäminen on otettu laajennetusta taulukosta.

Näin tämä koodi toimii:

Värin asetus RGB:n avulla

RGB on additiivinen värimalli. Englanniksi lisäys- lisäys. RGB on lyhenne englannin sanoista: Red, Green, Blue - punainen, vihreä, sininen). Tästä on selvää, että RGB-mallissa värit syntetisoidaan lisäämällä kolme väriä (punainen, vihreä, sininen) eri määrinä.

Sekoittamalla punaista, vihreää ja sinistä saat useita miljoonia sävyjä. Kaikki mahdolliset yhdistelmät tallennetaan tietokoneiden muistiin.

Mennä asiaan.

Määritä ominaisuudet tässä muodossa käyttämällä rgb (r, g, b) -merkintää, jossa r, g, b ovat kolme kanavaa jokaiselle värille (punainen, vihreä, sininen). Kunkin kanavan arvot vaihtelevat välillä 0 - 255.

Esimerkkikoodi.

Jotta kaikki olisi selvää, annan esimerkkikoodin:

Näin tämän esimerkin pitäisi toimia:

Selitykset esim.

Sivun alkuun luomme luokan div.rgb, sitä tarvitaan, jotta tunnisteen luomat lohkot

näytetään halutussa koossa: 240 x 40 pikseliä. Rivinkorkeusominaisuus (rivin korkeus) on asetettu arvoon 40px, eli sama kuin lohkon korkeus, tämä mahdollistaa tekstin näyttämisen lohkossa

pystysuoran keskellä. keskitä teksti vaakasuunnassa käyttämällä sääntöä ( tekstin tasaus: keskelle;).

Seuraavaksi koodissa asetamme lohkon taustavärin

käyttämällä style-attribuuttia taustaominaisuuden avulla ja määrittämällä arvot rgb (255, 0, 0), rgb (0, 255, 0) ja rgb (0, 0, 255). Toisin sanoen teemme vuorotellen yhdestä kanavasta mahdollisimman kylläisen, ja muita kanavia ei käytetä synteesiin, koska niiden arvo on nolla.

Yritä muokata tätä esimerkkiä ja määritä arvosi, esimerkiksi rgb (100, 100, 100).

Värin asetus RGBA:lla

CSS3 esittelee uuden työkalun värien kanssa työskentelemiseen - RGBA-muodon. Sitä voidaan kutsua RGB-mallin evoluutioksi, mutta lisäämällä yksi uusi kanava - A- tai alfa-kanava. Tämä kanava määrittää värin läpinäkyvyyden. Sen arvot on asetettu alueelle 0-1. Arvo, joka on yhtä suuri kuin 0 vastaa täydellistä läpinäkyvyyttä, 1 - täyttä läpinäkyvyyttä (väri on sama kuin se on määritetty kolmessa ensimmäisessä RGB-kanavassa) ja keskitasoa arvot, kuten 0,4 tai 0,6 - vaihteleviin läpikuultavuusasteisiin.

Esimerkkikoodi.

Näin se toimii:

Tämä koodi on visuaalisesti samanlainen kuin seuraava, joka käyttää RGB-mallia väriarvon asettamiseen:

Tässä tulos:

Alfa-kanavan arvo, joka on yhtä suuri kuin nolla, tekee kaikista väreistä näkymätön - ehdottoman läpinäkyvän, arvo yhtä suuri kuin yksi kääntää RGB-koodin värin ilman muutoksia. Ominaisuus rgba (255,0,0,1.0) näyttää rgb (255, 0, 0) punaisena.

Heksadesimaaliarvo (HEX-koodi)

Arkielämässä käytämme desimaalijärjestelmää. Sen alkuperä on hyvin yksinkertainen - meillä on kymmenen sormea ​​käsissämme, ja ennen oli kätevää laskea sormilla elämässä. Jos desimaalijärjestelmässä on kymmenen numeroa: 0 - 9 ja numero 10 on jo seuraava numero, heksadesimaalijärjestelmässä on 16 numeroa ja seuraava numero on numero 16.

Värikoodien ilmoittamiseen heksadesimaalilukuina käytetään tavallisia desimaalilukuja 0-9 ja numeroiden 10-15 osoittamiseen käytetään latinalaisia ​​kirjaimia A:sta F:iin eli (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Selvyyden vuoksi tiivistetään tämä taulukkoon:

Kun kirjoitetaan heksadesimaalilukuja, jotka ovat suurempia kuin F (15 desimaalijärjestelmässä), kuten desimaalijärjestelmässä, käytetään myös kahden numeron liittoa, mutta jo heksadesimaalilukua, mikä on ilmeistä. Joten desimaaliluvun 255 kirjoittamiseen heksadesimaalimuodossa käytetään FF.

Heksadesimaalijärjestelmä on tietokoneelle ymmärrettävämpi, se käsittelee heksadesimaaliarvon määrittämät arvot nopeammin.

Jos haluat määrittää värin heksadesimaalijärjestelmässä, lisää numeroarvon eteen "#"-merkki, esimerkiksi: # FFC0CB. Itse #FFC0CB-arvo koostuu kolmesta heksadesimaalinumerosta FF, C0 ja CB. Tämän merkinnän merkitys on sama kuin RGB-värin asettaminen (rgb (r, g, b)) - jokainen heksadesimaaliluku HEX-koodissa osoittaa värikylläisyyden RGB-kanavassaan.

# FF0000

# 00FF00

# 0000FF

Tämä koodi näyttää seuraavat kohteet:

Ja tässä on kuva yllä olevan sivun osiosta "Väriasetus RGB:llä" tuloksista.

Kuva 1. Värit RGB:ssä.

Näemme, että värit ovat identtiset.

Värillisen HEX-koodin lyhennetty merkintä on sallittu: 6-numeroinen luku voidaan kirjoittaa 3-numeroiseksi. Tämä on voimassa vain, kun yhden kanavan väriarvon kaksi numeroa toistetaan.

Eli seuraava merkinnän lyhenne on hyväksyttävä:

Esimerkiksi väri # ff22aa voidaan kirjoittaa näin - # f2a tai väri # 44aa22 voidaan määrittää # 4a2.

Värin asetus HSL:llä

CSS3 esittelee uuden muodon värien määrittämiseen.

HSL on lyhenne englannin sanoista Hue, Saturate ja Lightness.

Hue HSL:ssä on väriarvo erikoisväriympyrässä (Kuva 2) ja se määritellään asteina. Analogisesti RGB-mallin kanssa 0 ° vastaa punaista, 120 ° vastaa vihreää ja 240 ° vastaa sinistä.

Sävyn arvo vaihtelee välillä 0 - 359.

Kuva 2. HSL-väriympyrä.

Toinen arvo on kylläisyys (Saturate) asetetaan prosentteina. 100 % kylläisyydellä väri on maksimi "mehukas", kun kylläisyyden osoitin siirtyy 0 %:iin, väri muuttuu yhä himmeämmäksi ja rullautuu harmaaksi.

Kolmas arvo, Vaaleus, asetetaan myös prosentteina. Mitä suurempi prosenttiosuus, sitä kirkkaampi väri on. Ääriarvot 0% ja 100% tarkoittavat vastaavasti mustaa (ei valoa) ja valkoista (puhallettua) värejä riippumatta siitä, mikä väripyörän väri valittiin ensimmäisessä kanavassa. Optimaalisen värin kirkkausarvon voidaan katsoa olevan 50%.

Väriasetus HSLA:lla

HSLA liittyy HSL:ään, kuten RGB RGBA:han. HSLA-muodossa, kuten RGBA:ssa, lisätään alfakanava, joka vastaa värin läpinäkyvyydestä.

HSL-väri on helpompi lukea. Voimme sanoa, että se on intuitiivista. Esimerkiksi HSL-koodi (120,60%, 50%) voi edustaa lopullista väriä, jos muistissa on HSL-väripyöräkuva. Samaa ei voi sanoa RGB- ja HEX-formaateista, näissä muodoissa määritetty värikoodi tulee ymmärrettäväksi vasta, kun se on visualisoitu näytölle.

Uudet tiedostomuodot CSS3:ssa (HSL, HSLA ja RGBA) toimivat selaimissa alkaen versioista: IE 9.0, Opera 10.0 Firefox 3.0. Miten saan tyylit toimimaan vanhemmissa selaimissa?

Somebloсk (taustaväri: rgb (255,50,50); taustaväri: rgba (255,50,50,0,85))

Käytettäessä tätä koodia vanhemmissa selaimissa .somebloсk-luokan taustaväri näytetään RGB-muodossa, vaikka se ei käytä alfakanavaa.