Si i specifikon ngjyrat në CSS?

Question

Accepted Answer

CSS ofron disa formate ngjyrash. Ata prodhojnë ngjyra të njëjta — zgjedhja është rreth lexueshmërisë dhe nëse ke nevojë për transparencë.

```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 */
```

## Pse HSL është shpesh më i dobishmi

HSL përshkruan ngjyrën si **H**ue (0–360° në rrotën e ngjyrave), **S**aturation dhe **L**ightness — e cila hartëzon në atë se si njerëzit mendojnë për ngjyrën, duke e bërë variacione intuitiv:

```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 */
```

Gjenerimi i një nuance më të lehtë/më të errët është i parëndësishëm — ndrysho vetëm një numër. Të bësh këtë me hex ose rgb kërkon ri-kalkulimin e të gjitha kanaleve.

## Alfa / transparencë

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

Sintaksa `/ alpha` (0 = transparent, 1 = opaque) është mënyra se si bën ngjyra gjysëm-transparente, të dobishme për mbivendosje dhe hije. (Shënim: `opacity` në një element zbeh *të gjithë* elementin, përfshirë fëmijën — ngjyrat alfa zbehura vetëm atë ngjyrë.)

## Formate moderne

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

## Pse është i rëndësishëm

Njohja e formateve të lejon të zgjedhësh mjetin e duhur: hex/rgb për ngjyra njëherëshe, **HSL/OKLCH për sisteme dizajni** (e lehtë, variacion të intuitiv nuance), dhe sintaksën `/ alpha` për transparencë.

HSL veçanërisht e bën ndërtimin e paletave ngjyrash konsistente, temabël shumë më të lehtë.