Qu'est-ce que Convertisseur de Couleur ?
Un convertisseur de couleur est un outil indispensable pour les développeurs web, les graphistes et tous ceux qui travaillent avec des couleurs numériques.
Quand Utiliser Cette Calculatrice
- Vous convertissez une spécification de couleur de designer de Figma ou Sketch en valeurs compatibles CSS.
- Vous créez un système de design.
- Vous créez une palette de couleurs avec HSL.
- Vous vérifiez l’accessibilité par rapport aux normes WCAG.
- Vous convertissez une ancienne valeur de couleur dans un format différent.
- Vous déboguez des problèmes de couleur CSS et vérifiez à quoi ressemble réellement une couleur.
Étapes:
- Entrez une valeur de couleur dans n’importe quel format.
- Sélectionnez le format d’entrée avec les onglets HEX / RGB / HSL.
- Voyez les valeurs converties dans les trois formats sous le champ de saisie.
- Copiez la valeur désirée avec le bouton de copie.
- Vérifiez le badge de contraste WCAG pour l’accessibilité.
Formule
HEX → RGB : Séparer #RRGGBB en valeurs décimales
RGB → HSL : Normaliser RGB → Trouver Teinte/Saturation/Luminosité
HSL → RGB : Utiliser la formule de chrominance pour convertir
Cas d'utilisation
- Convertir des valeurs de couleur CSS
- Créer des palettes de couleurs à partir d’une couleur de base
- Faire correspondre les couleurs du système de conception
- Comprendre les relations de couleur avec HSL
Avantages Clés
- Conversion instantanée et précise entre les formats HEX, RGB et HSL
- Aperçu couleur en direct en temps réel pendant que vous tapez
- Badges automatiques AA et AAA pour vérification du contraste WCAG
- Accès à un historique de conversion avec vos couleurs récentes
- Copiez n’importe quelle valeur de format en un clic
- Fonctionne entièrement dans votre navigateur sans envoyer de données aux serveurs
Conseils de Pro
- Utilisez HSL pour créer des variations de couleur
- Utilisez toujours HEX en CSS et HTML
- Vérifiez votre choix de couleur avec les exigences de contraste WCAG
- Définissez votre palette de base en HSL lors de la création d’un système de design
- N’oubliez pas que les valeurs HEX ne sont pas sensibles à la casse
Erreurs Courantes à Éviter
- Oublier le préfixe # lors de la saisie de couleurs HEX
- Utiliser des valeurs de canal RGB hors de la plage 0-255
- Confondre la plage de teinte HSL avec la plage de canal RGB
- Supposer que la luminosité HSL et la luminosité RGB sont équivalentes
Termes Clés Expliqués
- HEX : Une notation de couleur hexadécimale utilisée en CSS et design web, écrite comme #RRGGBB.
- RGB : Le modèle de couleur Rouge-Vert-Bleu où chaque couleur est définie par trois valeurs numériques.
- HSL : Le modèle de couleur Teinte-Saturation-Luminosité.
- Espace colorimétrique : Un modèle mathématique pour organiser et représenter les couleurs.
- Ratio de contraste WCAG : Une mesure numérique de la différence de luminosité entre la couleur de premier plan et l’arrière-plan.
Concepts connexes
- Convertisseur d’unités CSS : Convertissez px, rem, em, vw et d’autres unités CSS.
- Encodeur/Décodeur Base64 : Encodez et décodez des chaînes Base64.
- Formateur JSON : Formatez et validez des données JSON.
- Testeur Regex: Tester des expressions régulières
- Encodeur/Décodeur URL : Encodez et décodez des chaînes sécurisées pour URL.
Exemple
Entrée : #FF5733 (HEX) → RGB : rgb(255, 87, 51) → HSL : hsl(11, 100%, 60%). Entrée : hsl(200, 50%, 50%) → RGB : rgb(64, 149, 191) → HEX : #4095BF.
Interprétation de vos résultats
Le convertisseur affiche votre couleur dans trois formats simultanément. HEX est le format le plus courant pour le développement web. RGB offre un contrôle direct sur les canaux de couleur. HSL est le plus naturel pour la compréhension humaine.