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

Ebben a cikkben megismerkedhetsz az összes lehetséges színmegadási móddal, amely lehetséges a HTML nyelvben.

Színek megadásának módja HTML-ben

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

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ínmegadása a szín nevével a HTML nyelvben

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ínmegadása RGB színkód segítségével a HTML nyelvben

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

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ínmegadása RGBA színkód segítségével a HTML nyelvben

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

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.

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

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.

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

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.

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

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

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