Convertisseur de Couleur: HEX, RGB, HSL, CMYK

Qu'est-ce que Color Converter ?

Color Converter est un outil en ligne gratuit qui convertit instantanément n'importe quelle couleur entre les cinq formats de couleur les plus courants : HEX, RGB, HSL, HSB (HSV) et CMYK. Collez ou saisissez une valeur de couleur dans n'importe quel format pris en charge — l'outil détecte automatiquement ce que vous avez saisi et affiche toutes les autres représentations simultanément en temps réel. Il résout la friction quotidienne de passer d'une valeur HEX Figma à une fonction CSS HSL, ou de traduire des valeurs RGB d'écran en pourcentages CMYK d'impression — sans copier des valeurs dans une calculatrice. Toute la conversion s'effectue localement dans le navigateur sans serveur requis.

Fonctionnalités principales

• Convertir entre HEX, RGB, HSL, HSB et CMYK — les cinq formats sont affichés simultanément dès qu'une couleur valide est saisie. Le code utilise un hook useColorConversion qui maintient les objets d'état hex, rgb, hsl, hsb et cmyk synchronisés.
• Détection automatique du format — la zone de texte détecte HEX (valeurs commençant par # ou correspondant à /^[0-9a-f]{3,8}$/i), RGB (préfixe rgb) et HSL (préfixe hsl) automatiquement, en affichant un badge indiquant « Détecté : HEX » (ou RGB/HSL/Auto).
• Conversion en temps réel à la frappe — chaque frappe produisant une valeur analysable déclenche immédiatement un nouveau rendu des cinq formats de sortie. Aucun clic sur un bouton n'est nécessaire.
• Copier n'importe quel format dans le presse-papiers — chaque ligne de format dispose d'un bouton de copie affichant une coche verte pendant 2 secondes après une copie réussie. Une notification toast confirme l'action.
• Aperçu visuel de la couleur — un grand cadre d'aperçu se remplit avec la couleur actuelle et affiche la valeur hex en texte à contraste automatique (noir ou blanc selon la luminance).
• Entrées numériques pour RGB, HSL, HSB et CMYK — des panneaux d'ajustement manuel permettent de régler chaque canal : R, G, B (0–255), H (0–360), S (0–100), L (0–100) pour HSL, H (0–360), S (0–100), B (0–100) pour HSB, et C, M, Y, K (0–100) pour CMYK, tous limités aux plages valides.
• URL partageable — l'outil utilise un hook useShareableState pour encoder la couleur actuelle dans l'URL, permettant des liens directs vers des conversions de couleurs spécifiques.
• Fonctionne hors ligne après chargement — aucune requête réseau pendant la conversion ; la bibliothèque de conversion complète est intégrée à la page.

Utilisation

Étape 1 : Saisir la couleur

Ouvrez le Color Converter. La moitié gauche de la carte de saisie contient un champ de texte. Collez l'un des formats suivants :

• Une valeur hex : #3B82F6
• Une fonction RGB : rgb(59, 130, 246)
• Une fonction HSL : hsl(217, 91%, 60%)
• Un string hex brut : 3b82f6 (sans le #)

Dès que vous saisissez ou collez une valeur reconnaissable, un petit badge apparaît en haut à droite du champ — par exemple « Détecté : HEX ». La moitié droite de la carte affiche un aperçu de couleur en direct qui se remplit immédiatement avec la couleur détectée.

Vous pouvez également utiliser le sélecteur de couleur natif situé sous le cadre d'aperçu. Cliquez sur le carré de couleur pour ouvrir le sélecteur de votre navigateur ; sélectionner une couleur définit la saisie et met à jour tous les formats simultanément.

Étape 2 : Vérifier tous les formats

Sous la carte de saisie, la carte « Tous les formats » liste cinq lignes :

Chaque ligne affiche l'étiquette du format, la valeur formatée en police monospace et un bouton icône pour copier. Cliquez sur un bouton copier pour placer cette valeur spécifique dans le presse-papiers.

Étape 3 : Affiner avec les entrées numériques

Sous le champ de texte, l'outil propose des entrées numériques directes pour les quatre modèles de couleur ajustables :

• RGB : Trois entrées numériques étiquetées R, G, B — chacune accepte des valeurs de 0 à 255 et est limitée aux plages valides.
• HSL : Trois entrées numériques étiquetées H (0–360), S (0–100), L (0–100).
• HSB : Trois entrées numériques étiquetées H (0–360), S (0–100), B (0–100).
• CMYK : Quatre entrées numériques étiquetées C, M, Y, K — chacune accepte des valeurs de 0 à 100.

Modifier n'importe quelle entrée met à jour l'état hex, qui se propage instantanément aux cinq formats de sortie. C'est utile quand vous connaissez un angle de teinte cible, un pourcentage de saturation ou une valeur CMYK et avez besoin du hex équivalent pour CSS.

Étape 4 : Copier et utiliser les valeurs converties

Cliquez sur le bouton copier à côté du format dont vous avez besoin. L'icône du bouton passe d'une icône de presse-papiers à une coche verte pendant 2 secondes. Un toast de succès apparaît en bas de l'écran.

L'outil enregistre également un historique des conversions dans le HistoryPanel (Premium). Lorsque vous restaurez une entrée d'historique, elle définit la saisie sur la valeur hex stockée et relance toutes les conversions.

Étape 5 : Partager une couleur spécifique

L'URL se met à jour automatiquement à chaque changement de couleur (via useShareableState). Copiez l'URL du navigateur pour partager un lien direct vers n'importe quelle couleur spécifique. Les destinataires qui ouvrent le lien voient un toast « Chargé depuis un lien partagé » et la couleur partagée préchargée dans tous les formats.

Exemples pratiques

Traduire un token de design Figma en CSS

Un designer fournit un violet de marque #8467C7. Le développeur a besoin de la valeur HSL pour une fonction CSS color-mix(). En ouvrant Color Converter et en saisissant #8467C7, hsl(261, 40%, 59%) s'affiche immédiatement dans la ligne HSL — prêt à coller.

Convertir une couleur d'impression en web

Une imprimerie spécifie un bleu d'entreprise comme cmyk(76%, 47%, 0%, 4%). La détection automatique du champ de texte ne reconnaît pas la notation CMYK brute, mais vous pouvez saisir les valeurs directement via le panneau d'entrée numérique CMYK : réglez C à 76, M à 47, Y à 0 et K à 4. Les sorties HEX, RGB et HSL se mettent à jour en temps réel, vous donnant les valeurs prêtes pour le web instantanément.

Créer une palette mode sombre

Un développeur crée un thème sombre et doit transformer une couleur claire en variante plus sombre. Il saisit #E2E8F0 (slate clair), note que le HSL est hsl(214, 32%, 91%), puis réduit manuellement l'entrée du canal L de 91 à 25 pour obtenir l'équivalent sombre. La sortie HEX se met à jour sur #253443, qu'il copie directement.

Conseils et bonnes pratiques

Saisir sans le # pour une entrée plus rapide. L'expression régulière de détection automatique reconnaît les strings hex bruts comme 3b82f6 au format HEX. Vous pouvez coller directement depuis des outils de design qui suppriment le dièse.

Utiliser les entrées RGB pour un contrôle précis des canaux. Si vous avez besoin d'une couleur avec une valeur rouge exacte de 200, tapez directement dans l'entrée R plutôt que de chercher le bon préfixe hex. La limitation min/max vous empêche de saisir des valeurs hors plage accidentellement.

Mettre en favori les couleurs via l'URL partageable. Puisque la couleur est encodée dans l'URL via useShareableState, vous pouvez mettre en favori des couleurs de marque fréquemment référencées et les rouvrir instantanément sans resaisir les valeurs.

Le badge de détection est une vérification rapide de validité. Si le badge n'apparaît pas après la saisie, l'entrée n'a pas été reconnue comme une couleur valide. Vérifiez les fautes de frappe — les erreurs courantes incluent un # manquant, l'utilisation de rgba avec un canal alpha (non pris en charge actuellement) ou la saisie de valeurs RGB en pourcentage.

Les quatre modèles de couleur ont des entrées modifiables. RGB, HSL, HSB et CMYK ont tous des panneaux d'entrée numérique dédiés. Vous pouvez commencer depuis n'importe quel modèle en ajustant ses valeurs directement, et les autres formats se mettent à jour en temps réel.

Problèmes courants et dépannage

Rien n'apparaît dans les lignes de sortie après la saisie. Le texte de saisie n'a pas été reconnu comme une couleur valide. La fonction parseColorToHex gère les hex avec #, les hex bruts, les strings rgb() et hsl(). Si vous avez saisi un format différent (comme un nom de couleur CSS cornflowerblue), la détection automatique renvoie null et aucune conversion ne se déclenche. Utilisez une valeur hex à la place.

Les entrées RGB acceptent des valeurs supérieures à 255. Le code limite les valeurs à Math.min(255, Math.max(0, val)) lors du changement, donc si vous saisissez 300, cela se fixe à 255 dès que l'entrée est traitée. C'est le comportement attendu.

L'entrée de teinte HSL se limite à 360. Le champ de teinte est limité à Math.min(360, Math.max(0, val)). Saisir 361 règle à 360 ; saisir -1 règle à 0.

Le bouton copier ne répond pas. Si navigator.clipboard.writeText échoue (par exemple dans un contexte non sécurisé ou restreint), l'outil se rabat sur la méthode document.execCommand('copy') en utilisant un élément textarea temporaire. Si les deux échouent, vérifiez que le navigateur a la permission presse-papiers pour le site.

Le toast « Chargé depuis un lien partagé » apparaît de façon inattendue. Ce toast s'affiche une fois quand isFromUrl est vrai, signifiant qu'une couleur était encodée dans la chaîne de requête URL. Si vous avez ouvert une URL mise en favori, c'est attendu. Le toast n'apparaît qu'une seule fois par chargement de page grâce au garde de référence hasShownShareToast.

Confidentialité et sécurité

Color Converter traite toutes les conversions localement en utilisant des mathématiques JavaScript. Aucune valeur de couleur, texte de saisie ou résultat de conversion n'est transmis à un serveur. L'URL partageable encode la couleur uniquement dans l'URL du navigateur — elle n'est jamais envoyée nulle part à moins que vous choisissiez de partager le lien. L'outil utilise l'API Web Clipboard pour les opérations de copie, qui sont également entièrement locales. Fonctionne entièrement hors ligne après le premier chargement de la page.

Questions fréquentes

Color Converter est-il gratuit ?

Oui, entièrement gratuit sans compte requis. Les cinq formats de conversion, le sélecteur visuel de couleurs, les entrées manuelles RGB et HSL, la copie dans le presse-papiers et les URLs partageables sont disponibles pour tous les utilisateurs sans frais. Les fonctionnalités Supporter comme PresetsPanel et HistoryPanel nécessitent une activation Ko-fi de 5 $ pour 30 jours d'accès.

Color Converter fonctionne-t-il hors ligne ?

Oui. Une fois la page chargée, toute la logique de conversion s'exécute entièrement en JavaScript sans requêtes externes. Vous pouvez fermer votre connexion réseau et continuer à convertir des couleurs sans interruption.

Mes données sont-elles en sécurité avec Color Converter ?

Oui. Les valeurs de couleur sont traitées uniquement en mémoire du navigateur. Rien n'est envoyé à un serveur. L'URL partageable encode la couleur côté client — les serveurs de Glyph Widgets ne consignent jamais les couleurs spécifiques avec lesquelles vous travaillez.

Quels formats Color Converter prend-il en charge ?

L'outil prend en charge cinq formats : HEX (strings hex de 3 ou 6 chiffres avec ou sans #), RGB (notation rgb(R, G, B)), HSL (notation hsl(H, S%, L%)), HSB/HSV et CMYK. Les cinq formats disposent de panneaux d'entrée numérique dédiés pour l'ajustement direct des valeurs.

Quelle est la différence entre HSL et HSB ?

Les deux utilisent la Teinte (0–360 degrés) et la Saturation (0–100%), mais le troisième canal diffère. HSL utilise la Luminosité, où 50% est une couleur entièrement saturée et 100% est toujours blanc. HSB (aussi appelé HSV) utilise la Brillance/Valeur, où 100% est la version la plus pure de la teinte et 0% est toujours noir. Figma et la plupart des outils de design affichent HSB ; CSS utilise HSL.

Puis-je convertir CMYK en HEX ?

La détection automatique dans le champ de texte ne parse pas la notation CMYK brute, mais vous pouvez utiliser le panneau d'entrée numérique CMYK pour saisir les valeurs de C, M, Y et K directement. Ajuster n'importe quelle valeur CMYK met à jour tous les autres formats en temps réel, y compris HEX.

Pourquoi la conversion CMYK semble-t-elle légèrement différente de mes valeurs d'impression ?

La conversion écran-impression dépend du profil colorimétrique. L'outil utilise une formule mathématique standard sRGB vers CMYK sans correction de profil ICC. Pour un travail de production d'impression, utilisez un outil de gestion des couleurs qui applique les profils ICC corrects pour votre imprimante et votre papier.

Puis-je saisir des valeurs hex abrégées à 3 chiffres comme #F0F ?

Oui. La fonction parseColorToHex détecte les strings hex correspondant à /^[0-9a-f]{3,8}$/i, ce qui inclut l'abréviation à 3 chiffres. #F0F est traité comme équivalent à #FF00FF.

Comment partager une couleur spécifique avec un collègue ?

Changez la couleur dans l'outil et copiez l'URL du navigateur. La valeur hex actuelle est encodée dans la chaîne de requête URL via useShareableState. Quand votre collègue ouvre le lien, il voit la couleur préchargée avec une notification « Chargé depuis un lien partagé ».

Color Converter prend-il en charge l'alpha (RGBA / HSLA) ?

Pas dans la version actuelle. L'analyseur de saisie gère rgb() et hsl() mais pas rgba() ni hsla(). Les valeurs du canal alpha ne sont pas conservées dans la chaîne de conversion. Pour une prise en charge complète de l'alpha, extrayez les valeurs RGB ou HSL manuellement et gérez l'alpha séparément.

Outils connexes

• Color Picker — échantillonnez des couleurs directement depuis une image chargée ou votre écran et envoyez le résultat au convertisseur.
• Contrast Checker — vérifiez que deux couleurs converties respectent les exigences de contraste WCAG AA ou AAA.
• Bientôt disponible: Palette Generator — générez des palettes de couleurs harmonieuses à partir d'une couleur de base et convertissez chaque nuance dans votre format préféré.

Essayez Color Converter maintenant : Glyph Widgets Color Converter