Convertisseur de Couleurs
Live PreviewConvertissez entre les formats HEX, RGB et HSL.
Supports #hex, rgb(r,g,b), hsl(h,s,l)
Les modÚles de couleur expliqués (HEX/RGB/HSL)
Les modÚles de couleur sont des systÚmes mathématiques pour représenter les couleurs. HEX (Hexadécimal) est un code à 6 chiffres utilisé en HTML et CSS, représentant les composantes Rouge, Vert et Bleu. RGB (Rouge, Vert, Bleu) utilise des valeurs décimales de 0 à 255 pour chaque canal, souvent utilisé en imagerie numérique.
HSL (Teinte, Saturation, Luminosité) est plus intuitif pour les humains, car il décrit la couleur en termes de son pigment de base (Teinte), d'intensité (Saturation) et de luminosité (Luminosité). Comprendre ces modÚles aide à choisir le bon format pour vos besoins de conception et de développement, assurant la cohérence sur différentes plateformes et appareils.
Comment utiliser cet outil
- Utilisez le sélecteur de couleur visuel pour sélectionner une couleur en faisant glisser le curseur dans le carré de saturation/luminosité et le curseur de teinte.
- Alternativement, saisissez une valeur spécifique dans le champ "Saisie manuelle" (prend en charge les formats #hex, rgb ou hsl).
- Observez la boßte "Aperçu" pour voir la couleur sélectionnée en temps réel.
- Consultez les valeurs converties dans les cartes HEX, RGB, HSL et HSV ci-dessous.
- Cliquez sur l'icÎne "Copier" sur n'importe quelle carte pour sauvegarder ce format spécifique dans votre presse-papiers.
Cas d'utilisation courants
- Design web : Convertir les couleurs des outils de design (souvent RGB/HSL) en codes HEX pour les feuilles de style CSS.
- Cohérence de marque : S'assurer que les couleurs de votre marque sont représentées avec précision dans différents formats numériques et médias.
- Développement UI : Générer rapidement des variations plus claires ou plus sombres d'une couleur de base en ajustant la valeur de Luminosité en HSL.
- Tests d'accessibilité : Utiliser l'aperçu pour vérifier si les couleurs choisies offrent suffisamment de contraste pour un texte lisible et des éléments UI.
Conseils de pro
- Utilisez HSL lors de la conception de composants UI comme les boutons, car il est facile de créer des états de survol en ajustant simplement la valeur de luminosité.
- Lorsque vous travaillez avec la transparence en CSS, préférez
rgba()ouhsla()pour une meilleure lisibilité et un meilleur contrÎle sur le canal alpha. - Vérifiez toujours les ratios de contraste des couleurs pour vous assurer que vos conceptions sont accessibles aux utilisateurs malvoyants.