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

Ebből a cikkből megtanulhatod a HTML színek megadásának módjait, illetve azt, hogy hol és hogy mire használhatod fel a HTML színeket.

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

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

Szín megadása RGB kóddal

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

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

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

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

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.

Színmegadása HEX (hexadecimális) színkód segítségével a HTML nyelvben

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

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.

Színmegadása HSL színkód segítségével a HTML nyelvben

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

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.

Színmegadása HSLA színkód segítségével a HTML nyelvben

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

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.

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.

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.

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