![[Színkódok] HTML színmegadási módok (Színmegadás RGB, RGBA, HEX, HSL és HSLA színkóddal) 1 Színek megadásának módja HTML-ben](https://webiskola.hu/wp-content/uploads/2020/09/html-szinek.jpg)
[Színkódok] HTML színmegadási módok (Színmegadás RGB, RGBA, HEX, HSL és HSLA színkóddal)
Egy HTML weboldal készítése során szükségünk lehet a színek használatára, szerencsére ez sem akadály a HTML nyelvben. A színeket különböző módokon adhatjuk meg. Bármelyiket használhatjuk és ugyanazokat a színeket elérhetjük mindegyik verzióval.
Színmegadási módok:
Szín megadása névvel
A HTML beépítetten 140 szín nevét ismeri fel. Ezeket a színeket angolul kell megadnunk. A legegyszerűbb színektől (például: Red) a bonyolultabbakig (például: SlateBlue).
![[Színkódok] HTML színmegadási módok (Színmegadás RGB, RGBA, HEX, HSL és HSLA színkóddal) 2 Színmegadása a szín nevével a HTML nyelvben](https://webiskola.hu/wp-content/uploads/2020/09/html-szinmegadas-nevvel-1024x576.jpg)
Példa szín megadásra név segítségével
HTML kód
<p style="background-color:Red;">Piros</p>
<p style="background-color:SlateBlue;">Palakék</p>
Code language: HTML, XML (xml)
Eredmény
Piros
Palakék
Szín megadása RGB színkóddal
Az RGB színkód elnevezése az angol Red, Green és Blue szavakból ered.
![[Színkódok] HTML színmegadási módok (Színmegadás RGB, RGBA, HEX, HSL és HSLA színkóddal) 3 Színmegadása RGB színkód segítségével a HTML nyelvben](https://webiskola.hu/wp-content/uploads/2020/09/html-szinmegadas-rgb-koddal-1024x576.jpg)
Az RGB színkódok felépítése így néz ki:
rgb(red, green, blue)
VAGY
rgb(piros, zöld, kék)
A “red”, “green” és “blue” helyére szánt értékek 0 és 255 közötti értéket vehetnek fel.
Példa RGB színkódos szín megadásra
HTML kód
<p style="background-color:rgb(255,0,0);">Piros</p>
Code language: HTML, XML (xml)
Eredmény
Piros
Szín megadás RGBA színkóddal
Az RGBA színkód szinte teljesen megegyezik az RGB színkóddal, viszont itt bejön a képbe egy új attribútum, amely az Alpha csatornára utal.
![[Színkódok] HTML színmegadási módok (Színmegadás RGB, RGBA, HEX, HSL és HSLA színkóddal) 4 Színmegadása RGBA színkód segítségével a HTML nyelvben](https://webiskola.hu/wp-content/uploads/2020/09/html-szinmegadas-rgba-szinkoddal-1024x576.jpg)
Az RGBA színkódok felépítése így néz ki:
rgba(red, green, blue, alpha)
MÁSKÉPP
rgba(piros, zöld, kék, alfa)
Az “alpha” paraméter 0.0 és 1.0 közötti értéket vehet fel, ahol a 0 teljesen átlátszó és az 1 egyáltalán nem átlátszó. A kettő közötti értékek az átlátszóság mértékét határozzák meg
Példa szín megadására RGBA színkóddal
HTML kód
<p style="background-color:rgba(255,0,0,0);">Teljesen átlátszó piros</p>
<p style="background-color:rgba(255,0,0,0.5);">Félig átlátszó piros</p>
<p style="background-color:rgba(255,0,0,1);">Egyáltalán nem átlátszó piros</p>
Code language: HTML, XML (xml)
Eredmény
Teljesen átlátszó piros
Félig átlátszó piros
Egyáltalán nem átlátszó piros
Szín megadás HEX színkóddal
Ebben az esetben a színkódot hexadecimális kóddal adjuk meg. Számomra ez a legkedvesebb módszer, általában ezt használom.
A HEX színkódok felépítése így néz ki:
#RRGGBB
Code language: CSS (css)
Ahol az RR a piros, a GG a zöld és a BB a kék. Az egyes színek (például RR) egy 00-tól ff-ig terjedő értéket vehetnek fel. (00-tól 99-ig számot, majd ezután jön az “aa” érték, majd az “ab” és így tovább “ff”-ig.) Ezek az értékek egy színt határoznak meg.
Példa HEX színkódos szín megadására
HTML kód
<p style="background-color:#ff0000;">Piros</p>
Code language: HTML, XML (xml)
Eredmény
Piros
Szín megadás HSL színkóddal
A HSL az angol “Hue”, “Saturation” és “Lightness” szóból ered. Magyarul: színárnyalat, telítettség, fényesség. A HTML nyelvben ezen három tulajdonság segítségével is meghatározhatunk egy konkrét színt.
A HSL színkódok felépítése így néz ki:
hsl(hue, saturation, lightness)
MÁSKÉPP
hsl(színárnyalat, telítettség, fényesség)
A “Hue” értékhez egy 0 és 360 közötti számot kell megadnunk. Ahol a 0 a piros, a 120 a zöld és a 240 a kék. A “Saturation”-hoz egy 0% és 100% közötti értéket kell megadnunk, ahol a 0% a szürke árnyalatát jelenti és a 100% pedig a teljes színt. A “Lightness”-hez szintúgy egy 0% és 100% közötti értéket kell megadni, ahol a 0% a fekete és a 100% a fehér.
Példa HSL színkódos szín megadására
HTML kód
<p style="background-color:hsl(0, 100%, 50%);">Nagyon élénk piros</p>
<p style="background-color:hsl(0, 86%, 40%)
;">Sötét piros</p>
Code language: HTML, XML (xml)
Eredmény
Nagyon élénk piros
Sötét piros
Szín megadás HSLA színkóddal
Csakúgy ahogy az RGB és az RGBA esetében, itt is egy Alpha csatornával bővül a kód az előzőhöz képest.
A HSLA színkódok felépítése így néz ki:
hsla(hue, saturation, lightness, alpha)
MÁSKÉPP
hsla(színárnyalat, telítettség, fényesség, alfa)
Az “alpha” paraméter jelen esetben is egy 0.0 és egy 1.0 közötti értéket vehet fel, ahol a 0.0 a teljesen átlátszó, míg az 1.0 egyáltalán nem átlátszó.
Példa HSLA színkóddal történő szín megadására
HTML kód
<p style="background-color:hsla(0, 100%, 50%, 0)
;">Teljesen átlátszó piros</p>
<p style="background-color:hsla(0, 100%, 50%, 0.5);
">Félig átlátszó piros</p>
<p style="background-color:hsla(0, 100%, 50%, 1);
">Egyáltalán nem átlátszó piros</p>
Code language: HTML, XML (xml)
Eredmény
Teljesen átlátszó piros
Félig átlátszó piros
Egyáltalán nem átlátszó piros