HTML színek használata

A színek a weboldalak megjelenésének egyik legfontosabb elemei. Segítenek a hangulat kialakításában, a tartalom kiemelésében és az általános dizájnban. A HTML-ben többféle módon is megadhatjuk a színeket.

Színek megadási módjai

A HTML-ben színeket megadhatunk név szerint (pl. red), HEX kód segítségével (pl. #ff0000), RGB formátumban (pl. rgb(255, 0, 0)), vagy HSL formában (pl. hsl(0, 100%, 50%)).

<p style="color: red;">Red text</p>

<p style="color: #00ff00;">Green text (HEX)</p>

<p style="color: rgb(0, 0, 255);">Blue text (RGB)</p>

<p style="color: hsl(60, 100%, 50%);">Yellow text (HSL)</p>

HEX formátum

A HEX (hexadecimális) kódok egy # jellel kezdődnek, és hat karakterből állnak. Az első két karakter a piros, a következő kettő a zöld, az utolsó kettő pedig a kék komponens értékét adja meg.

RGB formátum

Az RGB formátum három számot használ zárójelben: red, green és blue. Minden érték 0 és 255 közötti lehet. Például az rgb(255, 0, 0) a piros színt jelenti.

HSL formátum

A HSL (Hue, Saturation, Lightness) egy másik módszer a színek leírására. A Hue a szín árnyalatát adja fokokban, a Saturation a telítettséget százalékban, a Lightness pedig a világosságot.

Név szerinti színek

HTML-ben több mint 140 előre definiált színnevet használhatunk, például red, blue, green, orange stb. Ezek könnyen olvashatók és gyorsan beépíthetők a stílusba.

Szöveg és háttér kontraszt

Fontos, hogy elegendő kontraszt legyen a szöveg és a háttérszín között, különben a tartalom nehezen olvashatóvá válik. Használj világos szöveget sötét háttéren vagy fordítva.

Színek és akadálymentesség

A színek használata során mindig gondoljunk a látássérült felhasználókra is. Kerüljük azokat a kombinációkat, amelyek színvakok számára olvashatatlanok lehetnek. Fontos, hogy a tartalom ne csak a színekre épüljön.

Tippek színhasználathoz

• Használj konzisztens színsémát az egész oldalon.
• Kerüld az erős, vibráló színek túlzott használatát.
• Teszteld az oldal kinézetét sötét és világos módban is.
• Ne támaszkodj kizárólag a színekre az információ közléséhez.
• Használj színkontraszt ellenőrzőt, hogy megfelelj az akadálymentességi szabványoknak (WCAG).