Comment spécifiez-vous les couleurs en CSS ?

Question

Accepted Answer

CSS propose plusieurs formats de couleur. Ils produisent les mêmes couleurs — le choix concerne la lisibilité et si vous avez besoin de transparence.

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

## Pourquoi HSL est souvent le plus utile

HSL décrit la couleur comme **H**ue (0–360° sur la roue des couleurs), **S**aturation et **L**ightness — ce qui correspond à la façon dont les humains pensent à la couleur, rendant les variations intuitives :

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

Générer une teinte plus claire/plus foncée est trivial — changez un seul nombre. Faire cela avec hex ou rgb nécessite de recalculer tous les canaux.

## Alpha / transparence

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

La syntaxe `/ alpha` (0 = transparent, 1 = opaque) est comment vous créez des couleurs semi-transparentes, utiles pour les superpositions et les ombres. (Note : `opacity` sur un élément estompe l'élément *entier*, y compris les enfants — les couleurs alpha estompent juste cette couleur.)

## Formats modernes

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

## Pourquoi c'est important

Connaître les formats vous permet de choisir le bon outil : hex/rgb pour les couleurs ponctuelles, **HSL/OKLCH pour les systèmes de conception** (facile, variations de teinte intuitives), et la syntaxe `/ alpha` pour la transparence.

HSL en particulier rend la création de palettes de couleurs cohérentes et thématisables bien plus facile.