Unaweza kugawa rangi katika CSS?

Question

Accepted Answer

CSS inatoa miundo kadhaa ya rangi. Hutoa rangi sawa — chaguo liko juu ya kusomeka na ikiwa unahitaji ukwasi.

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

## Kwa nini HSL karansi ndio muhimu zaidi

HSL inaelezea rangi kama **H**ue (0–360° kwenye gurudumu la rangi), **S**aturation na **L**ightness — ambayo inawasilisha jinsi wanadamu wanavyofikiria kuhusu rangi, ikifanya tofauti kuwa intuitif:

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

Kutengeneza kivuli kigubike/kinayonenepa ni kitu kilichosindika — badilisha nambari moja tu. Kufanya hilo kwa hex au rgb kunahitaji kuhesabu upya chaneli zote.

## Alfa / ukwasi

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

Sintaksi ya `/ alpha` (0 = ukwasi, 1 = opaque) ndio jinsi unavyotenda rangi nusu-zenye ukwasi, muhimu kwa mifuni na vivuli. (Kumbuka: `opacity` kwenye kipengele kinadhoofisha kitu kizima, pamoja na watoto — rangi za alfa zinambuki rangi hiyo tu.)

## Miundo ya sasa

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

## Kwa nini kinachohitajika

Kujua miundo inakuruhusu kuchagua zana sahihi: hex/rgb kwa rangi za mara moja, **HSL/OKLCH kwa mifumo ya muundo** (rahisi, tofauti zinazoenea kwenye kuweka kivuli), na sintaksi ya `/ alpha` kwa ukwasi.

HSL hasa inafanya ujenzi wa paneli ya rangi za tulivu, inayokamatia tema kuwa rahisi sana.