Színek használata a HTML nyelvben (Színkódok használata)

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. Színt adhatunk a háttérnek, a szövegnek, vagy szinte bárminek.

Színek megadásának módja

A színeket különböző módokon adhatjuk meg.

Ezek a módok lehetnek:

• 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ínkódokat 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>

Szín megadása RGB kóddal

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

Az RGB kó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>

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>

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

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>

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>

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>

Szövegszín

Sokszor szükséges, hogy egy szövegnek más színt adjunk. Ezt nagyon egyszerűen megoldhatjuk a HTML nyelvben. Bármelyik fent taglalt szín megadási módszert használhatjuk, az egyszerűbb átláthatóság miatt én inkább névvel fogom meghatározni a színeket.

Példa

<p style="color:red;">Így lesz piros a szöveg.</p>

A szöveg színét nem csak p esetében határozhatjuk meg, nyugodtan használhatunk h1-et, pre-t vagy bármi mást, amibe szöveget írhatunk.

Háttérszín

Szerencsére a HTML nyelvben a háttér színezésére is van lehetőségünk.

Példa

<p style="background-color:red;">A háttér piros lesz.
<br>
Még egy sor.
</p>

Szegély, keret színezése

A HTML nyelvben akár be is keretezhetünk dolgokat és azokat is beszínezhetjük.

Példa

<p style="border:2px solid red;">A keret piros lesz.
<br>
Még egy sor.
</p>