[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:

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

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

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

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

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

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

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

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

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

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

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