CSS'de renkleri nasıl belirtirsiniz?

Question

Accepted Answer

CSS birkaç renk formatı sunar. Aynı renkleri üretirler — seçim okunabilirlik ve saydamlığa ihtiyacınız olup olmadığı hakkındadır.

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

## Neden HSL sıklıkla en faydalıdır

HSL rengi **H**ue (renk tekerleğinde 0–360°), **S**aturation ve **L**ightness olarak tanımlar — bu insanların rengi nasıl düşündüğüne eşlendiğinden, varyasyonları sezgisel hale getirir:

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

Daha açık/daha koyu bir gölge oluşturmak önemsizdir — sadece bir sayı değiştirin. Bunu hex veya rgb ile yapmak tüm kanalları yeniden hesaplamayı gerektirir.

## Alfa / saydamlık

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

`/ alpha` sözdizimi (0 = şeffaf, 1 = opak) yarı saydamlı renkler yaratmanın yoludur; örtüşmeler ve gölgeler için faydalıdır. (Not: bir öğe üzerinde `opacity` tüm öğeyi (çocukları dahil) soluklaştırır — alfa renkleri sadece o rengi soluklaştırır.)

## Modern formatlar

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

## Neden önemli

Format bilgisi, doğru aracı seçmenizi sağlar: tek seferlik renkler için hex/rgb, **tasarım sistemleri için HSL/OKLCH** (kolay, sezgisel gölge varyasyonları) ve saydamlık için `/ alpha` sözdizimi.

HSL özellikle tutarlı, temaya uyarlanabilir renk paletleri oluşturmayı çok daha kolay hale getirir.