Selecteur Couleur
Color Picker Css
Hex Rgb Hsl
Convertisseur Couleur
Palette Couleur
Outil En Ligne De Selecteur De Couleur
Choisissez une couleur et convertissez-la en HEX, RGB, HSL ou RGBA. Previsualisez le rendu, copiez les valeurs CSS en un clic et creez des palettes harmonieuses.
Sélecteur de Couleur
HEX
#3498db
RGB
rgb(52, 152, 219)
RGBA
rgba(52, 152, 219, 1)
HSL
hsl(204, 70%, 53%)
HSLA
hsla(204, 70%, 53%, 1)
Texte sur blanc
Texte sur noir
Les formats de couleurs en CSS
Le CSS supporte plusieurs façons d'exprimer une couleur. Chaque format a ses avantages selon le contexte d'utilisation.
Les 4 formats principaux : HEX, RGB, RGBA, HSL/HSLA — tous supportés par tous les navigateurs modernes.
- HEX —
#RRGGBB— 6 caractères hexadécimaux. Compact, lisible. Ex:#ff5733 - RGB —
rgb(R, G, B)— valeurs de 0 à 255. Intuitif pour les développeurs. Ex:rgb(255, 87, 51) - RGBA —
rgba(R, G, B, A)— comme RGB avec transparence (0–1). Ex:rgba(255, 87, 51, 0.5) - HSL —
hsl(H, S%, L%)— Teinte, Saturation, Luminosité. Plus naturel pour ajuster les couleurs. Ex:hsl(11, 100%, 60%) - HSLA —
hsla(H, S%, L%, A)— HSL avec transparence. Ex:hsla(11, 100%, 60%, 0.5)
Quand utiliser chaque format
- ✅ HEX — Variables CSS, tokens de design, valeurs statiques, compatibilité maximale
- ✅ RGB/RGBA — Quand vous avez besoin de transparence ou que vous calculez des valeurs dynamiquement en JS
- ✅ HSL — Idéal pour créer des palettes : il suffit de changer la luminosité pour avoir des variantes claires/sombres
- ✅ HSLA — Overlays, ombres colorées semi-transparentes
Conseil pro : Utilisez HSL dans vos design tokens CSS pour créer facilement des thèmes clairs/sombres en ne changeant que la luminosité.
/* Exemple avec HSL pour un système de couleurs */
--color-primary: hsl(204, 70%, 53%);
--color-primary-light: hsl(204, 70%, 70%);
--color-primary-dark: hsl(204, 70%, 35%);Accessibilité et contraste des couleurs
Les normes WCAG (Web Content Accessibility Guidelines) imposent un ratio de contraste minimum entre le texte et son fond :
- AA Normal — ratio ≥ 4.5:1 pour texte normal
- AA Large — ratio ≥ 3:1 pour grands textes (18px+)
- AAA — ratio ≥ 7:1 pour une accessibilité maximale
Outil : Le sélecteur ci-dessus affiche le contraste de votre couleur sur fond blanc et noir pour vous aider à respecter les normes d'accessibilité.
Outils de palettes de couleurs populaires
- Coolors.co — générateur de palettes harmonieuses, très populaire
- Adobe Color — roue chromatique avancée, règles d'harmonie (complémentaire, triadique...)
- Tailwind CSS Colors — palette standardisée prête à l'emploi
- Material Design Colors — système de couleurs de Google
- Open Color — palette open source optimisée pour les UI
- Paletton — outil de création de palettes complémentaires
