Formats de couleurs CSS pour developpeurs : HEX, RGB, HSL et OKLCH
Les developpeurs passent souvent de HEX pour les maquettes a RGB pour JavaScript, HSL pour les themes et alpha pour les overlays. Cette page regroupe les syntaxes utiles.
Syntaxes CSS courantes
/* Solid colors */
.button {
color: #ffffff;
background: #2563eb;
}
/* Alpha colors */
.overlay {
background: rgb(15 23 42 / 72%);
}
/* HSL is useful for theme variants */
:root {
--brand-hue: 221;
--brand: hsl(var(--brand-hue) 83% 53%);
}Checklist developpeur
- Utilisez HEX pour les tokens stables.
- Utilisez RGB avec alpha pour overlays et ombres.
- Utilisez HSL pour generer teintes et nuances.