Bagaimana anda menentukan warna dalam CSS?

Question

Accepted Answer

CSS menawarkan beberapa format warna. Kesemuanya menghasilkan warna yang sama — pilihan bergantung pada kebolehbacaan dan sama ada anda memerlukan ketelusan.

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

## Mengapa HSL selalunya paling berguna

HSL menerangkan warna sebagai **H**ue (0–360° pada roda warna), **S**aturation, dan **L**ightness — yang sepadan dengan cara manusia berfikir tentang warna, menjadikan variasi lebih 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 */
```

Menjana warna yang lebih cerah/gelap adalah mudah — cuma tukar satu nombor. Melakukannya dengan hex atau rgb memerlukan pengiraan semula semua saluran.

## Alpha / ketelusan

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

Sintaks `/ alpha` (0 = telus, 1 = legap) ialah cara anda membuat warna separa telus, berguna untuk lapisan tindih (overlay) dan bayang. (Nota: `opacity` pada satu elemen melunturkan *keseluruhan* elemen, termasuk anak; warna alpha melunturkan hanya warna itu sahaja.)

## Format moden

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

## Mengapa ia penting

Mengetahui format membolehkan anda memilih alat yang betul: hex/rgb untuk warna sekali guna, **HSL/OKLCH untuk sistem reka bentuk** (variasi warna yang mudah dan intuitif), dan sintaks `/ alpha` untuk ketelusan.

HSL khususnya menjadikan pembinaan palet warna yang konsisten dan boleh-bertema jauh lebih mudah.