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>
Code language: HTML, XML (xml)

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

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>
Code language: HTML, XML (xml)

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>

Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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