Convertisseur HEX vers RGB
Convertisseur en ligne gratuit de HEX vers RGB. Saisissez n'importe quel code HEX et obtenez instantanément RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Décimal, Android ARGB et Win32 COLORREF. Comprend une pipette de couleur sur canevas, un vérificateur de contraste WCAG 2.1, 6 types d'harmonies colorées, une échelle de teintes/nuances en 10 niveaux, une simulation de daltonisme à 7 types, une pipette sur image avec loupe, un générateur de dégradés, un générateur de filtres CSS et une correspondance avec la palette Tailwind v3.
- 19 simultaneous format conversions
- WCAG AA/AAA contrast checker
- 6 color harmony palette types
- Image eyedropper with magnifying loupe
Also accepts: rgb() · hsl() · CSS color names · shorthand #F00
| HEX | — | |
| HEX (no #) | — | |
| RGB | — | |
| RGBA | — | |
| HSL | — | |
| HSLA | — | |
| HSV / HSB | — | |
| HWB | — | |
| CMYK | — | |
| CIE Lab | — | |
| LCH | — | |
| OKLCH | — | |
| CSS Named | — | |
| Integer | — | |
| 0x Notation | — | |
| Android ARGB | — | |
| Swift UIColor | — | |
| Java Color | — | |
| .NET Color | — |
Closest Tailwind v3
Mathematically derived color palettes. Click any swatch to load that color.
10-step shade/tint scale inspired by Tailwind CSS naming. Click any chip to load it.
Large Text Sample — 18pt Bold
Small body text — The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet consectetur.
How your color appears to people with different types of color vision deficiency. Simulations use peer-reviewed transformation matrices (Viénot, Brettel & Mollon 1997/1999). ~8% of men and ~0.5% of women have some form of color blindness.
Dominant Colors
CSS Filter Generator
Recolor a black SVG/icon to your selected color using a CSS filter.
—
How to Use
- Saisissez un code HEX — tapez
#3B82F6, ou collez n'importe quel format :rgb(),hsl(), ou un nom de couleur CSS. L'outil détecte automatiquement tous les formats. - Faites glisser le sélecteur canvas — le carré saturation/luminosité et la bande de teintes vous permettent d'explorer les couleurs visuellement sans rien taper.
- Copiez instantanément l'un des 19 formats de sortie — HEX, RGB, HSL, CMYK, Lab, LCH, OKLCH, Swift, Java, .NET et plus encore, chacun avec son propre bouton de copie.
- Explorez les onglets de fonctionnalités — générez des palettes de couleurs harmonieuses, vérifiez l'accessibilité WCAG, simulez 7 types de daltonisme, choisissez des couleurs à partir d'une image téléchargée et créez des dégradés.
Convertisseur de couleur HEX vers RGB
Le convertisseur de couleur HEX vers RGB est l'un des outils les plus utilisés en développement web et en design d'interface. Notre convertisseur gratuit va bien au-delà d'un simple changement de format numérique : c'est un véritable espace de travail couleur qui génère simultanément 19 formats de couleur, crée des palettes accessibles, vérifie le contraste WCAG et simule le daltonisme, tout cela en temps réel pendant que vous tapez ou faites glisser.
Qu'est-ce qu'un code couleur HEX ?
Un code couleur HEX (hexadécimal) est une chaîne de 6 caractères précédée de #, comme #3B82F6.
Chaque paire de caractères représente un canal de couleur — rouge, vert et bleu — exprimé en base 16.
Par exemple, #FF0000 est un rouge pur : R=255 (FF), G=0 (00), B=0 (00).
Les codes HEX sont le langage universel de la couleur dans les navigateurs web, en CSS, dans des outils de design comme Figma et Sketch,
et dans le balisage HTML.
Qu'est-ce que le RGB ?
Le RGB (rouge, vert, bleu) est le modèle de couleur additif utilisé par tous les écrans numériques. Chaque canal
varie de 0 à 255. rgb(59, 130, 246) est l'équivalent CSS de #3B82F6,
un bleu vif utilisé dans la palette blue-500 de Tailwind CSS. La conversion entre HEX et RGB
est nécessaire chaque fois que vous passez d'une notation CSS abrégée à des outils de design ou à des langages de programmation.
19 formats de couleur à la fois
Au-delà de HEX et RGB, cet outil génère instantanément : RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, CIE Lab,
LCH, OKLCH, XYZ, Integer, notation 0x, Android ARGB, Swift UIColor, Java AWT Color,
et .NET Color.FromArgb() — tous les formats utilisés en CSS, sur Android, iOS, en impression et en programmation graphique.
Sélecteur de couleur Canvas
Le sélecteur de couleur intégré utilise l'API Canvas pour afficher un carré de saturation-luminosité fluide et
une bande de teintes. Faites glisser le réticule vers n'importe quel point, ou faites glisser la bande de teintes pour parcourir tout le spectre.
Le sélecteur fonctionne à 60 images par seconde grâce à requestAnimationFrame et prend totalement en charge le tactile sur mobile.
C'est un véritable sélecteur de niveau professionnel, et non le <input type="color"> natif limité du navigateur.
Générateur de palettes (6 types d'harmonie)
Des harmonies de couleurs calculées mathématiquement rendent la création de palettes instantanée. Choisissez parmi les palettes Complémentaire, Analogue, Triadique, Complémentaire divisée, Tétradique et Monochromatique. Chaque nuancier est cliquable et charge cette couleur dans le convertisseur. Exportez n'importe quelle palette en propriétés personnalisées CSS, en configuration Tailwind, en variables SCSS ou en JSON.
Vérification de l'accessibilité WCAG
Chaque couleur que vous saisissez est instantanément évaluée selon les directives d'accessibilité WCAG 2.1. Le vérificateur de contraste compare votre couleur à n'importe quelle couleur de texte (blanc par défaut) et affiche les ratios de contraste avec des badges de réussite/échec pour AA Normal (4,5:1), AA Large (3:1), AAA Normal (7:1) et AAA Large (4,5:1). Inversez le premier plan et l'arrière-plan en un clic.
Divisez le code HEX à 6 chiffres en trois paires et convertissez chacune de la base 16 à la base 10. Par exemple, pour #3B82F6 : 3B = R=59, 82 = G=130, F6 = B=246. Notre outil le fait instantanément et génère également 18 autres formats en même temps.
Le HEX à 3 chiffres (#F00) est une notation abrégée : chaque chiffre est dédoublé (#FF0000). Le format à 6 chiffres est le format standard. Le format à 8 chiffres (#FF0000CC) inclut un canal alpha/transparence dans les deux derniers chiffres. Utilisez le curseur alpha pour générer une sortie HEX8 à 8 chiffres.
Oui — le champ HEX et l'onglet « Coller n'importe quoi » acceptent tous les formats de couleur. Collez rgb(59,130,246), hsl(217,91%,60%), cornflowerblue, ou même des valeurs séparées par des virgules comme 59, 130, 246, et l'outil les convertit automatiquement.
Les WCAG (Web Content Accessibility Guidelines) définissent des ratios de contraste minimaux pour garantir que le texte reste lisible par les personnes malvoyantes. Le niveau AA exige un ratio de 4,5:1 pour le texte normal et de 3:1 pour le texte large (18pt et plus, ou 14pt en gras). Le niveau AAA exige respectivement 7:1 et 4,5:1. Respecter ces normes est requis pour la conformité ADA et constitue une bonne pratique UX.
OKLCH est un espace colorimétrique moderne et perceptuellement uniforme, pris en charge nativement par CSS Color Level 4. Contrairement au HSL, des changements numériques égaux en OKLCH correspondent à des changements de couleur perçus de manière égale, ce qui en fait un choix idéal pour générer des échelles de couleurs accessibles et cohérentes. Utilisez la sortie OKLCH lorsque vous travaillez avec du CSS moderne.
Nous appliquons des matrices de transformation linéaire 3x3 à vos valeurs RGB — une matrice distincte pour chaque type de déficience de la vision des couleurs — basées sur des recherches évaluées par des pairs menées par Vienot, Brettel et Mollon (1997/1999). Les 7 types simulés sont : Protanopie, Deutéranopie, Tritanopie, Protanomalie, Deutéranomalie, Tritanomalie et Achromatopsie (daltonisme complet).
Il génère une chaîne de propriété CSS filter qui transforme un SVG ou une icône noire dans la couleur que vous avez sélectionnée. C'est extrêmement utile pour les bibliothèques d'icônes (Font Awesome, Heroicons) lorsque vous devez recolorer des éléments SVG sans modifier les fichiers source. Vous le trouverez dans l'onglet Dégradé.
Non. Tous les calculs de couleur s'effectuent entièrement dans votre navigateur grâce à JavaScript. Les images que vous téléchargez sont traitées localement via l'API Canvas et ne quittent jamais votre appareil. L'historique des couleurs et les favoris sont enregistrés uniquement dans le localStorage de votre navigateur.