HEX, RGB, HSL: verkon värikoodien ymmärtäminen

Muokkaat verkkosivustoa ja näet #FF5733 CSS:ssä. Tai työskentelet suunnittelijan kanssa joka lähettää sinulle rgb(255, 87, 51). Tai suunnittelutyökalu näyttää värin hsl(11, 100%, 60%). Nämä kaikki kuvaavat täsmälleen samaa väriä – eloisan punaisen oranssin – mutta kolmessa eri muodossa.

Jos olet koskaan hämmentynyt verkon värikoodeista, tämä opas selventää asiat viidessä minuutissa.

Kuinka digitaaliset värit toimivat

Jokainen väri näytölläsi luodaan sekoittamalla kolme valon pääväriä: punainen, vihreä ja sininen. Tämä on RGB-värimalli. Vaihtelemalla jokaisen kanavan voimakkuutta nollasta (pois) maksimiin (täysi kirkkaus), voidaan luoda mikä tahansa noin 16,7 miljoonasta väristä joita tavallinen näyttö pystyy näyttämään.

• Punainen 255, Vihreä 0, Sininen 0 = puhdas punainen
• Punainen 0, Vihreä 255, Sininen 0 = puhdas vihreä
• Punainen 0, Vihreä 0, Sininen 255 = puhdas sininen
• Punainen 255, Vihreä 255, Sininen 255 = valkoinen (kaikki kanavat täynnä)
• Punainen 0, Vihreä 0, Sininen 0 = musta (kaikki kanavat pois)
• Punainen 255, Vihreä 255, Sininen 0 = keltainen (punainen + vihreä)

Jokainen verkon käyttämä värimuoto on yksinkertaisesti eri tapa ilmaista nämä kanavien arvot.

HEX-värit

Miltä ne näyttävät

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Kuinka ne toimivat

HEX-värikoodi on kuuden merkin merkkijono jota edeltää ristikkomerkki. Kuusi merkkiä on jaettu kolmeen pariin, joista kukin edustaa värikanaalia heksadesimaalissa (kanta 16):

Heksadesimaali käyttää numeroita 0–9 ja kirjaimia A–F, missä A=10, B=11, C=12, D=13, E=14, F=15. Joten FF heksadesimaalissa on 255 desimaalissa (15 × 16 + 15 = 255).

#FF5733 purkaminen:

• FF = Punainen 255:ssä (maksimi)
• 57 = Vihreä 87:ssä
• 33 = Sininen 51:ssä

Tämä tuottaa eloisan punaisen oranssin.

Lyhenteet

Kun jokaisessa parissa on kaksi identtistä merkkiä, voit käyttää kolmen merkin lyhennettä:

• #FF0000 voidaan kirjoittaa #F00
• #3366FF voidaan kirjoittaa #36F
• #000000 voidaan kirjoittaa #000

RGB-värit

Miltä ne näyttävät

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Kuinka ne toimivat

RGB-merkintä ilmoittaa suoraan punaisen, vihreän ja sinisen kanavan arvot desimaalilukuina 0–255. Se on intuitiivisin muoto koska numerot vastaavat suoraan jokaisen valon kanavan voimakkuutta.

rgb(255, 87, 51) tarkoittaa:

• Punainen: 255 (maksimi)
• Vihreä: 87 (noin kolmasosa)
• Sininen: 51 (noin viidennes)

RGBA: Läpinäkyvyyden lisääminen

RGBA lisää neljännen arvon läpinäkyvyydelle (alpha), vaihteluväli 0 (täysin läpinäkyvä) – 1 (täysin peittävä):

rgba(255, 87, 51, 0.5)   /* 50% läpinäkyvä */
rgba(0, 0, 0, 0.8)        /* 80% peittävä musta */

Tämä on hyödyllistä peittokuville, varjoille ja kaikille suunnitteluelementeille joiden täytyy näyttää sisältöä takanaan.

HSL-värit

Miltä ne näyttävät

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Kuinka ne toimivat

HSL tarkoittaa värisävy (Hue), kylläisyys (Saturation), valoisuus (Lightness). Sen sijaan että ajattelisi punaisen/vihreän/sinisen kanavan sekoittamisen kannalta, HSL kuvaa väriä tavalla jolla ihmiset luonnollisesti ajattelevat siitä.

Värisävy on itse väri, ilmaistuna asteina väriympyrässä (0–360):

• 0° / 360° = Punainen
• 60° = Keltainen
• 120° = Vihreä
• 180° = Syaani
• 240° = Sininen
• 300° = Magenta

Kylläisyys on kuinka eloisa väri on, 0 % (harmaa) – 100 % (täysin kylläinen).

Valoisuus on kuinka vaalea tai tumma väri on, 0 % (musta) – 100 % (valkoinen). 50 % on "normaali" valoisuus.

hsl(11, 100%, 60%) tarkoittaa:

• Värisävy: 11° (hieman oranssin punainen)
• Kylläisyys: 100 % (täysin eloisa)
• Valoisuus: 60 % (hieman normaalia vaaleampi)

HSLA: Läpinäkyvyyden lisääminen

Kuten RGBA, HSLA lisää alphakanavan:

hsla(11, 100%, 60%, 0.5)   /* 50% läpinäkyvä */

Milloin käyttää mitäkin muotoa

Verkkokehitykseen

HEX on de facto -standardi. Suurin osa CSS:stä kirjoitetaan HEX-koodeilla koska ne ovat tiiviitä ja jokainen kehittäjä tunnistaa ne.

Suunnittelujärjestelmiin

HSL on ihanteellinen johdonmukaisten värivalikoimien luomiseen. Luodakseen brändivärille vaaleampia ja tummempia variantteja, yksinkertaisesti säätää valoisuusarvoa:

• Pää: hsl(210, 80%, 50%)
• Vaalea variantti: hsl(210, 80%, 70%)
• Tumma variantti: hsl(210, 80%, 30%)

Värisävy ja kylläisyys pysyvät samoina, takaten, että variantit ovat sama "väri" eri kirkkauksilla.

Läpinäkyvyyteen

Käytä RGBA:ta tai HSLA:ta kun tarvitset puoliläpinäkyviä värejä peittokuville, varjoille tai lasimaisille efekteille.

Muuntaminen muotojen välillä

Tarvitset usein muuntaa muotojen välillä. Suunnittelija lähettää HSL-arvoja mutta koodipohjasi käyttää HEX:iä. Brändin opas määrittää RGB:n mutta tarvitset HSL:n varianttien luomiseen.

Matematiikka on suoraviivaista mutta manuaalisesti tehtynä tedious. Muunnostyökalu käsittelee sen välittömästi.

Ala työskentelemään värien kanssa:

• Muunna värikoodeja
• Värimuunnostyökalu
• Väripalettigenraattori

Kaikki työkalut ovat ilmaisia ja toimivat suoraan selaimessasi.