Mikä väri on sininen? Tyylien värit voidaan määrittää eri tavoin: heksadesimaaliarvolla, nimellä, RGB-, RGBA-, HSL-, HSLA-muodossa

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ä vain siihen peittävyyttä, mutta tämä HTML-elementti on tarkoitettu vain koristeeksi ja on ilmeisesti tarpeeton. Onko mahdollista tulla toimeen 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

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ä heksadesimaaliluvun eteen sijoitetaan 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ä

Selaimet tukevat joitain värejä niiden nimellä. Taulukossa 1 näyttää nimet, heksadesimaalikoodin, RGB-, HSL-arvot ja kuvauksen.

RGB:n käyttö

Voit määrittää värin käyttämällä punaista, vihreää ja sinistä arvoa desimaalilukuina. Jokainen 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

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 taustaväri-ominaisuuteen lisätty RGB-muodossa oleva 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

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 prosenttiosuutena 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 vaaleammat ääriarvot 0% ja 100% vastaavat mustaa ja valkoista.

HSLA

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

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ä 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 000000:sta FFFFFF-heksakoodiin. Ne ovat turvallisia käyttää, koska ne varmistavat, että kaikki tietokoneet näyttävät värit oikein käytettäessä 256 väripalettia.

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.

1. h1 ( väri: #ff0000; ) /* punainen */
2. h2 ( väri: #00ff00; ) /* vihreä */
3. h3 ( väri: #0000ff; ) /* sininen */
4. 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 %).

1. h1 ( väri: rgb(255, 0, 0); ) /* punainen */
2. h2 ( väri: rgb(0, 255, 0); ) /* vihreä */
3. h3 ( väri: rgb(0, 0, 255); ) /* sininen */
4. 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).

1. h1 ( väri: rgb(0, 0, 255); ) /* sininen tavallisessa RGB:ssä */
2. h2 ( väri: rgba(0, 0, 255, 1); ) /* sama sininen RGBA:ssa, koska peittävyys: 100 % */
3. h3 ( väri: rgba(0, 0, 255, 0,5); ) /* peittävyys: 50 % */
4. h4 ( väri: rgba(0, 0, 255, .155); ) /* peittävyys: 15,5 % */
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 prosentuaalinen arvo (0 % - 100 %). Vaaleus on prosenttiosuus vaaleudesta (0 % - 100 %).

1. h1 ( väri: hsl(120, 100%, 50%); ) /* vihreä */
2. h2 ( väri: hsl(120, 100%, 75%); ) /* vaaleanvihreä */
3. h3 ( väri: hsl(120, 100%, 25%); ) /* tummanvihreä */
4. h4 ( väri: hsl(120, 60%, 70%); ) /* pastellinvihreä */

HSL:ää tuetaan seuraavissa versioissa: IE9+, Firefox, Chrome, Safari ja Opera 10+.

HSLA

RGB/RGBA:n tapaan HSL:ssä on HSLA-tila, jossa on alfakanavatuki, joka ilmaisee objektin peittävyyden.

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).

1. h1 ( väri: hsl(120, 100%, 50%); ) /* vihreä normaalissa HSL:ssä */
2. h2 ( väri: hsla(120, 100%, 50%, 1); ) /* sama vihreä HSLA:ssa, koska peittävyys: 100% */
3. h3 ( väri: hsla(120, 100%, 50%, 0,5); ) /* peittävyys: 50% */
4. h4 ( väri: hsla(120, 100%, 50%, .155); ) /* peittävyys: 15,5 % */
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 tulee sanoista 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 sekoitettaviin väreihin. 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.