
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:
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
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
HTML kód
<p style="background-color:rgb(255,0,0);">Piros</p>
Code language: HTML, XML (xml)
Eredmény
Piros
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
HTML kód
<p style="background-color:#ff0000;">Piros</p>
Code language: HTML, XML (xml)
Eredmény
Piros
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
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
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
HTML kód
<p style="color:red;">Így lesz piros a szöveg.</p>
Code language: HTML, XML (xml)
Eredmény
Így lesz piros a szöveg.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
HTML kód
<p style="background-color:red;">A háttér piros lesz.
<br>
Még egy sor.
</p>
Code language: HTML, XML (xml)
Eredmény
A háttér piros lesz.
Még egy sor.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Szegély, keret színezése
A HTML nyelvben akár be is keretezhetünk dolgokat és azokat is beszínezhetjük.
Példa
HTML kód
<p style="border:2px solid red;">A keret piros lesz.
<br>
Még egy sor.
</p>
Code language: HTML, XML (xml)
Eredmény
A keret piros lesz.
Még egy sor.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<