Convertisseur format de couleur
Convertissez une couleur entre HEX, RGB, HSL, HSV, OKLCH et CMYK. Aperçu, contraste et valeurs CSS.
Soutenez le projet
J’ai choisi de limiter les publicités pour garder l’expérience simple et agréable. Si cet outil vous a été utile, vous pouvez m’aider à le faire vivre — chaque geste compte pour un développeur solo.
Convertissez n'importe quelle couleur entre les formats HEX, RGB, HSL, HSV, OKLCH et CMYK, avec aperçu visuel et valeurs prêtes pour le CSS.
Description
Ce convertisseur permet de saisir une couleur dans un format courant (HEX, RGB, HSL, HSV, OKLCH ou CMYK) et d'obtenir immédiatement toutes les équivalences dans les autres formats. Chaque ligne affiche la représentation « valeur » lisible et la chaîne HTML/CSS utilisable (lorsque le format est supporté en CSS). Un aperçu visuel et les ratios de contraste (sur fond blanc et noir) aident à choisir des couleurs lisibles pour vos interfaces.
Comment faire
- Saisissez une couleur dans le champ (avec ou sans # pour le HEX, ou en utilisant les fonctions CSS : rgb(), hsl(), oklch(), cmyk(), etc.).
- Choisissez le format d'entrée : « Détection automatique » pour laisser l'outil reconnaître le format, ou un format précis pour forcer l'interprétation.
- Ajustez les options si besoin : casse du HEX en sortie, inclusion de l'alpha, syntaxe CSS moderne (espaces) ou classique (virgules), nombre de décimales.
- Cliquez sur « Convertir ». Le bloc résultat affiche l'aperçu, le contraste et un tableau Code / Valeur / HTML·CSS avec bouton Copier pour chaque format.
Exemples
- HEX :
#3498dbou3498db→ équivalent RGB, HSL, HSV, OKLCH, CMYK. - RGB :
rgb(52, 152, 219)ourgb(52 152 219)→ conversion dans tous les autres formats. - HSL :
hsl(204, 70%, 53%)ouhsl(204 70% 53%)→ même principe. - Avec transparence :
rgba(255, 0, 0, 0.5)ou#ff000080→ alpha pris en compte partout sauf en CMYK (indiqué par un avertissement).
Cas d'usage
- Intégration web : obtenir rapidement la forme HEX ou RGB/HSL pour vos feuilles de style ou variables CSS.
- Design et maquettes : faire le lien entre une valeur d’outil (Figma, etc.) et le code (HEX, RGB, OKLCH).
- Accessibilité : vérifier le contraste sur fond blanc ou noir et voir la couleur de texte suggérée.
- Impression : avoir une idée des valeurs CMYK à partir d’une couleur écran (en gardant à l’esprit que c’est une approximation).
Limites
- CMYK : la conversion RGB → CMYK est une approximation dans l’espace sRGB. Pour une correspondance fidèle en impression, il faut utiliser un profil couleur (ICC) adapté.
- OKLCH : dérivé de sRGB ; les couleurs hors gamut peuvent être ramenées dans la plage affichable, avec un avertissement si une normalisation est appliquée.
- HSV : n’a pas de fonction CSS standard ; la ligne affiche la valeur et « N/A » pour la colonne CSS.
Bonnes pratiques
- Utilisez la détection automatique pour coller une valeur sans savoir son format.
- Pour du code CSS réutilisable, activez « Syntaxe CSS moderne » (espaces, sans virgules).
- Vérifiez le contraste si la couleur sert de fond à du texte ; le ratio et la couleur de texte suggérée (blanc ou noir) sont affichés.
FAQ
Quels formats d'entrée sont acceptés ?
HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA), RGB/RGBA (avec virgules ou syntaxe moderne avec espaces et / pour l’alpha), HSL/HSLA, HSV/HSB, OKLCH, et CMYK (pourcentage ou décimal). Vous pouvez forcer le format via le menu « Format d’entrée ».
Pourquoi la conversion CMYK est-elle « approximative » ?
La conversion affichée part de l’espace sRGB (écran). En impression, les encres et le papier dépendent d’un profil couleur (ICC). Sans ce profil, on ne peut donner qu’une approximation ; pour une correspondance précise, utilisez un logiciel ou un flux avec profils ICC.
Qu’est-ce que OKLCH ?
OKLCH est un espace de couleur perceptuel (Lightness, Chroma, Hue) dérivé d’OKLab. Il est supporté en CSS moderne et permet des dégradés et des réglages de couleur plus prévisibles visuellement. L’outil convertit depuis sRGB vers OKLCH.
Comment est calculé le contraste ?
Le ratio de contraste est calculé à partir de la luminance relative (WCAG) de la couleur convertie, comparée au blanc (1) et au noir (0). La couleur de texte suggérée (blanc ou noir) est choisie pour maximiser la lisibilité sur la couleur affichée.
Puis-je utiliser une couleur avec transparence (alpha) ?
Oui. Les formats HEX (8 caractères), RGBA, HSLA et OKLCH avec alpha sont acceptés. L’option « Inclure l’alpha » contrôle si les sorties affichent le canal alpha. En CMYK, l’alpha n’est pas représenté ; un avertissement l’indique.
Que signifie « Syntaxe CSS moderne » ?
En syntaxe moderne (CSS Color Level 4), les fonctions comme rgb() et hsl() utilisent des espaces au lieu de virgules, et l’alpha est indiqué avec « / » (ex. rgb(255 0 0 / 50 %)). C’est plus lisible et conforme aux recommandations récentes.
Pourquoi certains formats affichent « N/A » en CSS ?
HSV et CMYK n’ont pas de fonction CSS standard. L’outil affiche tout de même la valeur lisible et une chaîne à copier pour référence ; seule la colonne « CSS » indique N/A pour ces formats.
Sécurité et confidentialité
Les calculs sont effectués entièrement dans votre navigateur. Aucune couleur ni donnée n’est envoyée à un serveur. Vous pouvez utiliser l’outil hors ligne une fois la page chargée.
Alternatives
- Outil de pipette : pour prélever une couleur depuis une image ou l’écran, utilisez un logiciel ou une extension de type color picker.
- Logiciels de PAO : pour une conversion CMYK fidèle à l’impression, des logiciels comme InDesign ou Scribus avec profils ICC sont plus adaptés.
- Variables CSS : pour gérer des thèmes, vous pouvez combiner ce convertisseur avec des variables CSS (custom properties) en collant les valeurs générées.
Une suggestion ou une demande d'outil ?
Vous avez repéré une erreur, vous souhaitez un nouvel outil ou vous avez un retour à partager ? Contactez-moi par email, je serais ravi d'échanger avec vous.