Aller au contenu principal
ImageColorPix

Convertisseur de couleurs

Collez une couleur (HEX, RGB, HSL, HSV, CMYK ou un nom) et obtenez tous les formats instantanément. Aperçu en direct, nuances et harmonies, pastilles de contraste, copie en un clic. Appuyez sur Espace pour l'aléatoire.

#3B82F6

sur blanc / noir

Nuances et teintes, cliquez pour charger

Harmonies, cliquez pour charger

Qu'est-ce qu'un convertisseur de couleurs ?

Une couleur, tous les langages

Une même couleur s'écrit de plusieurs façons : HEX pour les feuilles de style, RGB pour les écrans et le code, HSL pour construire des palettes, HSV pour les retoucheurs photo, CMYK pour l'impression, et LAB/XYZ pour le travail perceptuel. Cet outil traduit entre eux instantanément, saisissez n'importe quelle notation et chaque équivalent apparaît avec un aperçu en direct.

Au-delà de la conversion, vous obtenez nuances et teintes, harmonies complémentaires, analogues et triadiques, aperçus de contraste sur blanc et noir, et liens partageables.

Utilisation

01

Saisissez n'importe quel format

HEX (#3B82F6 ou #39F), rgb(), hsl(), hsv(), cmyk(), « 255,130,246 » ou des noms comme teal. Détecté automatiquement pendant la saisie.

02

Copiez ce qu'il vous faut

Chaque ligne a son bouton copier et Copier tout. Collez directement dans CSS, Tailwind, Figma ou specs print.

03

Explorez les variantes

Cliquez sur une nuance ou harmonie pour la recharger. Passez au vérificateur de contraste pour vérifier la lisibilité.

Exemples concrets

HEX Figma vers CSS et Tailwind

Le designer vous donne #3B82F6, collez-le pour obtenir rgb(59,130,246) pour le canvas, HSL pour les variantes de survol, et un lien partageable ?hex=… pour le ticket. Parcours le plus utilisé sur les sites de conversion.

Variantes de survol et thèmes en HSL

Besoin d'un bouton plus foncé au survol ? Gardez teinte et saturation, baissez la clarté de 10 points (par ex. hsl(217,91%,60%) → 50%). Copiez le nouveau HEX. Sans deviner, des tokens design cohérents.

Kits de marque dans chaque notation

Documentez une couleur de marque en HEX pour CSS, RGB pour les applis, HSL pour le thème et CMYK pour le papier à en-tête, côte à côte. Cliquez sur une nuance pour la recharger et construire l'échelle complète 50 à 950.

Contrôle print d'emballage

Les vifs d'écran changent sous presse. Collez le HEX pour prévisualiser le CMYK naïf (par ex. bleu vif vers fort cyan et magenta), puis confirmez avec épreuves et profils ICC avant production.

Maths photo et canvas en HSV et RGB

Les éditeurs pensent en HSV et HSB (Photoshop), le code pense en canaux RGB 0 à 255. Convertissez hsv(217,76%,96%) en canaux pour scripts, shaders ou pipelines image.

Déboguez écarts et contraste

Couleur différente selon les plateformes ? Convertissez pour comparer les canaux exacts, vérifiez les pastilles blanc et noir, puis passez au vérificateur de contraste pour valider la lisibilité avant de livrer.

Questions fréquentes

1Quelle est la différence entre HEX, RGB et HSL ?
Question la plus posée. HEX et RGB sont la même couleur 24 bits : #FF0000 vaut octet pour octet rgb(255,0,0). HEX est compact pour CSS, RGB expose les canaux pour le code. HSL reformule en teinte, saturation et clarté, les nuances de survol et thèmes ne changent donc qu'un nombre.
2Quels formats de saisie sont acceptés ?
HEX 3 et 6 avec ou sans #, rgb()/hsl()/hsv()/cmyk() en syntaxe virgule ou espace, triplets « r,g,b » simples, et noms CSS comme teal. Tout texte illisible affiche une aide et garde la dernière couleur valide.
3Pourquoi les nombres diffèrent-ils si c'est la même couleur ?
Les bases diffèrent, pas la couleur : HEX est en base 16, RGB en décimales 0 à 255, HSL en degrés et pourcents. Un petit arrondi (±1) après conversion est un comportement normal de virgule flottante.
4Quand utiliser HSL ou HSV plutôt que HEX ?
Pour régler les visuels : gardez la teinte, baissez la saturation pour des thèmes atténués, ou baissez la clarté pour survol et mode sombre. HSV correspond aux UI de sélecteurs. HSL correspond aux modèles mentaux de thème. Livrez le résultat en HEX.
5Le CMYK est-il exact ? Correspondra-t-il à l'impression ?
Question print la plus posée. Notre CMYK est un calcul naïf standard, bon pour prévisualiser, pas exact pour la presse. Encre, papier et profils ICC modifient le rendu réel, vérifiez donc les emballages critiques par épreuve et voyez la ligne comme un point de départ.
6Comment copier pour CSS, Tailwind ou Figma ?
Chaque ligne a son bouton copier et Copier tout pour le bloc complet. Collez le HEX dans les variables, RGB dans le code canvas, ou utilisez les nuances pour remplir une échelle façon Tailwind. L'URL (?hex=…) marque la couleur exacte pour la transmission.
7Gère-t-il la transparence ou les valeurs hors plage ?
Ce convertisseur est volontairement opaque (HEX et RGB et HSL sans alpha) pour garder des lignes comparables. Les canaux hors plage sont écrêtés (par ex. 300 vers 255), pas rejetés, vos collages ne cassent donc jamais l'aperçu.
8Mes données sont-elles téléversées ?
Non. Gratuit, sans inscription. Les liens partageables restent sur votre machine jusqu'à envoi.

Découvrez d'autres outils couleur

Vérificateur de Contraste

Lisibilité du texte et notes WCAG

Générateur de Palettes

Harmonies aléatoires + mode image

Générateur de Dégradés

CSS linéaire, radial et conique

Pipette Couleur d'Image

Prélevez tout pixel de toute image