Kepiye carane nemtokake warna ing CSS?

Question

Accepted Answer

CSS nawakake pirang-pirang format warna. Padha-padha ngasilake warna sing padha — pilihan kasebut mung babagan kemudahan maca lan apa sampeyan butuh transparansi.

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

## Napa HSL kerep paling migunani

HSL nggambarake warna minangka **H**ue (0–360° ing roda warna), **S**aturation, lan **L**ightness — sing cocog karo cara manungsa mikir babagan warna, dadi variasi dadi 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 */
```

Nggawe warna sing luwih cerah/peteng gampang tenan — ganti siji angka. Nindakake iku karo hex utawa rgb butuh ngrekomputasi maneh kabeh channel.

## Alpha / transparansi

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

Sintaksis `/ alpha` (0 = transparan, 1 = opaque) iku carane nggawe warna sing semi-transparan, migunani kanggo overlay lan shadow. (Catatan: `opacity` ing elemen ngafadake *kabeh* elemen, kalebu bocah — warna alpha mung ngafadake warna kasebut.)

## Format modern

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

## Napa iku penting

Ngerti format-format kasebut ngidini sampeyan milih alat sing tepat: hex/rgb kanggo warna sekali-kali, **HSL/OKLCH kanggo design system** (gampang, variasi shade intuitif), lan sintaksis `/ alpha` kanggo transparansi.

HSL khususnya ndadekake nggawa palet warna sing konsisten lan bisa diganti tema luwih gampang.