A konverzió lényege
Ez az oldal az HSL-színmodellben megadott színeket alakítja át hexadecimális (HEX) színkódokká. A felhasználó megadja a hue (színárnyalat) értékét fokban (0–360), a telítettséget (saturation) százalékban (0–100%), és a világosságot (lightness) százalékban (0–100%). Az oldal azonnal megjeleníti a megfelelő HEX-kódot – például a 243, 75%, 59% bemenetre a #4f46e5 értéket adja. Ha a kapott RGB-csatornák mindegyike egyetlen hexadecimális számjeggyel kifejezhető, a szerszám a háromjegyű rövidített formát is mutatja (például #abc). A HEX-kód a CSS-ben és a tervezőeszközökben használt hatjegyű (vagy ritkábban háromjegyű) RGB-notáció. Az oldalon a HEX mellett a konvertált értékeket más színterekben (RGB, HSV, CMYK, LAB) is láthatod, és ezek mindegyike azonnal frissül, amint bármelyik bemeneti vagy kimeneti mezőt szerkeszted.
A konverzió iránya a dedikált HSL–HEX átalakítás. Az HSL egy emberi gondolkodáshoz tervezett színmodell: a hue változtatása a színárnyalatot, a saturation a szürkeség mértékét, a lightness pedig a fehértől feketéig terjedő skálát szabályozza. Ezért használják a HSL-t palettatervezéshez és téma-generáláshoz. A HEX ezzel szemben egy hatjegyű (vagy háromjegyű rövidített) RGB-notáció, amely nem hordoz alfa-csatornát, hacsak nem a nyolcjegyű formát használjuk. Az átalakítás az sRGB színtéren belül közvetlen és veszteségmentes – ellentétben a LAB vagy CMYK konverziókkal, amelyek a színtéren kívül eső színeket kényszerűen módosíthatják (gamut-clipping). Ezen az oldalon nem történik ilyen módosítás, mert a HSL–HEX átjárás eleve a látható RGB-tartományon belül marad.
Miért érdemes ezt az oldalt használni?
A piacon rengeteg színátalakító eszköz létezik, de ez az oldal kifejezetten a HSL–HEX irányra specializálódott. A legtöbb általános konverter vagy több lépésben dolgozik (HSL → RGB → HEX), vagy nem kezeli a HSL-modell sajátosságait. Itt a bemenet közvetlenül a HSL-paraméterekből áll, és a kimenet azonnal a HEX-kód. Ez a fókusz lehetővé teszi, hogy a felület tiszta és zavarmentes legyen: nincsenek felesleges opciók, csak a szükséges mezők.
A HSL-modell emberközpontú kialakítása miatt a paletták és témák generálásánál gyakran HSL-ben dolgoznak a tervezők. Például ha egy adott hue-hoz (mondjuk 210 fok, kék) tartozó világosabb és sötétebb árnyalatokat keresel, csak a lightness értékét változtatod – a hue és a saturation változatlan marad. Ez a művelet HEX-ben nem lenne intuitív, mert a HEX mindhárom RGB-csatornát egyszerre érinti. Az oldal ezt a gondolkodásmódot támogatja: beállítod a HSL-értékeket, és azonnal látod a HEX-kódot, amit aztán a CSS-be vagy a tervezőeszközödbe másolhatsz.
A másik fontos szempont a veszteségmentesség. A HSL–HEX átalakítás az sRGB színtéren belül nem okoz információvesztést, ha a bemeneti értékek érvényesek. Ezzel szemben egy HSL–LAB–HEX konverziós láncban a LAB-térből való visszaalakításkor a színtéren kívüli értékeket módosítani kell (gamut-clipping), ami eltérést eredményez. Ezen az oldalon ilyen probléma nem merül fel, mert a konverzió egy lépésben, közvetlenül történik.
Bemenetek és kimenetek részletesen
Bemenetek
- Hue (színárnyalat): 0 és 360 közötti egész vagy tizedes szám. A 0 és a 360 egyaránt vörös színt jelöl, de a gyakorlatban a 0-t használjuk. Példa:
243. - Saturation (telítettség): 0 és 100 közötti szám, amelyet százalékjel (
%) követ. A 0% teljesen szürke, a 100% maximálisan tiszta szín. Példa:75%. - Lightness (világosság): 0 és 100 közötti szám, százalékjellel. A 0% fekete, a 100% fehér, az 50% a semleges pont (a legtelítettebb szín itt jelenik meg). Példa:
59%.
A három értéket vesszővel vagy szóközzel elválasztva kell megadni. A példa formátum: 243, 75%, 59%.
Kimenetek
- HEX-kód: A hatjegyű hexadecimális kód (pl.
#4f46e5). Ha mindhárom RGB-csatorna egyetlen hexadecimális számjeggyel kifejezhető (azaz a piros, zöld és kék értékek 0–15 közé esnek, és a felső nibble nulla), a szersám a háromjegyű rövidített formát is megjeleníti (pl.#abc). Ez utóbbi ritka, de létezik; a CSS és a HTML egyaránt támogatja. - Egyidejűleg frissülő mezők: RGB, HSV, CMYK, LAB. Ezek mindegyike azonnal alkalmazkodik a bemenet változásához. A CMYK-értékek a képernyőn lévő becslést tükrözik, és eltérhetnek a professzionális nyomdai értékektől – ezt érdemes figyelembe venni.
Érvénytelen bemenetek kezelése
Ha a megadott értékek nem felelnek meg a formátumnak (például hiányzik a % jel, a hue kívül esik a 0–360 tartományon, vagy a saturation/lightness nem 0–100% között van), az oldal a következő hibaüzenetet jeleníti meg:
„Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
Ez az üzenet angol nyelvű, és arra utal, hogy pontosan milyen bemenetet vár a rendszer. Ha ezt látod, ellenőrizd a formátumot – a legtöbb esetben a % jelek elhagyása vagy a hue 360 feletti értéke okozza a hibát.
Kinek segít ez az eszköz?
Tervezők (designerek) – Ha egy palettát HSL-ben építesz fel (például a Figmában vagy a Sketchben), és a végeredményt HEX-kódként kell exportálnod a fejlesztőknek vagy a kódba, ez az eszköz a leggyorsabb út. A HSL-ben végzett finomhangolás után (pl. a kontraszt növeléséhez a lightness csökkentése) azonnal megkapod a pontos HEX-értéket.
Front-end fejlesztők – Gyakori helyzet, hogy a tervezési fájlokból HSL-értékeket kapsz (például hsl(210, 50%, 70%)), és ezeket a CSS-ben HEX formátumban kell használnod (pl. a background-color tulajdonságnál). Az oldal ezt az átmenetet kivitelezi anélkül, hogy fejben kéne számolnod. Ráadásul a modern böngészők ugyan már natívan támogatják a HSL-t a CSS-ben (hsl() szintaxis), de sok régebbi projekt vagy keretrendszer még mindig HEX-et vár.
Akárki, aki témákat vagy akadálymentességi kontrasztarányokat állít be – A WCAG kontrasztkövetelményeihez gyakran a szín világosságát kell módosítani, miközben a színárnyalatot változatlanul kell hagyni. A HSL-ben ezt könnyű elvégezni (csak a lightness-t állítod), de a végeredményt HEX-ben kell megadnod a kódban. Ez az eszköz pontosan ezt a munkafolyamatot támogatja.
Színmodellek és gyakorlati alkalmazás
A HSL-színmodell
A HSL három komponensből áll:
- Hue (H): a szín típusa a színkörön, 0–360 fokban mérve. A 0/360 a vörös, a 120 a zöld, a 240 a kék.
- Saturation (S): a szín élénksége, 0–100%. A 0% teljesen szürke, a 100% a legtisztább szín.
- Lightness (L): a szín világossága, 0–100%. A 0% fekete, a 100% fehér.
Ez a modell azért népszerű a tervezők körében, mert az emberi színérzékeléshez közel áll: a színárnyalatot, a telítettséget és a világosságot külön kezelhetjük. Például ha egy gomb színét szeretnéd sötétebbé tenni, csak a lightness-t csökkented – a hue és a saturation változatlan marad. HEX-ben ugyanez a művelet az RGB-csatornák arányának módosítását igényelné, ami sokkal kevésbé intuitív.
A HEX-színkód felépítése
A HEX-kód egy hatjegyű hexadecimális szám, amelyet # jel előz meg. Minden egyes számjegy 0–9 vagy A–F között lehet. A hat számjegy három párt alkot: az első pár a vörös (R) csatorna, a második a zöld (G), a harmadik a kék (B). Minden csatorna 00 (0) és FF (255) közötti értéket vehet fel. Például a #4f46e5 esetén:
- Piros:
4f= 79 - Zöld:
46= 70 - Kék:
e5= 229
A háromjegyű rövidített forma (pl. #abc) akkor használható, ha minden csatorna kétjegyű értéke egyforma párokból áll, például #aabbcc rövidíthető #abc-re. Ez a CSS szabvány része, de a gyakorlatban kevésbé elterjedt.
Kapcsolat a RGB és a HSL között
A HSL és az RGB matematikailag összefügg. A HSL–RGB konverzió algoritmusa a hue alapján határozza meg a domináns csatornát, majd a saturation és a lightness segítségével számítja ki a többi csatornát. Az RGB-ből a HEX előállítása csupán a decimális értékek hexadecimális formátumba történő átírása (pl. 79 decimális = 4F hexadecimális). Mivel a HEX az RGB közvetlen reprezentációja, a HSL–HEX konverzió mindig a HSL → RGB → HEX lépéseket követi. Az oldal ezt a két lépést végzi el azonnal, és az eredményt mutatja.
Akadálymentesség és kontraszt
A WCAG kontrasztarányok számításához a szín luminanciáját kell ismerni, amely az RGB-értékekből számítható. A HSL-ben a lightness módosításával közvetlenül befolyásolhatod a luminanciát, miközben a színárnyalatot változatlanul hagyod. Például ha egy hsl(210, 50%, 60%) szín kontrasztaránya a fehér háttéren 3,5:1 (ami nem elég a WCAG AA szinthez 14 pt alatti szövegnél), a lightness 40%-ra csökkentésével az arány 6,5:1-re nőhet. A HEX-kód ekkor #336699-ről #1a3d5c-re változik. Az eszköz ezt a finomhangolást teszi gyorssá és pontoszá.
Korlátok
A HEX hatszámjegyű formája nem hordoz alfa-csatornát. Ha átlátszóságra is szükség van, a nyolcjegyű HEX notáció (#RRGGBBAA) használható, de ezt az oldal jelenleg nem támogatja – a kimenet mindig hatjegyű (vagy háromjegyű rövidített) marad. Ezenkívül a HEX-ben nincs közvetlen „világosság” dimenzió, ami megnehezíti a HSL-ben intuitív módosítások elvégzését. A HSL–HEX eszköz pontosan ezt a hiányosságot hidalja át.
Gyakori hibák elkerülése
A % jel hiánya – A saturation és a lightness értékeket százalékjellel kell megadni (pl. 75%, 59%). Ha elhagyod a % jelet, az oldal nem fogja értelmezni a bemenetet, és a hibaüzenet jelenik meg. Ugyanez igaz a hue 0–360 tartományra is – bár itt nincs szükség százalékjelre, a 360 feletti érték hibát eredményez.
A hue 0 és 360 kérdése – A hue 0 és a 360 is a vörös színt jelöli. A gyakorlatban a 0-t használjuk, és a 0–360 közötti tartományt mindig modulárisan értelmezzük. Ha 360 feletti értéket adsz meg (például 450), az érvénytelennek minősül, mert a hue-tartomány zárt, 0-tól 360-ig terjed.
A CMYK-értékek becslése – Az oldalon látható CMYK-értékek a képernyőn lévő színmegjelenítésen alapulnak, és nem helyettesítik a professzionális nyomdai színprofilokat (pl. ICC-profil). Ha nyomtatáshoz készülsz, mindig ellenőrizd a CMYK-értékeket a nyomda által javasolt eszközzel.
Minden a böngésződben történik – Az oldal a bemeneteidet nem tölti fel szerverre. A konverziót a böngésződ végzi el JavaScript segítségével, így az adataid biztonságban vannak. Ez egyben azt is jelenti, hogy az eszköz internetkapcsolat nélkül is működik, ha az oldalt korábban betöltötted (bár a pontos működés a böngésző gyorsítótárától függ).
A háromjegyű rövidített forma feltétele – Ahhoz, hogy a háromjegyű HEX-forma megjelenjen, minden RGB-csatorna értékének 0–15 közé kell esnie, és a felső nibble-nek (a magasabb 4 bit) nullának kell lennie. Például a #112233 rövidíthető #123-ra, de a #102030 nem, mert a 10, 20, 30 nem egyedi párokat alkot (a felső nibble nem nulla, és a párok nem egyformák). A gyakorlatban ez a helyzet ritka, de a szersám jelezni fogja, ha lehetséges.
Gyakran ismételt kérdések
Miért nem frissül a HEX-kód, amikor beírom az értékeket?
Ellenőrizd a formátumot: a hue 0–360 legyen szám, a saturation és lightness pedig % jellel végződjön. Ha a bemenet érvénytelen, a hibaüzenet jelenik meg. Az oldal nem frissül, amíg a bemenet nem megfelelő.
Használhatom a háromjegyű rövidített HEX-formát a CSS-ben?
Igen, a CSS és a HTML teljes mértékben támogatja a háromjegyű HEX-kódokat (pl. #abc), amennyiben az egyes csatornák értékei lehetővé teszik. Az oldal automatikusan jelzi, ha a konverzió eredménye háromjegyű formában is kifejezhető.
Miért nem egyezik a CMYK-kimenet a nyomdai értékekkel?
A CMYK-értékek a képernyőn látható színből lettek számítva, és nem veszik figyelembe a nyomda specifikus színprofilját, a papír típusát vagy a nyomtatási technológiát. Ezért ezek csak becslésnek tekinthetők.
Az oldal feltölti a megadott színeket vagy adataimat?
Nem. Minden számítás a böngésződben történik JavaScripttel. Semmilyen adat nem kerül elküldésre szerverre.
Mi a különbség a 6 jegyű és a 8 jegyű HEX között?
A 6 jegyű HEX (#RRGGBB) a színt adja meg alfa-csatorna nélkül. A 8 jegyű HEX (#RRGGBBAA) egy további két számjegyet tartalmaz az átlátszóságra (alpha). Ez az oldal 6 jegyű (vagy 3 jegyű rövidített) HEX-kódokat ad ki, a 8 jegyű formát nem támogatja.
Miért nem kerekít a konverzió?
A HSL–RGB–HEX konverzió matematikailag pontos, amennyiben a bemeneti értékek érvényesek. A HEX-kód pontosan azt az RGB-értéket reprezentálja, amely a HSL-értékekből számítható. Nincs kerekítés, mert a konverzió az sRGB téren belül marad, és a számítás egész számokkal dolgozik (0–255).