Szín konvertálása RGB, HSL és hexadecimális között

A színekkel való munka a weben a különböző jelölések közötti folyamatos zsonglőrködést jelenti. Egy színkonvertáló segít elkerülni a manuális hibákat, és lehetővé teszi az azonnali váltást a formátumok között a felhasználási környezettől függően. Minden formátumnak megvannak a maga erősségei, és a front-end fejlesztők egyik alapvető készsége tudni, melyiket mikor használják.

Íme a leggyakoribb esetek, amikor szükség van a színkonverzióra:

• Az RGB natív a CSS-ben és a JavaScriptben, az emberek számára jól olvasható a domináns színek megértéséhez (vörös, zöld, kék csatornák 0-255 között).
• A HSL triviálissá teszi az árnyalat módosítását: elég a telítettséget vagy a fényerőt állítani az egyes csatornák újraszámolása nélkül.
• A HEX a másolás-beillesztés alapvető formátuma: hat karakter, mindenhol kompatibilis, ideális Figma, Sketch tervekhez vagy stílus útmutatókhoz.
• A HEX to RGB, RGB to HEX, HEX to HSL konverziók és ezek fordítottjai a leggyakoribb műveletek a CSS-ben és JavaScriptben.

RGB és RGBA (Red, Green, Blue, Alpha)

Minden csatornát egy 0 és 255 közötti egész szám kódol, ami komponensenként egy bájtot jelent, és összesen 16 777 216 lehetséges színt tesz lehetővé. Az RGBA alfa csatornája 0 (átlátszó) és 1 (átlátszatlan) között mozog, és az átlátszóságot szabályozza.

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

HEX és HEX8 (tizenhatos számrendszerbeli jelölés)

Széles körben elterjedt kompakt formátum: #RRGGBB hat karakteren, ahol minden pár egy RGB csatornát képvisel 16-os alapú számrendszerben. A nyolckarakteres #RRGGBBAA változat az alfa csatornát is hozzáadja hexadecimális formában (00 átlátszó, FF átlátszatlan). A rövid #RGB jelölés is létezik: a #F53 megegyezik a #FF5533-mal.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alfa 50% */
.accent { color: #F53; }        /* rövid forma */

HSL és HSLA (Hue, Saturation, Lightness, Alpha)

A HSL az érzékelés alapján írja le a színt. A Hue (színárnyalat) egy szög a színkörön (0-tól 360°-ig), a Saturation (telítettség) és a Lightness (világosság) pedig százalékos értékek. Ez a preferált formátum változatok generálásához: például egy gomb világosításához rámutatáskor, egy kikapcsolt állapot telítettségének csökkentéséhez, vagy egy koherens paletta létrehozásához csupán az árnyalat változtatásával.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* világosabb */
$primary-muted: hsl(247, 30%, 36%);    /* kevésbé telített */

Egyéb létező formátumok

A CMYK (Cyan, Magenta, Yellow, Key) nyomtatásban használatos: a színeket a festékek kivonásával írja le, és képernyőn nem releváns. Az OKLCH és a LAB a CSS Color Level 4-ben megjelent, észlelésileg egyenletes terek; jobb kontrollt tesznek lehetővé az érzékelt fényerő felett. Ez az eszköz az RGB, HEX és HSL konverziókra összpontosít, amelyek a webes igények túlnyomó többségét lefedik.

A HEX-ből RGB-be történő konvertálás a karakterlánc páronkénti feldolgozását jelenti, ahol minden párt 16-os számrendszerbeli egész számként értelmezünk:

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

Az RGB-ből HEX-be a fordított művelet: minden csatornát 16-os számrendszerbe konvertálunk, két karakterre egészítjük ki, majd összefűzzük őket.

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

Az RGB-ből HSL-be történő konvertálás algoritmikusabb. A csatornákat 0 és 1 közé normalizáljuk, kiszámítjuk a minimumot és a maximumot a fényerő, majd a telítettség, végül a domináns csatorna alapján az árnyalat meghatározásához. A teljes képlet a CSS Color Module Level 3 specifikációjában található.

Az eszköz mindkét irányban működik az RGB, HEX és HSL formátumok között. A konverzió elvégzéséhez:

1. Válassza ki a bemeneti formátumot: RGB, HEX vagy HSL.
2. Adja meg az értéket (például #1400B6, rgb(20, 0, 182) vagy hsl(247, 100%, 36%)).
3. Indítsa el a konverziót: a másik két formátum megfelelői azonnal megjelennek.
4. Másolja ki a kívánt eredményt a megfelelő gombbal, és illessze be a stíluslapjába vagy a tervébe.

A számítás a böngészőben történik, nem küldünk adatokat a szerverre.

• Webdesign és CSS: Egy HEX kód lekérése a tervből és a megfelelő HSL érték megszerzése hover vagy active állapotok létrehozásához az árnyalat módosítása nélkül.
• Vizuális arculat és paletta: Egy alapszín több változatának (világos, sötét, tompított) létrehozása a HSL fényerő vagy telítettség módosításával.
• Illusztráció és grafika: Képernyőn megjelenő szín (RGB) átültetése hexadecimális kódba szoftverek vagy ügyfelek számára.
• Akadálymentesség: Konvertálás RGB formátumba a kontrasztarány kiszámításához (a WCAG AA 4.5:1 arányt ír elő normál szövegnél) a háttérszínnel összevetve.
• CSS változók és előfeldolgozók: Designtokenek betáplálása SASS fájlba vagy Tailwind témába egyetlen referens színből.

Néhány teljes konverzió a három formátum közötti megfelelés illusztrálására:

#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%)

Alfa csatornával:

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

Mi a különbség a HEX és a HEX8 között?

A klasszikus HEX három RGB csatornát kódol hat karakteren (#RRGGBB). A HEX8 két további karaktert ad hozzá az alfa csatornához (#RRGGBBAA), ami lehetővé teszi az átlátszóság kezelését egyetlen karakterláncban. A #1400B6FF és a #1400B6 vizuálisan ugyanazt a színt eredményezi, teljesen átlátszatlanul.

HSL-t vagy RGB-t érdemesebb használni CSS-ben?

A megjelenítés szempontjából mindkettő egyenértékű. A HSL kifejezőbb koherens paletták vagy állapotváltozatok (hover, focus) létrehozásához, mert csak egyetlen érzékelési paramétert kell módosítani. Az RGB praktikus marad, ha canvasból vagy szenzorból származó adatokkal dolgozunk.

Miért tér el a HEX kódom a várttól?

Három gyakori ok: a rövid #RGB és a hosszú #RRGGBB összekeverése (a karakterek duplázódnak, nem összefűződnek), elírás egy karakternél, vagy nem kalibrált képernyőn való megjelenítés. Ellenőrizze azt is, hogy a CSS nem alkalmaz-e egy szülő opacitást, amely módosítja a végeredményt.

Mire jó az alfa csatorna az RGBA-ban és HSLA-ban?

Az alfa csatorna szabályozza a szín opacitását 0-tól (teljesen átlátszó) 1-ig (teljesen átlátszatlan). Hasznos overlayekhez, árnyékokhoz, kikapcsolt állapotokhoz vagy képek feletti átfedésekhez. A CSS opacity tulajdonsággal ellentétben az RGBA és HSLA csak a célzott színt érinti, a gyermekelemeket nem.

Konvertálható-e egy szín pontosságvesztés nélkül?

Az RGB és HEX közötti konverzió pontos, mindkét formátum ugyanazt a 24 bites információt kódolja. A HSL-be történő konverzió kerekítéseket tartalmaz az árnyalatnál, a telítettségnél és a fényerőnél; így egy RGB > HSL > RGB körút során bizonyos csatornákon egy egységnyi eltérés előfordulhat.

Miért használjunk online konvertálót saját függvény helyett?

Egy-egy gyors teszthez, paletta prototipizálásához vagy egy tervből kinyert HSL szín HEX megfelelőjének gyors ellenőrzéséhez az online konvertáló azonnali megoldást nyújt. Ismétlődő programozási feladatokhoz azonban egy olyan könyvtár, mint a color, chroma-js vagy tinycolor2 megfelelőbb.