Kayek kake tsara launuka a cikin CSS?

Question

Accepted Answer

CSS yana bayar da wasu tsarin launi. Suna yin daidai da launuka — zaɓi shine game da karanta da ko kuna bukatuwar transparency.

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

## Me yasa HSL shine mafi fa'ida

HSL ya bayyana launi azaman **H**ue (0–360° akan wag launi), **S**aturation, da **L**ightness — wanda ya dace da yadda mutane suke tunanin launi, yana sa canji ba tare da wuyar gida ba:

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

Sayar da sassa mai haske/duhu shi ne gajerejiya — canja lambar ɗaya. Yin haka tare da hex ko rgb yana bukatuwa maimaitawa duk channels.

## Alpha / Gaskiya

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

`/ alpha` syntax (0 = transparent, 1 = opaque) shine yadda kake yin semi-transparent launuka, masu amfani don overlays da inuwa. (Bayani: `opacity` akan element yana yin blurred duk element, ciki da jaraje — alpha launuka sun yin blurred jiya launi.)

## Tsarin zamani

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

## Me yasa ya mahimaci

Sanin tsarin yana ba da damar zaɓi kayan aiki daidai: hex/rgb don launuka gida, **HSL/OKLCH don tsarin design** (sauƙi, canji mai sani), da `/ alpha` syntax don transparency.

HSL musamman yana sa gina consistent, themeable color palettes ya fi sauƙi.