Hogyan adhat meg színeket a CSS-ben?

Question

Accepted Answer

A CSS számos szín formátumot kínál. Ugyanazokat a színeket adják – a választás a olvashatóságról és arról szól, hogy szükséged van-e átlátszóságra.

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## Miért a leghasznosabb az HSL

Az HSL a színt **H**ue (0–360° a szín körön), **S**aturation és **L**ightness szerint írja le — ami megfelel annak, ahogy az emberek a színről gondolkodnak, intuitívvá téve a variációkat:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

Egy világosabb/sötétebb árnyalat létrehozása triviális — változtass meg egy számot. A hex vagy rgb esetében az összes csatorna újraszámítása szükséges.

## Alpha / átlátszóság

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

A `/ alpha` szintakszis (0 = átlátszó, 1 = átlátszatlan) a félátlátszó színek létrehozása, ami hasznos az átfedésekhez és az árnyékokhoz. (Megjegyzés: az `opacity` egy elemre az *egész* elemet halványítja, beleértve a gyermekeket – az alpha színek csak azt a színt halványítják.)

## Modern formátumok

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## Miért fontos

A formátumok ismerete lehetővé teszi a megfelelő eszköz kiválasztását: hex/rgb egyszeri szövegekhez, **HSL/OKLCH a tervezési rendszereknél** (könnyű, intuitív árnyalat-variációk), és a `/ alpha` szintakszis az átlátszósághoz.

Az HSL különösen sokkal könnyebbé teszi az összhangos, témázható színpaletta felépítését.