HEX–HSL konvertáló

Miért érdemes HEX-ről HSL-re váltani?

A HEX színkódok – hat vagy három hexadecimális számjegy, opcionálisan egy # jellel – a színek RGB komponenseinek tömör, gépi ábrázolásai. Egy olyan kód, mint #1E90FF, közvetlenül a piros, zöld és kék csatorna értékeit kódolja, így a CSS-ben és a legtöbb dizájn eszközben alapértelmezett formátum. Azonban a hexadecimális jelölés nem segít az emberi agynak abban, hogy gyorsan megítélje a szín árnyalatát, telítettségét vagy világosságát. Ezzel szemben a HSL (Hue, Saturation, Lightness) modell kifejezetten erre épül. A színt egy 0–360 fokos színkörön elhelyezkedő árnyalatként, egy 0–100%-os telítettségi értékként és egy 0–100%-os világossági értékként írja le. Ez teszi lehetővé, hogy a világosság vagy a telítettség módosítása közben az árnyalat változatlan maradjon – ez a tulajdonság alapvető fontosságú a színpaletták generálásához és a témarendszerek kialakításához.

Hogyan épül fel a HEX színkód

A hatjegyű HEX kód két-két hexadecimális számjegyet rendel a piros, a zöld és a kék csatornához. Minden csatorna értéke 00 és FF között lehet (a 16-os számrendszerben, ami decimálisan 0-tól 255-ig terjed). Például a #4f46e5 esetében a piros csatorna 4f (decimálisan 79), a zöld 46 (70), a kék pedig e5 (229). A háromjegyű rövidítés – mint a #abc – a hatjegyű forma tömörített változata: minden számjegyet megkettőzünk, így a #abc valójában #aabbcc-t jelent. Ez a rövidítés csak olyan színeknél használható, ahol a csatornánkénti értékek ismétlődő párokat alkotnak. Az oldal mindkét formátumot elfogadja, a # jel meglététől vagy hiányától függetlenül. A HEX kódban nincs alfa csatorna; a szín mindig teljesen átlátszatlan.

A HSL modell szerkezete és előnyei

A HSL három összetevőből áll:

• Hue (árnyalat): Egy szög a színkörön, 0° és 360° között. A 0° a piros, 120° a zöld, 240° a kék. Ez a komponens adja meg a szín alapjellegét.
• Saturation (telítettség): Százalékban kifejezve, ahol 0% a teljesen szürke (színtelen), 100% pedig a legélénkebb, telített szín.
• Lightness (világosság): Szintén százalékban; 0% a fekete, 100% a fehér, 50% pedig a „normál” világosságú szín – mintha a RGB csatornák átlagos intenzitását használnánk.

Ez a modell lehetővé teszi, hogy egy adott színárnyalatot a világosság egyszerű módosításával sötétítsünk vagy világosítsunk, anélkül hogy magát az árnyalatot megváltoztatnánk. Ugyanez a telítettséggel is elvégezhető: egy szín fakóbbá vagy élénkebbé tehető a hue érték érintése nélkül. A CSS-ben ezt hsl(240, 80%, 50%) formában írjuk le, amely azonnal egy tiszta kék színt ad, míg a HEX megfelelő #1a1aff – az emberi szem számára a HSL azonnal áttekinthetőbb.

A konverzió lépései és a matematikai alapok

A HEX-ből HSL-be való átalakítás nem közvetlen. Első lépésben a HEX kódot RGB értékekké kell alakítani. Ehhez a hat hexadecimális számjegyet párokba rendezzük, mindegyik párt decimálissá konvertáljuk, majd elosztjuk 255-tel, hogy 0 és 1 közötti normalizált értékeket kapjunk. Például a #4f46e5 esetében:

• Piros: 4f = 79 → 79/255 ≈ 0,3098
• Zöld: 46 = 70 → 70/255 ≈ 0,2745
• Kék: e5 = 229 → 229/255 ≈ 0,8980

Ezután meghatározzuk a három csatorna közül a maximumot (max) és a minimumot (min). A világosságot (L) a (max + min) / 2 képlettel számítjuk ki. A telítettség (S) függ a világosságtól:

• Ha max == min, a szín szürke, a telítettség 0.
• Ha L ≤ 0.5, akkor S = (max - min) / (max + min).
• Ha L > 0.5, akkor S = (max - min) / (2 - max - min).

Az árnyalat (H) kiszámításához a delta = max - min értéket használjuk:

• Ha delta == 0, az árnyalat 0.
• Ha max == piros, akkor H = 60 * ( (zöld - kék) / delta + 0 ).
• Ha max == zöld, akkor H = 60 * ( (kék - piros) / delta + 2 ).
• Ha max == kék, akkor H = 60 * ( (piros - zöld) / delta + 4 ).

Végül a H értékét 0–360 fok közé normalizáljuk (ha negatív, hozzáadunk 360-at). Az oldal ezt a számítást végzi el a böngészőben, JavaScript segítségével, teljesen kliensoldalon – semmilyen adat nem hagyja el a gépet.

Speciális esetek és korlátozások

Az oldal csak érvényes hatjegyű vagy háromjegyű hex kódokat fogad el. Ha a bemenet nem felel meg ennek, a hibaüzenet jelenik: „Írj be egy hex színt, például #4f46e5 vagy #abc.” A hex kódok nem tartalmazhatnak más karaktereket, és a hosszúságuknak pontosan 6 vagy 3 karakternek kell lennie (a # nélkül számítva).

Mivel a HEX és a HSL is teljesen átlátszatlan színekkel dolgozik, az alfa csatorna nem része a konverziónak.

Egy másik fontos korlátozás a színskálán (gamuton) kívüli színekkel kapcsolatos. Az oldal a konvertált színeket több formátumban is megjeleníti, köztük a CMYK és a LAB értékeket. Ha egy felhasználó pl. a LAB vagy a CMYK mezőbe olyan értéket ír be, amely a szabványos RGB színskálán kívül esik (pl. egy rendkívül telített szín, amelyet a legtöbb monitor nem képes megjeleníteni), az oldal a legközelebbi megjeleníthető színre állítja be a kijelzőt. Ez a korrekció azonban a HEX érték enyhe eltolódását okozhatja, ha a színt visszafelé konvertáljuk. Ezt a hibát érdemes figyelembe venni, ha a konverziót precíziós munkához használjuk.

A CMYK értékek kizárólag a képernyőn történő becslésre szolgálnak. A tényleges nyomtatási folyamat (pl. ofszet vagy digitális nyomtatás) a festékek, a papír és a nyomdagép jellemzői miatt eltérő eredményt adhat. Ezért az itt kapott CMYK adatok nem alkalmasak professzionális nyomdai előkészítésre további kalibráció nélkül.

Gyakorlati alkalmazások a webfejlesztésben és a dizájnban

A HSL modell kiemelkedően hasznos a frontend fejlesztők számára, akik CSS-ben dolgoznak. Ha egy dizájn mockupból egy HEX színt (pl. #1E90FF) ki kell egészíteni egy hover állapothoz, a HEX érték alapján nehéz megmondani, hogyan változtassuk a színt. Ehelyett a HSL érték (pl. hsl(210, 100%, 50%)) lehetővé teszi, hogy a világosságot egyszerűen 40%-ra csökkentsük, vagy a telítettséget 80%-ra, miközben a kék árnyalat változatlan marad. Ugyanez vonatkozik a sötét és világos témák létrehozására: a CSS custom property-kben a HSL komponensek külön változóként tárolhatók, és a világosságot egyetlen paraméter módosításával lehet szabályozni.

A UI/UX tervezők számára a HSL megkönnyíti a komplementer (180°-kal elforgatott hue), analóg (30° körüli eltérés) és monokromatikus (azonos hue, változó világosság) színrendszerek generálását. A színpaletták ilyen módon történő előállítása gyorsabb és kiszámíthatóbb, mint a HEX értékek manuális becslése.

Web akadálymentesítési auditok során a HSL segít a kontrasztarányok ellenőrzésében. Ha egy színkombináció nem éri el a WCAG által előírt 4,5:1 arányt (normál szöveg esetén), a HSL modellben a világosság növelésével vagy csökkentésével gyorsan javítható a kontraszt anélkül, hogy a márka színárnyalatát elveszítenénk.

Gyakran Ismételt Kérdések

Hogyan használjam a háromjegyű HEX kódot?
Egyszerűen írd be a három karaktert a # jellel vagy anélkül, például #abc vagy abc. Az oldal automatikusan kiterjeszti hatjegyűre (#aabbcc), majd elvégzi a konverziót.

Mi a különbség a HSL és a HSV között?
Mindkét modell a színt hue, saturation és egy harmadik komponens (lightness vs. value) szerint írja le. A HSL világossága (lightness) a szín feketére és fehérre vonatkoztatott relatív fényességét adja meg (0% fekete, 100% fehér, 50% a maximális intenzitású szín). A HSV értéke (value) a szín maximális csatornájának intenzitását jelenti (100% a legtelítettebb, legfényesebb szín). A HSL modell jobban illeszkedik az emberi színérzékeléshez, míg a HSV-t gyakran használják képfeldolgozásban.

Mit jelent az, ha egy szín „a színskálán kívül esik”?
A színskálán (gamuton) kívüli szín olyan színérték, amely nem jeleníthető meg a szabványos sRGB színtéren belül. Ilyen például egy extrém telítettségű cián vagy ibolya, amelyet a monitor nem képes előállítani. Az oldal ilyenkor a legközelebbi, megjeleníthető színre korrigálja az értéket, ami enyhe színeltolódást okozhat.

Használhatom a kapott CMYK értékeket nyomtatásra?
Nem javasolt. Az itt megjelenített CMYK értékek a monitor színteréből számított becslések, amelyek nem veszik figyelembe a nyomdagép, a festék és a papír speciális jellemzőit. Professzionális nyomtatáshoz minden esetben kalibrált profilokkal és ICC színkezeléssel kell dolgozni.

Hogyan konvertálhatok vissza HSL-ből HEX-be?
Az oldal ezt a funkciót is kínálja: ha a HSL mezőkbe írsz be értékeket (vagy bármely más formátumba), a többi mező azonnal frissül, így az automatikusan megjelenő HEX értéket másolhatod. A számítások itt is a böngészőben történnek, kliensoldalon.

Tárolja az oldal a beírt színeket?
Nem. Minden konverzió kizárólag a böngésződben, JavaScript segítségével történik. Sem a HEX kód, sem a kapott HSL érték, sem más adat nem hagyja el a számítógéped, nem kerül feltöltésre vagy tárolásra.