HTML színkódok (RGB, RGBA, HEX, HSL és HSLA színmegadási módok)

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

• név
• RGB színkód
• RGBA színkód
• HEX színkód
• HSL színkód
• HSLA színkód

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).

Példa szín megadásra név segítségével

<p style="background-color:Red;">Piros</p>
<p style="background-color:SlateBlue;">Palakék</p>
Code language: HTML, XML (xml)

Szín megadása RGB színkóddal

Az RGB színkód elnevezése az angol Red, Green és Blue szavakból ered.

RGB színkódok felépítése

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

<p style="background-color:rgb(255,0,0);">Piros</p>
Code language: HTML, XML (xml)

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.

RGBA színkódok szintaxisa

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

<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)

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.

HEX színkódok szintaktikája

#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

<p style="background-color:#ff0000;">Piros</p>
Code language: HTML, XML (xml)

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.

HSL színkódok felépítése

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

<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)

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.

HSLA színkódok szintaxisa

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

<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)

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!