Hex RGB-muotoon: muunna värikoodit käsin tai koodilla

Muunna hex RGB-muotoon jakamalla koodi kolmeen merkkipariin, yksi punaiselle, vihreälle ja siniselle. Muunna kukin pari 16-kantaisesta tavalliseksi luvuksi väliltä 0 ja 255. Koodin #7c3aed parit ovat 7c, 3a ja ed. Niistä saadaan 124, 58 ja 237, joten väri on rgb(124 58 237). Väri itsessään ei muutu. Hex ja RGB ovat kaksi tapaa kirjoittaa samat kolme lukua.

Hex-värikoodin rakenne

Hex-koodissa on kuusi merkkiä risuaidan jälkeen. Kaksi ensimmäistä kuvaa punaista kanavaa, keskimmäiset vihreää ja viimeiset sinistä. Jokaisella kanavalla on 256 mahdollista arvoa, 0:sta eli ei lainkaan kyseistä valoa 255:een eli täyteen määrään. 16-kantaisena mikä tahansa näistä 256 arvosta mahtuu täsmälleen kahteen merkkiin. Siksi hexistä tuli tiivis tapa kirjoittaa värejä verkossa. Eri koodien yhteyksistä kertoo värikoodien selitys.

16-kantaisessa järjestelmässä lasketaan 0:sta 9:ään ja jatketaan sitten kirjaimilla. Muuta ei tarvitse opetella ulkoa:

Näin muunnat hexin RGB-muotoon käsin

Kukin pari on kaksimerkkinen 16-kantainen luku. Vasen merkki kertoo kuusitoistaisten määrän ja oikea ykkösten määrän. Kerro vasemman merkin arvo 16:lla ja lisää oikean arvo, niin saat kanavan arvon.

1. 1

   Poista risuaita ja jaa pareihin

   #7c3aed jakautuu pareihin 7c, 3a ja ed. Ne kuvaavat punaista, vihreää ja sinistä tässä järjestyksessä.

2. 2

   Muunna punainen pari

   7c: 7 × 16 = 112, ja c on 12, joten punainen on 112 + 12 = 124.

3. 3

   Muunna vihreä pari

   3a: 3 × 16 = 48, ja a on 10, joten vihreä on 48 + 10 = 58.

4. 4

   Muunna sininen pari

   ed: e on 14, 14 × 16 = 224, ja d on 13, joten sininen on 224 + 13 = 237.

5. 5

   Kirjoita tulos

   Nykyaikainen CSS hyväksyy muodon rgb(124 58 237). Vanhempi pilkullinen muoto rgb(124, 58, 237) toimii edelleen kaikkialla.

Kaksi nopeaa tarkistusta auttavat välttämään virheitä. 00 on aina 0 ja ff aina 255. Kirjaimella a:sta f:ään alkava pari on siis vähintään 160, ja merkillä 0:sta 7:ään alkava pari jää alle 128:n. Jos saat parille ed pienen arvon, olet lukenut merkit väärässä järjestyksessä.

Lyhennetyt koodit ja alfa

Kolmimerkkinen koodi on lyhennys: kahdenna kukin merkki, niin saat täyden koodin. #f60 tarkoittaa #ff6600, joka on rgb(255 102 0). #fff on valkoinen ja #000 musta. Näin voi kirjoittaa vain värit, joiden jokaisessa parissa sama merkki toistuu. Siksi koodilla #7c3aed ei ole lyhennystä.

Kahdeksanmerkkinen koodi lisää neljännen parin peittävyydelle. Muunna se samalla tavalla ja jaa sitten 255:llä saadaksesi osuuden. #7c3aed80 päättyy pariin 80, joka on 128. Luku 128 ÷ 255 on noin 0,5, joten väri vastaa muotoa rgb(124 58 237 / 50%). Nelimerkkinen koodi, kuten #f608, on saman ajatuksen lyhennetty versio.

.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}

Hex RGB-muotoon JavaScriptillä

Koodissa parseInt tekee kantamuunnoksen, kun annat kantaluvuksi 16. Alla oleva funktio hyväksyy kolme-, neljä-, kuusi- ja kahdeksanmerkkiset koodit risuaidan kanssa tai ilman. Se palauttaa kanavat sekä alfa-arvon väliltä 0 ja 1.

function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }

Näin muunnat RGB:n hex-muotoon

Takaisin muunnetaan jakamalla. Jaa kanavan arvo 16:lla: kokonaisosa on ensimmäinen merkki ja jakojäännös toinen. Luvulle 153 lasku 153 ÷ 16 antaa 9 ja jakojäännöksen 9, joten pari on 99. Luvulle 51 tulos on 3 ja jakojäännös 3, eli 33. Luku 102 antaa 6 ja jakojäännöksen 6, eli 66. Siksi rgb(51 102 153) on #336699. JavaScriptissä toString(16) tekee muunnoksen. Täydennä alku nollalla, jotta yksimerkkiset arvot säilyvät kaksimerkkisinä:

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'

Milloin käyttää hexiä, RGB:tä tai muuta muotoa

Hex on tiivis ja helppo liittää työkalusta toiseen, joten sitä käytetään brändiohjeissa ja suunnittelutiedostoissa. RGB:tä on helpompi hahmottaa, kun muutat yhtä kanavaa tai lisäät läpinäkyvyyttä koodissa. Kumpikaan ei vastaa hyvin suunnittelijan tavallisiin pyyntöihin, kuten ”tee tästä hieman vaaleampi” tai ”etsi pehmeämpi versio tästä sinisestä”. Niihin HSL-väri ja OKLCH sopivat paremmin: ne kuvaavat väriä sävyn ja vaaleuden avulla, joten pienet muutokset käyttäytyvät ennakoitavasti.

Painossa yksi ero on vielä olennainen. Hex ja RGB kuvaavat näytön valoa, joten tulostimen pitää muuntaa ne musteiksi. Hyvin kirkkaat näyttövärit voivat himmetä paperilla. RGB ja CMYK kertoo, mitä odottaa. Näytöllä muunnetut värit ovat identtiset. Kun värin pitää häipyä läpinäkyväksi, käytä yllä olevia alfamuotoja. Läpinäkyvät liukuvärit CSS:ssä näyttää ne käytännössä.

Ennen kuin käytät muunnettua väriä tekstissä, tarkista sen erottuminen taustasta värikontrastin tarkistimella. Gradientlyssä sitä tarvitsee harvoin: Automaattinen muste valitsee kullekin riville vaalean tai tumman tekstivärin Markin omasta paletista, jotta sanat erottuvat.