Kaip CSS nurodote spalvas?

Question

Accepted Answer

CSS siūlo keletą spalvų formatų. Jie gamina tas pačias spalvas — pasirinkimas yra apie skaitomumą ir tai, ar jums reikalingas skaidrumas.

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

## Kodėl HSL dažnai yra naudingiausias

HSL aprašo spalvą kaip **H**ypersaturation (0–360° spalvų rate), **S**odrumą ir **L**umą — tai atitinka tai, kaip žmonės galvoja apie spalvą, todėl variacijos yra intuityvios:

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

Šviesesnės/tamsesnės atspalvio generavimas yra trivialus — pakeiskite vieną skaičių. Tai padaryti naudojant heksadecimalinį arba rgb reikalauja iš naujo apskaičiuoti visus kanalus.

## Alfa / skaidrumas

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

Sintaksė `/ alpha` (0 = skaidri, 1 = nepermatoma) yra tai, kaip jūs sukuriate semipermatomas spalvas, naudinga perdangoms ir šešėliams. (Pastaba: `opacity` elementui nuslepia *visą* elementą, įskaitant vaikus — alfa spalvos nuslepia tik tą spalvą.)

## Šiuolaikiniai formatai

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

## Kodėl tai svarbu

Žinoti formatus leidžia pasirinkti tinkamą įrankį: heksadecimalinis/rgb vienkartinėms spalvoms, **HSL/OKLCH projektavimo sistemoms** (lengva, intuityvūs atspalvio variantai), ir `/ alpha` sintaksė skaidrumui.

HSL ypač palengvina nuoseklių, temizuojamų spalvų paletės kūrimą.