Convertisseur de couleur : Formats CSS en ligne
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
Ouvrez le convertisseur de couleur
Tout s'exécute directement sur cette page : aucun logiciel à installer et aucun compte requis pour utiliser l'outil gratuit.
- 2
Saisissez vos valeurs
Collez ou tapez vos valeurs dans le panneau ci-dessus. L'outil se met à jour en temps réel au fil de votre saisie.
- 3
Vérifiez le résultat
Consultez le résultat, copiez-le en un clic et ajustez les options jusqu'à obtenir le format attendu par votre système.
- 4
Allez plus loin
Utilisez les conseils de formatage ci-dessous pour rendre le résultat prêt pour la production, puis débloquez les bonus via le formulaire ci-dessus.
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.