Värimuunnin
Valitse väri värivalitsimella tai syötä koodi mihin tahansa kenttään. Muut muodot ja esikatselu päivittyvät heti.
RGB-arvot
HSL-arvot
Värit:
HEX-RGB-muunnin
Tee HEX-RGB-muunnos: muunna värikoodit HEX-, RGB- ja HSL-muotojen välillä ja näe väri heti esikatselussa.
HEX-RGB-muunnin – muunna värikoodit helposti
HEX-RGB-muunnin on käytännöllinen työkalu verkkokehittäjille ja graafisille suunnittelijoille. Sen avulla muunnat värikoodit HEX-, RGB- ja HSL-muotojen välillä ja näet värin heti live-esikatselussa. Valitse väri värivalitsimella tai syötä koodi suoraan – muunnin laskee kaikki muodot automaattisesti.
Mikä on HEX-värikoodi?
HEX-värikoodi eli heksadesimaalivärikoodi on yleisin tapa ilmaista värejä verkkosivuilla. Se kirjoitetaan muodossa #RRGGBB, jossa jokainen kirjainpari kuvaa yhden värikanavan voimakkuutta 16-järjestelmässä (00–FF eli desimaalina 0–255). Ensimmäinen pari on punainen (R), toinen vihreä (G) ja kolmas sininen (B).
Esimerkiksi #FF0000 on puhdas punainen, #00FF00 vihreä ja #0000FF sininen. Mustaa kuvaa #000000 ja valkoista #FFFFFF.
Näin HEX muunnetaan RGB:ksi
Muunnos perustuu siihen, että jokainen kaksimerkkinen heksaluku muunnetaan desimaaliksi väliltä 0–255:
#RRGGBB → R = RR₁₆, G = GG₁₆, B = BB₁₆
Esimerkki: Muunnetaan koodi #1E90FF:
- R = 1E₁₆ = 1 × 16 + 14 = 30
- G = 90₁₆ = 9 × 16 + 0 = 144
- B = FF₁₆ = 15 × 16 + 15 = 255
Tulos on siis rgb(30, 144, 255). Käänteiseen suuntaan jokainen RGB-arvo muunnetaan kaksimerkkiseksi heksaluvuksi ja arvot yhdistetään.
Mikä on RGB?
RGB (Red, Green, Blue) on additiivinen värimalli, jossa väri muodostuu punaisen, vihreän ja sinisen valon yhdistelmästä. Jokainen kanava saa arvon 0–255: kun kaikki ovat nollassa, väri on musta, ja kun kaikki ovat arvossa 255, väri on valkoinen. RGB on näyttöjen luonnollinen värimalli, koska näytön kuvapisteet tuottavat valoa juuri näillä kolmella perusvärillä.
Mikä on HSL?
HSL kuvaa värin kolmella ihmiselle havainnollisella arvolla:
- Sävy (Hue): värin perussävy asteina 0–360. 0° on punainen, 120° vihreä ja 240° sininen.
- Kylläisyys (Saturation): värin voimakkuus 0–100 %. 0 % on harmaa, 100 % täysi väri.
- Vaaleus (Lightness): värin vaaleus 0–100 %. 0 % on musta, 50 % puhdas väri ja 100 % valkoinen.
HSL on usein kätevin tapa säätää väriä: voit esimerkiksi tehdä samasta sävystä vaaleamman version pelkästään vaaleutta kasvattamalla. CSS tukee HSL-värejä muodossa hsl(210, 100%, 56%).
Värikoodit CSS:ssä
Verkkosivuilla väri voidaan ilmaista usealla tavalla, jotka kaikki tuottavat saman lopputuloksen:
- Heksamuoto:
color: #1e90ff; - Lyhyt heksamuoto:
color: #f00;(vain kun parit toistuvat) - RGB-muoto:
color: rgb(30, 144, 255); - HSL-muoto:
color: hsl(210, 100%, 56%);
Suunnittelutyökalu saattaa antaa värin yhdessä muodossa, mutta toteutus vaatii toisen. Tämä muunnin auttaa siirtymään muodosta toiseen nopeasti ja virheettömästi.
Yleisiä värikoodeja
- Musta: #000000 = rgb(0, 0, 0)
- Valkoinen: #FFFFFF = rgb(255, 255, 255)
- Punainen: #FF0000 = rgb(255, 0, 0)
- Vihreä: #00FF00 = rgb(0, 255, 0)
- Sininen: #0000FF = rgb(0, 0, 255)
- Keltainen: #FFFF00 = rgb(255, 255, 0)
- Harmaa: #808080 = rgb(128, 128, 128)
Kokeile myös näitä palveluita
Mainos
Usein kysytyt kysymykset
Miten HEX-värikoodi muunnetaan RGB:ksi?
Heksakoodi muodossa #RRGGBB jaetaan kolmeen kaksinumeroiseen heksalukuun: ensimmäinen on punainen, toinen vihreä ja kolmas sininen. Jokainen heksaluku muunnetaan desimaaliksi väliltä 0–255. Esimerkiksi #1E90FF → 1E = 30, 90 = 144 ja FF = 255 eli rgb(30, 144, 255). Tämä muunnin tekee laskennan puolestasi.
Mitä lyhyt kolmimerkkinen heksakoodi tarkoittaa?
Kolmimerkkinen muoto kuten #F00 on lyhennys, jossa jokainen merkki kahdennetaan: #F00 vastaa koodia #FF0000. Lyhyttä muotoa voi käyttää CSS:ssä, mutta sillä voi esittää vain rajatun joukon värejä. Muunnin tunnistaa sekä lyhyen että täyden kuusimerkkisen muodon.
Mikä on HSL ja miten se eroaa RGB:stä?
HSL kuvaa värin kolmella arvolla: sävy (hue, 0–360 astetta), kylläisyys (saturation, 0–100 %) ja vaaleus (lightness, 0–100 %). RGB taas ilmoittaa punaisen, vihreän ja sinisen määrän. HSL on usein intuitiivisempi värien säätöön, koska vaaleutta ja kylläisyyttä voi muuttaa muuttamatta sävyä. Molemmat kuvaavat saman värin eri tavalla.
Toimiiko muunnin ilman alkumerkkiä #?
Kyllä. Voit syöttää heksakoodin ristikkomerkin kanssa tai ilman, esimerkiksi #00FF00 tai 00FF00 toimivat molemmat. Isoilla ja pienillä kirjaimilla ei ole väliä, joten myös ff8800 kelpaa.
Mihin värikoodien muuntamista tarvitaan?
Verkkokehityksessä CSS hyväksyy värit useassa muodossa: hex, rgb() ja hsl(). Suunnittelutyökalut näyttävät värin usein yhdessä muodossa, mutta toteutus saattaa vaatia toista. Muunnin auttaa esimerkiksi kopioimaan brändivärin hex-koodista RGB-arvoiksi tai säätämään väriä HSL:n avulla.
Oliko tästä laskurista apua?
