A hatjegyű HEX szín három, egyenként kétjegyű csatornaértéket tartalmaz: pirosat, zöldet és kéket. A tizenhatos számrendszerű jelölést tízes számokra váltva ugyanazt a színt RGB-alakban is megadhatod. Egy áttetsző réteg megjelenéséhez viszont a háttér színe is kell: az alfaérték önmagában nem ad végleges képpontszínt.
Egy HEX szín visszafejtése
A W3C CSS Color specifikációja az sRGB színek HEX és RGB jelölését is meghatározza. A hatjegyű alakban minden csatorna 00 és FF között változhat, ami tízesben 0–255. A betűk értékei: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
Két hexadecimális számjegyből a csatornaérték:
Érték = első számjegy × 16 + második számjegy.
Szemléltető alapszínünk #2E86C1. A piros csatorna 2 × 16 + 14 = 46. A zöld 8 × 16 + 6 = 134. A kék 12 × 16 + 1 = 193. Az RGB csatornahármas: 46, 134, 193.
A HEX–RGB színátváltóban add meg ezt a színt, majd próbáld ki az RGB bemenetet is. A két irány azonos eredményt kell adjon az egész, 8 bites csatornaértékeknél. Az egyezést az értékek alapján ellenőrizd; két külön kijelző látványának összehasonlítása további tényezőket is tartalmaz.
Mi a szerepe az alfának?
Az alfa a fedettség mértéke: 0-nál a réteg nem járul hozzá a megjelenő színhez, 1-nél teljesen fedi az alatta lévő hátteret. Egy teljesen fedő háttérre helyezett réteg egyszerű, azonos színtérben végzett összetétele csatornánként:
Eredmény = alfa × előtér + (1 − alfa) × háttér.
A képlet a W3C egyszerű alfa-összetételi szabályának teljesen fedő háttérre egyszerűsített alakja. A következő példa a megadott sRGB csatornaértékekkel végzett összetételt szemlélteti. Más színtérben végzett keverés, szűrő vagy eltérő rétegmód más eredményt adhat.
A példaszín 25%-os fedettséggel fehér háttéren
A fehér háttér csatornái 255, 255, 255. Az alfa legyen 0,25. A háttér súlya ezért 1 − 0,25 = 0,75.
| Csatorna | Számítás | Eredmény |
|---|---|---|
| Piros | 0,25 × 46 + 0,75 × 255 | 202,75 |
| Zöld | 0,25 × 134 + 0,75 × 255 | 224,75 |
| Kék | 0,25 × 193 + 0,75 × 255 | 239,50 |
Egész csatornákra kerekítve 203, 225, 240 adódik. Ezt újra HEX-re váltva #CBE1F0 a kapott jelölés. A fél egységet itt felfelé kerekítettük, és csak az összeadás után alakítottunk egészre.
Ez kézi rétegszámítás. A színátváltót az alapszín és a már kiszámolt eredményszín ellenőrzésére használd; az RGB bevitel nem helyettesíti a teljes oldal rétegeinek vizsgálatát.
Webes felületen azt is nézd meg, mire állítod a fedettséget. A háttérszín alfaértéke a háttér színéhez tartozik. Az egész doboz opacity értéke a benne megjelenő szöveggel és egyéb tartalommal együtt hat az elemre, ahogyan a CSS csoportos fedettségi szabálya leírja. Ha halványabb hátteret és teljesen fedő betűket szeretnél, a háttérszín alfáját módosítsd. Egy helyes háttér-RGB kiszámítása önmagában nem igazolja a felirat megjelenését, ha közben az egész dobozt áttetszővé tetted.
Felcserélt rétegek: két külön szín ugyanazzal az alfával
Fehér háttérre tegyünk egy tiszta kék, majd egy tiszta piros réteget, mindkettőt 0,5 alfával. Az RGB értékek rendre 0, 0, 255 és 255, 0, 0. Maradunk az előző, megadott sRGB csatornákon végzett egyszerű összetételnél, és a köztes eredményeket nem kerekítjük.
A kék és a fehér először 127,5; 127,5; 255 értéket ad. Erre kerül a piros: a végső csatornák 191,25; 63,75; 127,5. Egészre kerekítve ez #BF4080.
Fordított sorrendben előbb a piros kerül a fehérre: 255; 127,5; 127,5. A fölötte lévő kék réteggel 127,5; 63,75; 191,25 adódik, kerekítve #8040BF.
| Alsó színes réteg | Felső színes réteg | Kerekített végeredmény |
|---|---|---|
| Kék, 50% | Piros, 50% | #BF4080 |
| Piros, 50% | Kék, 50% | #8040BF |
A felső szín súlya 0,5, az alsóé 0,25, a fehér háttéré 0,25. A két színes réteg együttes fedettsége mindkét sorrendben 75%, a fehér háttérrel együtt a kész képpont teljesen fedő. Azonos alfaértékekből tehát különböző szín jöhet ki. Felületellenőrzésnél a két szín és az alfa mellé a rétegsorrendet is rögzítsd; más színtér vagy rétegmód esetén számold újra az összetételt.
Elérhető-e a kívánt árnyalat pusztán az alfával?
Teljesen fedő háttéren az előző képlet visszafelé is rendezhető: alfa = (célcsatorna − háttércsatorna) / (előtércsatorna − háttércsatorna). Ez abban a csatornában használható, ahol az előtér és a háttér értéke eltér. A három csatornának ugyanazt a 0 és 1 közötti alfát kell adnia a választott összetételi modellben.
Maradjunk a 46; 134; 193 előtérnél és a fehér háttérnél. A kívánt szín legyen a saját példánkban 202,75; 210; 239,5. A piros és a kék csatornából 0,25 alfa adódik, a zöldből viszont (210 − 255) / (134 − 255) ≈ 0,3719. Egyetlen alfaérték ezért nem állítja elő ezt a célárnyalatot. Negyedes alfánál a zöld 224,75 marad; a célhoz az előtérszínt, a hátteret vagy az összetételi módot is módosítani kellene.
A W3C összetételi egyenletéből kapott visszaszámítást a kerekítetlen csatornákon végezd. Egész csatornákból visszafejtve kisebb eltérések pusztán a kerekítésből is eredhetnek. Ha valamelyik előtércsatorna megegyezik a háttérrel, annak eredménye alfától függetlenül állandó; azzal a csatornával az alfa nem határozható meg.
Két áttetsző réteg fedettsége
Az egymásra kerülő alfákat általában nem lehet egyszerűen összeadni. Ha két egyforma színű, különálló, 50%-os réteget teszel egymás fölé, az együttes fedettség 1 − (1 − 0,5) × (1 − 0,5) = 0,75, azaz 75%. A végleges színhez ezután a háttér is szükséges.
Eltérő előtérszíneknél a rétegek sorrendje is számít. A 0–255 tartományú színcsatornát pedig ne keverd össze a 0–1 tartományú alfaértékkel. Egy 128-as nyolcbites alfa aránya 128 / 255 ≈ 0,502, ami kicsit nagyobb a pontos 0,5-nél.
A konkrét felület ellenőrzésekor ezért őrizd meg az alapszínt, a fedettséget, a hátteret és a rétegek sorrendjét. A kiszámolt RGB érték ezekkel a feltételekkel együtt értelmezhető.
Záró tudáspróba
Kérdésenként egy választ jelölj meg, majd a megoldások alapján pontozd magad. Ez a három kérdés a cikkben bemutatott összefüggéseket ellenőrzi.
1. Melyik RGB csatornahármas felel meg a #2E86C1 színnek?
- A) 32; 134; 191.
- B) 46; 134; 193.
- C) 46; 86; 193.
2. Mekkora két külön, egymásra tett 50%-os réteg együttes fedettsége?
- A) 75%.
- B) 25%.
- C) 100%.
3. Egy célárnyalathoz a piros és kék csatorna 0,25, a zöld 0,3719 körüli alfát kívánna. Elég egyetlen közös alfa módosítása?
- A) Igen: a három alfát átlagolni kell, és a cél pontosan előáll.
- B) Igen: mindig a legnagyobb alfát kell választani.
- C) Nem: a három csatorna eltérő alfát igényel a megadott modellben.
Megoldások és pontozás
1. B. A párok tizenhatos számok: 2 × 16 + 14 = 46; 8 × 16 + 6 = 134; 12 × 16 + 1 = 193. Ismétléshez: Egy HEX szín visszafejtése.
2. A. Az áteresztett hányad 0,5 × 0,5 = 0,25, ezért a fedettség 1 − 0,25 = 0,75. Az előtérszínek a kész színt is meghatározzák. Ismétléshez: Két áttetsző réteg fedettsége.
3. C. Egy réteg közös alfája az összes csatornára ugyanaz. Eltérő szükséges értékeknél az előtér, háttér vagy összetételi mód további változtatása kell. Ismétléshez: Elérhető-e a kívánt árnyalat pusztán az alfával?.
Minden helyes válasz 1 pont; a hibás vagy kihagyott válasz 0 pont. Az összpontszám 0–3 lehet.
- 0 pont: dolgozd végig újra a három megoldásban megjelölt részt, és írd le a példák kiinduló feltételeit.
- 1 pont: a két elhibázott kérdésnél vezesd le a helyes választ; külön írd mellé, melyik feltétel vagy számolási lépés maradt ki.
- 2 pont: térj vissza az egyetlen elhibázott kérdéshez kapcsolt részhez, majd egy bemenet megváltoztatásával ellenőrizd újra az eredményt.
- 3 pont: a három összefüggést ebben a feladatsorban helyesen alkalmaztad. Próbáld ki a cikk egyik ellenőrzését saját adatokkal, a feltételeket és a mértékegységeket is feljegyezve.