Convertisseur de couleurs : HEX en RGB, HSL et OKLCH
Conversions HEX, RGB, HSL et OKLCH avec aperçu en direct.
HEX
#22c55e
RGB
rgb(34 197 94)
HSL
hsl(142.1 70.6% 45.3%)
OKLCH
oklch(0.723 0.192 149.6)
Join the Veojson dispatch
Besoin de notre kit de démarrage de design tokens basé sur OKLCH ? Inscrivez-vous.
One email, no spam, unsubscribe any time.
À propos de cet outil
Chaque espace colorimétrique a son usage : HEX pour le handoff, HSL pour des ajustements rapides, et OKLCH pour des palettes perceptuellement uniformes où la luminosité reste constante.
Pourquoi OKLCH est essentiel
En HSL, deux couleurs avec la même valeur de luminosité peuvent paraître très différentes. OKLCH est perceptuellement uniforme, garantissant des palettes équilibrées.
Créer des teintes et nuances
Conservez le chroma et la teinte, variez la luminosité. Vous obtiendrez une palette cohérente bien plus vite qu'en modifiant des valeurs HEX à la main.
Comment utiliser Convertisseur de couleur
- 1
Saisissez une couleur
Tapez une valeur HEX ou utilisez le sélecteur ; un HEX à 8 chiffres inclut la transparence.
- 2
Lisez tous les formats
Les équivalents RGB, HSL et OKLCH s'affichent instantanément avec un aperçu.
- 3
Copiez la valeur CSS
Copiez en un clic la notation dont votre feuille de style a besoin.
- 4
Vérifiez le contraste
Contrôlez la couleur dans le tableau de contraste WCAG ci-dessous avant de la publier.
Bonnes pratiques
- Définissez un format canonique pour votre équipe et imposez-le via du linter plutôt qu'en revue de code.
- Attention à l'encodage : UTF-8 en entrée et en sortie, sans caractères BOM parasites.
- Testez les cas limites : valeurs vides, chaînes très longues et caractères non-Latin.
- Automatisez la conversion dans votre pipeline de build une fois le résultat validé ici.
Convertisseur de couleur — Pourquoi c'est important
Les tâches de formatage et de conversion sont triviales individuellement mais chronophages au cumul : elles consomment discrètement des heures de dev chaque semaine.
Les exécuter instantanément et de façon constante élimine toute une catégorie d'erreurs de copier-coller.
Outils similaires, gratuits et payants
| Outil | Type | Fonctions clés | Lien |
|---|---|---|---|
| CoolorsOffre | Freemium | Génération et exportation rapides de palettes | Visiter |
| Adobe Color | Free | Règles d'harmonie et tests d'accessibilité | Visiter |
| oklch.com | Free | Sélecteur OKLCH perceptuel pour le CSS moderne | Visiter |
| FigmaOffre | Freemium | Design tokens et styles de couleurs partagés | Visiter |
Certains liens marqués Offre sont des liens partenaires. Ils ne vous coûtent rien de plus et aident à garder ces outils gratuits.