Ha valaha is megpróbált weboldalt tervezni, logót készíteni vagy névjegykártyát nyomtatni, azonnal belezuhant a színkódok zavaros ábécé-levesébe: HEX, RGB, HSL és CMYK. Miért van olyan sokféleképpen egy egyszerű kék árnyalat leírása?
Az igazság az, hogy a számítógépek és a nyomtatók alapvetően eltérő módon "látják" a fényt. Továbbá az, hogy a számítógépek hogyan dolgozzák fel a fényt, nem feltétlenül az, ahogyan az emberi agy értelmezi a színeket. Ezeknek a formátumoknak a megértése nem csupán elmélet – megkíméli Önt attól, hogy elérhetetlen kontrasztarányú webhelyeket telepítsen, vagy több ezer dollárt fizessen olyan marketinges szórólapokért, amelyek sárosnak és sötétnek tűnnek.
Additív vs kivonó fény
Mielőtt belemerülnénk a kódba, meg kell állapítanunk a fizikai különbséget a képernyő és a papír között.
- A képernyők fényt bocsátanak ki (Additív). Ha kikapcsolja az összes képpontot, a képernyő fekete lesz. A fehér szín létrehozásához a képernyő maximális intenzitással vörös, zöld és kék fényt bocsát ki.
- A papír visszaveri a fényt (kivonó). Egy üres papírlap már fehér (teljes fényt visszaver). A fekete készítéséhez a nyomtató cián, bíbor és sárga tintát rétegez egymásra, hogy elnyelje az összes fényt.
1. RGB (piros, zöld, kék)
Az RGB a számítógép-monitor anyanyelve. A színt úgy határozza meg, hogy pontosan megadja a képernyőnek, hogy mennyi vörös, zöld és kék fényt bocsát ki. Minden csatornát egy egész szám képvisel 0 (ki) és 255 (maximális intenzitás) között.
Például a tiszta piros az rgb(255, 0, 0). A tiszta fehér az rgb(255, 255, 255).
A legjobb: képszerkesztéshez (Photoshop) és digitális fényképezéshez. Közvetlenül manipulálja a hardveres képpontokat.
2. HEX (hexadecimális)
A HEX kódok, például a #FF5733, pontosan ugyanazok, mint az RGB. Az egyetlen különbség a matematika. A 10-es alapszámok (0-255) helyett 16-os hexadecimális számokat használ (00-tól FF-ig). Az első két betű pirosat, a középső kettő zöldet, az utolsó kettő pedig kéket diktál.
Miért használják a webfejlesztők a HEX-et? Mert rövidebb. A #FFF írása sokkal gyorsabb egy CSS-fejlesztő számára, mint az rgb(255, 255, 255).
A legjobb: márkaszínek merev kódolása CSS-ben. Ez tömör és könnyen másolható a tervezőeszközök, például a Figma és a kódszerkesztők között.
A színkódok azonnali konvertálása
Ne vesztegesse az idejét azzal, hogy fejben hexadecimális matematikát végez. Használja offline eszközünket a HEX, RGB, HSL és CMYK közötti azonnali fordításhoz vizuális előnézet segítségével.
Nyissa meg a Színkonvertert3. HSL (színárnyalat, telítettség, világosság)
Az RGB és a HEX szörnyű az emberek számára. Ha megmutatom a #4A90E2 kódot, nem tudja könnyen kitalálni, milyen színű. Ha arra kérlek, hogy "tegye 20%-kal sötétebbé azt a kéket", akkor a HEX-ben szinte lehetetlen számolni.
A HSL-t az emberi agy számára tervezték. Egy 360 fokos színkörön keresztül határozza meg a színeket.
- Színárnyalat (0-360): A tényleges szín. A 0 a piros, a 120 a zöld, a 240 a kék.
- Telítettség (0-100%): A szín intenzívsége. 0% szürke, 100% élénk.
- Világosság (0-100%): Mennyire sötét vagy világos. 0% fekete, 100% fehér.
Ha az Ön kék márkája hsl(210, 100%, 50%), és sötétebb árnyalatot szeretne a gomblebegtetéshez, egyszerűen módosítsa az utolsó számot: hsl(210, 100%, 40%). Varázslatos a CSS architektúra számára.
4. CMYK (ciánkék, bíbor, sárga, kulcs/fekete)
A CMYK kizárólag a fizikai világ számára készült. Megszabja, hogy a nyomtató hogyan keveri a fizikai tintát. Mivel a tinta elnyeli a fényt, a színtér fizikailag kisebb, mint az RGB. Vannak élénk neonzöldek, amelyeket a képernyő kibocsát (RGB-ben), amelyeket a nyomtató fizikailag nem tud kinyomtatni (CMYK-ban).
Az aranyszabály: soha ne küldjön RGB fájlt kereskedelmi nyomtatónak. A nyomtató erőteljesen átalakítja CMYK formátumra, így az élénk színek sárosnak és kimosottnak tűnnek. Mindig alakítsa át a terveket CMYK formátumba, mielőtt elküldi őket a nyomdába.
Összehasonlító mátrix
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Gyakran Ismételt Kérdések (GYIK)
Melyik formátumot használjam a CSS sötét módhoz?
Mindig használja a HSL-t a dinamikus témákhoz. A színárnyalat és a telítettség állandó értéken tartásával egyszerűen megfordíthatja a Világosság értéket, hogy a világos mód színét tökéletesen lefordíthassa sötét módú színekre.
Használhatom a CMYK-ot egy webhelyen?
Nem. A webböngészők csak a fényalapú színformátumokat (RGB, HEX, HSL) értik. Ha CMYK JPEG fájlt tölt fel egy webhelyre, néhány böngésző megpróbálja megjeleníteni, de a színek töröttek vagy fordítottak lesznek.
Mi az Alpha csatorna?
Az "A" az RGBA-ban vagy a HSLA-ban az Alpha rövidítése, amely az átlátszóságot szabályozza. Az 1,0-s alfa teljesen szilárd, míg a 0,5-ös 50%-ban átlátszó. A modern CSS mostantól lehetővé teszi az átláthatóságot közvetlenül a HEX kódokban is két extra számjegy hozzáadásával (pl. #FFFFFF80).