Muunna väri RGB:n, HSL:n ja heksadesimaalin välillä

Työskentely värien kanssa verkossa tarkoittaa jatkuvaa tasapainoilua useiden eri merkintätapojen välillä. Värimuunnin auttaa välttämään manuaalisia virheitä ja mahdollistaa välittömän siirtymisen formaatista toiseen käyttöympäristön mukaan. Jokaisella formaatilla on omat vahvuutensa, ja niiden tunteminen on yksi front-end-kehittäjän perustaidoista.

Tässä on tyypillisiä käyttötapauksia, jotka vaativat värin muuntamista:

• RGB on natiivi CSS:ssä ja JavaScriptissä, ja se on ihmisen luettavissa värin hallitsevuuden ymmärtämiseksi (punainen, vihreä ja sininen kanava välillä 0-255).
• HSL tekee sävyn muokkaamisesta helppoa: riittää, että säädät värikylläisyyttä tai valoisuutta laskematta kutakin kanavaa uudelleen.
• HEX on standardimuoto kopiointia ja liittämistä varten: kuusi merkkiä, yhteensopiva kaikkialla, ihanteellinen Figma- ja Sketch-malleihin tai tyylioppaisiin.
• Muunnokset HEX to RGB, RGB to HEX, HEX to HSL ja päinvastoin ovat yleisimpiä operaatioita CSS:ssä ja JavaScriptissä.

RGB ja RGBA (Red, Green, Blue, Alpha)

Jokainen kanava on koodattu kokonaislukuna välillä 0–255, mikä vastaa yhtä tavua komponenttia kohden ja mahdollistaa 16 777 216 eri väriä. RGBA:n alfakanava vaihtelee välillä 0 (läpinäkyvä) – 1 (läpinäkymätön) ja säätelee läpinäkyvyyttä.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX ja HEX8 (heksadesimaalimerkintä)

Erittäin yleinen tiivis formaatti: #RRGGBB kuusimerkkisenä, jossa kukin pari edustaa RGB-kanavaa 16-kantaisessa järjestelmässä. Kahdeksanmerkkinen #RRGGBBAA-variantti lisää alfakanavan heksadesimaalimuodossa (00 läpinäkyvä, FF läpinäkymätön). Myös lyhyt merkintätapa #RGB on olemassa: #F53 vastaa arvoa #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* lyhyt muoto */

HSL ja HSLA (Hue, Saturation, Lightness, Alpha)

HSL kuvaa väriä havaintoihin perustuen. Hue (sävy) on kulma väriympyrällä (0–360°), Saturation (värikylläisyys) ja Lightness (valoisuus) ovat prosenttiosuuksia. Tämä on suositeltava formaatti varianttien luomiseen: esimerkiksi painikkeen vaalentamiseen hiirellä osoitettaessa, poistetun tilan värikylläisyyden vähentämiseen tai yhtenäisen paletin luomiseen muuttamalla vain sävyä.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* vaaleampi */
$primary-muted: hsl(247, 30%, 36%);    /* vähemmän värikylläinen */

Muut olemassa olevat formaatit

CMYK (Cyan, Magenta, Yellow, Key) on käytössä painatuksessa: se kuvaa värin vähentämällä värejä, eikä se ole oleellinen näytöillä. OKLCH ja LAB ovat havaintoihin perustuvia yhtenäisiä väriavaruuksia, jotka tulivat käyttöön CSS Color Level 4:ssä; ne mahdollistavat havaitun kirkkauden paremman hallinnan. Tämä työkalu keskittyy RGB-, HEX- ja HSL-muunnoksiin, jotka kattavat valtaosan verkkokehityksen tarpeista.

HEX:stä RGB:hen muuntaminen tarkoittaa merkkijonon lukemista merkkipareittain ja kunkin parin tulkitsemista 16-kantaisena kokonaislukuna:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB:stä HEX:ään on päinvastainen operaatio: kukin kanava muunnetaan 16-kantaiseksi, täydennetään kahteen merkkiin ja yhdistetään.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB:stä HSL:ään on algoritmisempi prosessi. Kanavat normalisoidaan välille 0–1, lasketaan minimi ja maksimi valoisuuden päättelemiseksi, sitten värikylläisyys ja lopuksi sävy hallitsevan kanavan mukaan. Täydellinen kaava on dokumentoitu CSS Color Module Level 3 -spesifikaatiossa.

Työkalu toimii kumpaankin suuntaan RGB-, HEX- ja HSL-muotojen välillä. Muunnoksen tekeminen:

1. Valitse syöttömuoto: RGB, HEX tai HSL.
2. Syötä arvo (esimerkiksi #1400B6, rgb(20, 0, 182) tai hsl(247, 100%, 36%)).
3. Käynnistä muunnos: vastaavat arvot kahdessa muussa formaatissa tulevat näkyviin välittömästi.
4. Kopioi haluamasi tulos erillisellä painikkeella ja liitä se tyylitiedostoosi tai suunnitelmaasi.

Laskenta suoritetaan selaimessa, tietoja ei lähetetä palvelimelle.

• Verkkosuunnittelu ja CSS : Hae HEX-arvo suunnitelmasta ja hanki vastaava HSL-arvo luodaksesi hover- tai active-tilan muuttamatta sävyä.
• Visuaalinen identiteetti ja paletti : Luo pääväristä useita variantteja (vaalea, tumma, haalistettu) säätelemällä HSL-valoisuutta tai -värikylläisyyttä.
• Kuvitus ja grafiikka : Muunna näytön väri (RGB) heksadesimaalikoodiksi ohjelmistolle tai asiakkaalle toimitettavaksi.
• Saavutettavuus : Muunna RGB-muotoon laskeaksesi kontrastisuhteen (WCAG AA vaatii 4.5:1 normaalille tekstille) taustavärin kanssa.
• CSS-muuttujat ja esikäsittelijät : Tuota design-tokeneita SASS-tiedostoon tai Tailwind-teemaan yhdestä viitevääristä.

Muutamia esimerkkejä muunnoksista, jotka havainnollistavat kolmen formaatin vastaavuutta:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Alfakanavan kanssa:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Mitä eroa on HEX- ja HEX8-muodoilla?

Perinteinen HEX koodaa kolme RGB-kanavaa kuudella merkillä (#RRGGBB). HEX8 lisää kaksi merkkiä alfakanavaa varten (#RRGGBBAA), mikä mahdollistaa läpinäkyvyyden hallinnan yhdessä merkkijonossa. #1400B6FF ja #1400B6 näyttävät visuaalisesti samalta väriltä, eli täysin läpinäkymättömältä.

Kannattaako CSS:ssä käyttää mieluummin HSL- vai RGB-muotoa?

Molemmat ovat renderöinnin kannalta samanarvoisia. HSL on ilmaisukykyisempi yhtenäisen paletin tai tilavarianttien (hover, focus) luomiseen, koska siinä muutetaan vain yhtä havaintoon perustuvaa parametria. RGB on edelleen kätevä työskenneltäessä canvaksesta tai anturista saatavan tiedon kanssa.

Miksi HEX-arvoni antaa odotetusta poikkeavan sävyn?

Kolme yleistä syytä: sekaannus lyhyen #RGB:n ja pitkän #RRGGBB:n välillä (merkit kahdennetaan, ei vain yhdistetä), virhe merkin kopioinnissa tai kalibroimaton näyttö. Tarkista myös, ettei CSS:ssä ole isäntäelementin läpinäkyvyyttä, joka muuttaa lopullista ulkoasua.

Mihin RGBA:n ja HSLA:n alfakanavaa käytetään?

Alfakanava säätelee värin läpinäkyvyyttä arvosta 0 (täysin läpinäkyvä) arvoon 1 (täysin läpinäkymätön). Se on hyödyllinen peittokuvissa, varjoissa, käytöstä poistetuissa tiloissa tai kuvien päälle tulevissa elementeissä. Toisin kuin CSS:n opacity-ominaisuus, RGBA ja HSLA vaikuttavat vain kohdeväriin, eivät sen lapsielementteihin.

Voiko värin muuntaa ilman tarkkuuden menetystä?

RGB:n ja HEX:n välillä muunnos on tarkka, sillä molemmat formaatit koodaavat saman 24-bittisen tiedon. HSL-muunnokseen liittyy sävyn, värikylläisyyden ja valoisuuden pyöristyksiä; muunnos RGB > HSL > RGB saattaa tästä syystä palauttaa arvon, joka poikkeaa yhdellä yksiköllä joissakin kanavissa.

Miksi käyttää verkkopohjaista muunninta oman funktion sijaan?

Kertaluonteiseen testaukseen, paletin prototyypin luomiseen tai suunnitelmasta poimitun HSL-värin HEX-vastineen tarkistamiseen verkkopohjainen muunnin on välitön apu. Jatkuvaan ohjelmalliseen tarpeeseen kirjastot kuten color, chroma-js tai tinycolor2 ovat tarkoituksenmukaisempia.