Sélecteur/Convertisseur de couleurs
Sélectionnez des couleurs et convertissez entre différents formats
Correspondances alternatives :
Aperçu de l'apparence du texte
The quick brown fox jumps over the lazy dog
color: #6366f1; background-color: #6366f1; border-color: #6366f1;
À propos des modèles de couleur
Les couleurs sont fondamentales pour la conception numérique. Cet outil facilite la conversion entre différents modèles pour les designers et développeurs.
Comprendre les différents modèles de couleurs est essentiel pour le développement web, la conception UI et la création d'art numérique.
Formats et fonctionnalités
#RRGGBB
0-255, 0-255, 0-255
0°-360°, 0-100%, 0-100%
0°-360°, 0-100%, 0-100%
0-100%, ×4
16-235, 16-240, 16-240
L*: 0-100, a*/b*: -128 to +127
Détails des formats de couleur
HEX (Hexadécimal)
Les couleurs HEX utilisent une notation hexadécimale à 6 chiffres précédée de #. Chaque paire représente les valeurs rouge, vert et bleu (00-FF). La notation abrégée (#RGB) s'étend à #RRGGBB. Un format à 8 chiffres (#RRGGBBAA) est également pris en charge pour la transparence alpha.
Usage : CSS, HTML, design web, la plupart des langages de programmation
RGB (Rouge, Vert, Bleu)
Le modèle RGB crée des couleurs en combinant la lumière rouge, verte et bleue - c'est un modèle additif. Ce modèle correspond directement à la façon dont les écrans émettent de la lumière, ce qui en fait l'espace colorimétrique natif des affichages numériques.
Usage : Écrans, éclairage LED, CSS, traitement d'images numériques
HSL (Teinte, Saturation, Luminosité)
HSL représente les couleurs en fonction de la perception humaine. La teinte est l'angle sur la roue des couleurs, la saturation est l'intensité de la couleur, et la luminosité est la clarté de la couleur. Cela rend la manipulation des couleurs plus intuitive.
Usage : CSS, génération de palettes, sélection de couleurs intuitive
HSV/HSB (Teinte, Saturation, Valeur)
HSV (également appelé HSB) est similaire à HSL mais utilise Valeur au lieu de Luminosité. La valeur représente la brillance, avec 100% étant le plus brillant. Ce modèle correspond à la façon dont les artistes pensent aux couleurs, le rendant populaire dans de nombreuses applications graphiques.
Usage : Photoshop, GIMP, sélecteurs de couleurs dans les logiciels graphiques
CMYK (Cyan, Magenta, Jaune, Clé/Noir)
CMYK est un modèle soustractif utilisé pour l'impression. Contrairement au RGB qui ajoute de la lumière, le CMYK soustrait la lumière du papier blanc. Le « K » signifie Clé (noir), qui améliore la qualité d'impression et réduit l'utilisation d'encre.
Usage : Design imprimé, impression commerciale, packaging
YCbCr (Luminance, Chrominance)
YCbCr sépare les composantes de luminance (Y) et de différence de couleur (Cb, Cr). Cette séparation permet une compression vidéo efficace car l'œil humain est plus sensible à la luminosité qu'à la couleur. Couramment utilisé dans les standards JPEG, MPEG et de diffusion.
Usage : Compression JPEG, encodage vidéo (H.264, HEVC), diffusion TV
Lab (CIE L*a*b*)
Lab est un espace colorimétrique perceptuellement uniforme conçu pour approximer la vision humaine. L* est la luminosité, a* est l'axe vert-rouge, et b* est l'axe bleu-jaune. Une unité de distance perceptuelle apparaît à peu près identique quelle que soit la couleur.
Usage : Science des couleurs, calculs de différence de couleur (Delta E), gestion professionnelle des couleurs
Pantone (PMS)
Le système de correspondance Pantone (PMS) est un système propriétaire de standardisation des couleurs largement utilisé dans l'impression, la mode et le design produit. Chaque couleur a un code unique assurant une reproduction cohérente sur différents matériaux et fabricants.
Usage : Identité de marque, impression commerciale, design d'emballage, industrie textile
Note : Ce sont des représentations numériques approximatives. Les couleurs Pantone réelles peuvent varier à l'impression.
Fondamentaux de la théorie des couleurs
Les couleurs existent dans différents « espaces » optimisés pour différentes utilisations. Les modèles additifs (RGB) fonctionnent en ajoutant de la lumière, les modèles soustractifs (CMYK) en absorbant la lumière. Les modèles perceptuels (Lab) s'alignent sur la vision humaine.
Modèle additif
RGB combine la lumière rouge, verte et bleue. L'ajout des trois à intensité maximale crée du blanc. C'est ainsi que fonctionnent les écrans, les projecteurs et les affichages numériques.
Modèle soustractif
CMYK absorbe (soustrait) les longueurs d'onde de la lumière du blanc. La combinaison de toutes les couleurs crée (en théorie) du noir. C'est ainsi que fonctionnent les encres et les peintures.
Modèle perceptuel
Lab et espaces similaires sont conçus autour de la perception humaine, ce qui les rend idéaux pour la comparaison et la correction des couleurs.
Notes sur la conversion
- RGB ↔ HEX : Conversion sans perte, changement de format uniquement
- RGB ↔ HSL/HSV : Sans perte dans la gamme, peut perdre de la précision
- RGB ↔ CMYK : Peut perdre des couleurs en dehors de la gamme imprimable
- RGB ↔ Lab : Utilise l'illuminant D65, suppose l'espace colorimétrique sRGB
- RGB ↔ YCbCr : Utilise la norme BT.601 par défaut
Normes de contraste WCAG
Les directives d'accessibilité du contenu Web (WCAG) définissent les exigences minimales de contraste entre le texte et l'arrière-plan pour garantir que tous les utilisateurs, y compris ceux ayant des déficiences visuelles, puissent lire le contenu.
Cas d'utilisation courants
Questions fréquentes
Quelle est la différence entre les formats HEX, RGB et HSL ?
HEX est une notation hexadécimale à six chiffres (ex. : #FF5733) qui encode les mêmes canaux rouge, vert et bleu que RGB, mais en base 16. RGB exprime chaque canal en décimal de 0 à 255, facile à lire dans le code. HSL (Teinte, Saturation, Luminosité) sépare l’angle de couleur de son intensité et de sa luminosité, ce qui est bien plus intuitif pour créer des teintes plus claires ou plus foncées sans deviner les valeurs RGB. Les trois formats sont entièrement interconvertibles.
Que signifie le canal alpha (A) dans RGBA et HSLA ?
Le canal alpha contrôle l’opacité d’une couleur. Dans RGBA et HSLA, la valeur A va de 0 (entièrement transparent) à 1 (entièrement opaque), ou de 0 % à 100 % en CSS. Par exemple, rgba(255, 0, 0, 0.5) est un rouge à 50 % de transparence. L’alpha est utilisé pour les superpositions, les ombres et les effets de survol. La notation HEX standard n’inclut pas l’alpha, sauf si vous utilisez la notation HEX à 8 chiffres (ex. : #FF573380).
Quelle est la différence entre HSL et HSV (HSB) ?
HSL et HSV (aussi appelé HSB — Teinte, Saturation, Luminosité) décrivent tous deux la couleur via un angle de teinte, mais leur troisième dimension diffère. En HSL, une Luminosité de 50 % avec pleine Saturation donne la couleur vive pure, 0 % donne le noir et 100 % le blanc. En HSV, une Valeur de 100 % avec pleine Saturation donne la couleur vive pure, et 0 % est toujours du noir quel que soit la saturation. HSV est courant dans les logiciels de retouche d’image comme Photoshop, tandis que HSL est dominant en CSS.
En quoi les couleurs CMYK diffèrent-elles des couleurs RGB ?
RGB utilise le mélange additif : combiner les trois canaux à pleine intensité produit du blanc. CMYK utilise le mélange soustractif : les encres absorbent la lumière pour produire des teintes foncées. RGB est le système natif des écrans et caméras. CMYK est la norme pour l’impression offset. Pour la conception imprimée, convertissez vos couleurs en CMYK tôt dans le processus, car certaines couleurs RGB vives ne peuvent pas être reproduites à l’impression, en particulier les bleus électriques et les verts fluo.
Pourquoi les couleurs varient-elles entre écrans et appareils ?
L’aspect des couleurs diffère selon les appareils en raison des technologies d’affichage, des profils couleur et de la calibration matérielle. Chaque écran a un gamut — la plage de couleurs qu’il peut afficher. Les moniteurs d’entrée de gamme couvrent 60–72 % du sRGB, tandis que les écrans professionnels atteignent 99 % du sRGB ou les gamuts étendus P3 et AdobeRGB. Les profils ICC indiquent au système d’exploitation comment interpréter les valeurs écran. Sans calibration, le même #FF5733 peut paraître orange sur un écran et rouge-orange sur un autre. Utilisez un écran calibré et spécifiez toujours l’espace colorimétrique cible pour un travail de couleur précis.
Outils Connexes
Convertisseur Image vers Base64
Convertir des images en encodage Base64, prend en charge PNG, JPG, GIF, SVG, WebP, générer Data URI et arrière-plans CSS
Compresseur et Formateur CSS
Compressez ou formatez le code CSS, supprimez les espaces et commentaires pour optimiser la taille du fichier, ou formatez le code pour la lisibilité
Générateur de palette
Générateur de palette de couleurs professionnel avec mélange de couleurs, création de dégradés, schémas de couleurs et export en CSS/SCSS/JSON
Encodeur/Décodeur HTML
Convertir les caractères spéciaux en entités HTML avec formats nommés, décimaux et hexadécimaux pour prévenir les attaques XSS
Encodeur/Décodeur Base64
Encodez et décodez rapidement des chaînes Base64, prenant en charge la conversion de texte et de fichiers
Encodeur/Décodeur URL
Encodez et décodez les URL pour assurer la conformité et la facilité d'utilisation