Színek a CSS-ben

A CSS lehetővé teszi, hogy különböző módokon állítsunk be színeket az elemekhez. Használhatunk színneveket, HEX kódokat, RGB/RGBA értékeket, valamint HSL/HSLA formátumokat.

Színnevek használata

A CSS több mint 140 előre definiált színnevet ismer, mint például 'red', 'blue', 'green'. Ezek gyors és könnyen érthető megoldást jelentenek.

HEX színek

A HEX kódok a színek vörös, zöld és kék komponenseit tartalmazzák. Formátuma: #RRGGBB, ahol minden komponens 00 és FF közötti hexadecimális szám.

RGB és RGBA színek

Az RGB színmodell a vörös, zöld és kék színek keverésével határozza meg a színt. Az RGBA kiegészül egy alfa-csatornával, amely az átlátszóságot adja meg.

HSL és HSLA színek

A HSL (Hue, Saturation, Lightness) modell a színárnyalat, telítettség és világosság alapján adja meg a színt. Az HSLA szintén tartalmaz egy alfa-csatornát az átlátszósághoz.

Színpéldák

Az alábbi négyzetek a színek nevét, HEX és RGB kódját is tartalmazzák.

Red

#FF0000

rgb(255, 0, 0)

Green

#00FF00

rgb(0, 255, 0)

Blue

#0000FF

rgb(0, 0, 255)

Purple

#800080

rgb(128, 0, 128)

Orange

#FFA500

rgb(255, 165, 0)

Cyan

#00FFFF

rgb(0, 255, 255)

Pink

#FFC0CB

rgb(255, 192, 203)

Yellow

#FFFF00

rgb(255, 255, 0)

Színformátumok összehasonlítása

Az alábbi példák bemutatják, hogyan érhetjük el ugyanazt a színt különböző formátumokkal.

Tippek a színek használatához

A színek helyes megválasztása fontos a weboldalak megjelenésénél és az akadálymentesítés szempontjából is.

Mindig ügyelj a szöveg és a háttér színe közötti megfelelő kontrasztra.
Az RGBA és HSLA színek átlátszóságot adnak, ami modern dizájnoknál különösen hasznos lehet.
Nagy projektekben érdemes konzisztens színpalettát használni, hogy a dizájn egységes maradjon.