A HSL és az RGB színmodellek eltérő logikája
A HSL-modell (Hue, Saturation, Lightness – színárnyalat, telítettség, világosság) a színek emberi érzékeléséhez igazodik. A színárnyalatot (hue) egy 0–360 fokos körön ábrázolja, ahol 0° a vörös, 120° a zöld, 240° a kék, és a kör visszavezet a vöröshöz. A telítettség (saturation) a szín élénkségét adja meg százalékban: 0% a teljesen szürke, 100% a legtisztább szín. A világosság (lightness) szintén százalékos: 0% a fekete, 100% a fehér, 50% az „alap" szín. Ez a szerkezet teszi lehetővé, hogy ha csak a világosságot változtatod, a színárnyalat érintetlen marad – pontosan ezért használják a HSL-t paletták és témák generálására.
Ezzel szemben az RGB (Red, Green, Blue) a képernyők fizikai működését tükrözi. Minden csatorna 0–255-ig terjedő egész szám, amely a fényforrás intenzitását adja meg. A végeredmény additív: ha mindhárom csatorna 255, fehéret kapsz; ha 0, feketét. A digitális képernyők, a böngészők és a CSS natív színtere az RGB (és annak HEX reprezentációja). A tervezők HSL-ben gondolkodnak, de a kód RGB-t (vagy HEX-et) vár – innen a konverzió szükségessége.
Ezen az oldalon a HSL-mezőbe például 243, 75%, 59% értékeket írva azonnal megkapod a megfelelő RGB-t: 79, 70, 229. A konverzió matematikája szigorúan meghatározott, és minden érvényes HSL-párhoz pontosan egy RGB-hármas tartozik a megjeleníthető tartományon belül.
Veszteségmentes konverzió – nincs színeltolódás
A HSL-ből RGB-be való átalakítás veszteségmentes. Ez azt jelenti, hogy minden érvényes HSL-bejegyzéshez (ahol a hue 0–360, a telítettség és világosság 0–100% között van) pontosan egy RGB-érték tartozik, amely a szabványos sRGB színtéren belül van – nincs szükség extrapolációra, hiszen mindkét modell ugyanabban a színtérben dolgozik. Ez éles ellentétben áll a LAB-ból vagy CMYK-ból RGB-be való konvertálással, ahol gyakran előfordul gamut-levágás: a forrásmodell olyan színt tartalmazhat, amelyet a képernyő nem tud pontosan megjeleníteni, így a konverzió során a legközelebbi megjeleníthető színre kell cserélni, ami színeltolódást okoz.
A HSL-RGB konverziónál ilyen nem történik. Az sRGB színtér teljes egészében lefedhető HSL-ben; a világosabb és telítettebb színek sem mennek ki a tartományból. Ha a konverziót visszafelé is elvégzed (RGB-ből HSL-be, majd újra RGB-be), ugyanazt a számot kapod – nincs kerekítési hiba vagy színváltozás. Ezt a tulajdonságot használják ki a professzionális színszerkesztők és webfejlesztők, amikor egy HSL-ben definiált palettát pontosan le akarnak fordítani a CSS-be.
Az oldalon a kimenetek között szerepel a HEX, az RGB, a HSL (visszaigazolásként), továbbá a HSV (Hue, Saturation, Value), a CMYK és a LAB is. A HSV modell a telítettség és az érték (világosság helyett) fogalmával dolgozik, ami a színválasztókban gyakori. A LAB egy eszközfüggetlen színmodell, a CMYK pedig a nyomdai előállítás becsült értéke – ez utóbbiról fontos tudni, hogy csak hozzávetőleges, és nem helyettesíti a nyomdai profilt.
A pontos bevitel szabályai és hibakezelés
Az oldal egyetlen beviteli mezője a HSL értéket várja. A formátum kötött: először a színárnyalat (hue) egy 0 és 360 közötti egész szám, majd vesszővel elválasztva a telítettség százalékjellel, végül a világosság százalékjellel. Például: 243, 75%, 59%. A százalékjelek használata kötelező, a vesszők utáni szóköz opcionális. Ha a bevitel hibás – például a hue 361, vagy hiányzik a százalékjel –, az oldal azonnal egyértelmű hibaüzenetet jelenít meg: „Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” (magyarul: „Adja meg a HSL-t 0–360 színárnyalattal és két százalékkal, például 243, 75%, 59%.”). Az összes többi mező automatikusan, gombnyomás nélkül frissül, amint érvényes bemenetet adsz.
Gondot okozhat, ha a hue-t tartományon kívül, vagy a telítettséget/világosságot 0–100-on kívül adsz meg. Az oldal ekkor nem próbál találgatni, hanem hibát jelez. Ugyanakkor a hue lehet tört szám is (pl. 243.5, 75%, 59%), mert a színárnyalat körön mért szög, és a finom átmenetekhez szükség lehet tizedesjegyekre – ezt a CSS is támogatja.
Mivel minden számítás a böngészőben, kliensoldalon fut, semmilyen beírt adat nem kerül feltöltésre a szerverre. Ez adatvédelmi szempontból is előnyös: ha érzékeny tervezésen dolgozol, nem kell aggódnod, hogy a színértékeket harmadik félhez továbbítja az eszköz.
A megjelenített színmodellek áttekintése
Az oldal hat különböző színmodellben jeleníti meg ugyanazt a színt. Mindegyik modell más célra hasznos:
| Modell | Leírás | Példa a 243, 75%, 59% bemenetre |
|---|---|---|
| HEX | Hexadecimális RGB-kód, gyakori CSS-ben | #4F46E5 |
| RGB | A képernyő három alapszín-csatornája 0–255 között | 79, 70, 229 |
| HSL | Visszaigazolásként ugyanaz, amit beírtál | 243°, 75%, 59% |
| HSV | A színárnyalatot, telítettséget (de világosság helyett értéket) használ | 244°, 69%, 90% |
| CMYK | Nyomdai színkeverés becsült értéke (cián, bíbor, sárga, fekete) | 65%, 69%, 0%, 10% |
| LAB | CIE Lab* eszközfüggetlen modell | 47, 45, -66 |
A CMYK-érték itt egy egyszerűsített konverzió eredménye, amely nem veszi figyelembe a nyomda konkrét papír-tinta kombinációját, a színprofilokat (pl. FOGRA, SWOP) és a nyomógép kalibrációját. Ezért az itt kapott CMYK-számokat soha ne használd végleges nyomdai előkészítésben – ott színprofilokkal és kalibrációval kell dolgozni. A HEX és az RGB viszont pontosan azt a színt adja vissza, amit a monitoron látsz, feltéve, hogy a monitor színkezelése megfelelő.
Gyakori hibák elkerülése
A leggyakoribb hiba, hogy a felhasználók elfelejtik a százalékjeleket a telítettség és világosság mögött. A CSS-ben a HSL-t hsl(243, 75%, 59%) formában írjuk, és itt is pontosan ezt a formátumot kell követni. Ha lehagyod a % jelet, az oldal hibát jelez. Hasonló hiba, ha a hue-t 0–100 közötti számnak gondolod – de a hue fokban van megadva, a teljes kör 360°.
Továbbá sokan összekeverik a HSV-t a HSL-lel. Bár mindkettő a színárnyalattal kezdődik, a második és harmadik komponens eltér. A HSV-ben a „V” (value, érték) a szín fényességét adja meg, ahol 100% a legtelítettebb változat, függetlenül a fehér vagy fekete arányától. A HSL-ben a világosság 50%-nál van a „tiszta” szín, 0% a fekete, 100% a fehér. Ugyanannak a színnek a HSL- és HSV-értéke eltérő – az oldal mindkettőt kiszámolja, így könnyen összehasonlíthatod.
A CMYK-érték becsült jellegét is érdemes hangsúlyozni. A nyomdai CMYK nem egyetlen univerzális modell: különböző papírfajták (fényes, matt, újrapapír), tinták (pigment vs. festék) és nyomógépek más-más színvisszaadást eredményeznek. Az itt látható CMYK-számok egy egyszerű, nem színprofil-korrigált konverzióból származnak, ezért professzionális nyomtatáshoz mindig használj színkezelt munkafolyamatot.
Kinek ajánljuk ezt az eszközt?
Ez az oldal elsősorban azok számára készült, akik színpalettákat vagy témákat terveznek HSL-ben, és a megfelelő RGB-értékeket keresik a kódhoz. Front-end fejlesztők számára gyakori helyzet, hogy egy dizájn eszköz (pl. Figma, Sketch) HSL-ben adja meg a színeket, de a CSS-be RGB-t vagy HEX-et kell beírni. A konverzió automatikus és pontos, így nem kell kézzel számolni vagy keresgélni a megfelelő konvertert.
Grafikus tervezők is hasznát vehetik, akik a nyomdai és digitális kimenet között kell, hogy egyensúlyozzanak – bár a CMYK-érték itt csak tájékoztató jellegű, a digitális RGB-t pontosan meghatározhatja belőle. Olyan fejlesztőknek is ajánljuk, akik a színhozzáférhetőségi irányelveket (WCAG) szeretnék alkalmazni: a kontrasztarány kiszámításához a háttér és a betűszín RGB-értékeire van szükség, és ezeket az oldal gyorsan megadja.
Mivel minden számítás kliensoldali, nincs adatküldés, nincs késleltetés, nincs függőség külső API-tól. Nyugodtan használható bármilyen érzékeny tervezési projektben is.
Gyakran ismételt kérdések
1. Miért nem egyezik a kapott CMYK-érték a nyomdai próbanyomattal? Az oldal egy egyszerűsített, nem színprofil-korrigált konverziót használ. A valódi nyomdai CMYK függ a papírtól, a tintától, a nyomógéptől és a színprofiloktól (pl. FOGRA39, SWOP). Ezért az itt látható számok csak hozzávetőlegesek, és nem helyettesítik a színkezelt munkafolyamatot.
2. Veszthetek-e adatot a HSL-ből RGB-be való konvertálás során? Nem. A konverzió veszteségmentes, mert mindkét modell ugyanabban az sRGB színtérben dolgozik. Ha visszakonvertálod az RGB-t HSL-be, az eredeti számokat kapod vissza (kerekítési hiba nélkül). Ez nem igaz a LAB vagy CMYK modellekből való konvertálásra.
3. Hogyan kell pontosan megadnom a HSL-értéket?
Írd be a színárnyalatot (0–360 közötti szám), vessző, a telítettséget százalékjellel, vessző, a világosságot százalékjellel. Például: 243, 75%, 59%. A vessző utáni szóköz opcionális. Ha bármelyik érték hiányzik vagy határon kívüli, az oldal hibát jelez.
4. Érvényes-e a hue-tizedesjegyekkel is?
Igen. Mivel a színárnyalat egy körön mért szög, finom átmenetekhez használhatsz tört számokat is, pl. 243.5. A CSS ezt támogatja, és az oldal is kezeli.
5. Használhatom a kapott RGB-értéket CSS-ben?
Igen. A color: rgb(79, 70, 229); vagy color: #4F46E5; pontosan azt a színt adja vissza, amit a konverzió mutat. A HSL-t is használhatod közvetlenül CSS-ben (hsl(243, 75%, 59%)), de ha a kódod RGB-t vár, ez az eszköz gyorsan megadja a megfelelő formátumot.
6. Mit tegyek, ha hibaüzenetet kapok?
Ellenőrizd, hogy a hue 0–360 közötti szám-e, a telítettség és világosság mellett szerepel-e a % jel, és hogy a három értéket vesszővel választottad-e el. Ha minden rendben van, próbáld meg a használati példát: 243, 75%, 59%.