Convertisseur RGB vers HEX
RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Décimal, Android ARGB, Win32 COLORREF et HEX8. Comprend une pipette de couleur sur canevas, un vérificateur de contraste WCAG 2.1, 6 palettes 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, une recherche de couleurs CSS nommées et une correspondance avec la palette Tailwind v3.
- Color-coded RGB sliders (R red / G green / B blue)
- 19 instant format outputs with 1-click copy
- 10-step shade/tint scale with export
- History + favorites saved to localStorage
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
- Faites glisser les curseurs RGB — canaux Red, Green et Blue (0 à 255 chacun). Chaque piste de curseur affiche son propre dégradé de couleur pour que vous voyiez exactement ce que vous mélangez.
- Visualisez le HEX et 18 autres formats instantanément — les 19 conversions de format se mettent à jour en direct pendant que vous faites glisser les curseurs. Copiez n'importe quel format en un clic.
- Utilisez le sélecteur sur canevas — faites glisser le carré de saturation/luminosité ou la bande de teinte pour une approche visuelle. Entièrement compatible tactile sur mobile.
- Explorez les onglets de fonctionnalités — générez des palettes de couleurs, créez une échelle de nuances/teintes, vérifiez le contraste WCAG, simulez le daltonisme, choisissez une couleur depuis une image ou créez des dégradés.
Convertisseur de Couleur RGB vers HEX
La conversion RGB vers HEX est l'une des tâches les plus fondamentales du développement web. Notre convertisseur RGB vers HEX gratuit la rend instantanée — tapez ou faites glisser les curseurs R, G, B et regardez les 19 conversions de format de couleur se mettre à jour simultanément. La page elle-même réagit à la couleur sélectionnée, créant une expérience immersive digne d'un outil de design professionnel.
Qu'est-ce que le RGB ?
Le RGB (Red, Green, Blue) est le modèle de couleur additif utilisé par tous les écrans numériques. Les
lumières rouge, verte et bleue se combinent pour produire toutes les couleurs visibles. Chaque canal va
de 0 (éteint) à 255 (intensité maximale). rgb(0, 0, 0) est le noir ;
rgb(255, 255, 255) est le blanc ; rgb(59, 130, 246) est un bleu vif.
Le RGB est natif en CSS, HTML Canvas, SVG et pratiquement tous les systèmes graphiques web.
Qu'est-ce que le HEX ?
Un code couleur HEX est une chaîne hexadécimale compacte de 6 caractères comme #3B82F6.
Chaque paire de caractères correspond à un canal RGB en base 16 : 3B=59 (R), 82=130 (G), F6=246 (B).
Le HEX est le format standard dans les feuilles de style CSS, les attributs HTML, Figma, Sketch, Adobe XD,
et la plupart des sélecteurs de couleur des outils de design. Convertir du RGB vers le HEX est nécessaire
lorsqu'on passe de couleurs définies dans le code à des spécifications pour outils de design.
Curseurs RGB à Code Couleur
Contrairement aux curseurs génériques, chaque curseur de canal de cet outil affiche son propre dégradé de couleur en direct. Le curseur Red passe du noir au rouge, montrant exactement l'effet de l'augmentation de ce canal aux valeurs actuelles de green et blue. Il en va de même pour Green et Blue. Cela rend le mélange des couleurs intuitif — vous voyez l'effet de chaque changement avant même de relâcher la souris.
Échelle de Nuances et Teintes en 10 Étapes
Générez une échelle de couleurs complète en 10 étapes (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) inspirée de la nomenclature de Tailwind CSS. Cliquez sur n'importe quelle étape pour la charger comme couleur de travail. Exportez toute l'échelle sous forme de propriétés personnalisées CSS, de configuration Tailwind, de variables SCSS ou de JSON pour une intégration instantanée dans votre système de design.
Générateur d'Harmonies de Couleurs
Six types d'harmonies de couleurs mathématiques sont générés automatiquement : Complementary (opposées sur la roue), Analogous (adjacentes, ±30°), Triadic (réparties à 120°), Split-Complementary (±150° par rapport au complément), Tetradic (quatre à 90°) et Monochromatic (même teinte, luminosité variable). Cliquez sur n'importe quel échantillon de la palette pour charger instantanément cette couleur. Exportez en CSS, Tailwind, SCSS ou JSON.
La Confidentialité Avant Tout
Toutes les conversions se font entièrement dans votre navigateur. Aucune donnée de couleur n'est envoyée
à un serveur. Les images téléchargées sont traitées localement via l'API Canvas. L'historique des couleurs
(les 20 dernières) et les favoris sont stockés uniquement dans le localStorage de votre
navigateur.
Convertissez chaque canal RGB (0-255) en une chaîne hexadécimale à 2 chiffres et concatenez-les avec le préfixe #. Par exemple : R=59=3B, G=130=82, B=246=F6 = #3B82F6. Notre outil le fait instantanément pendant que vous faites glisser les curseurs.
Le HSL (Hue, Saturation, Lightness) organise l'information de couleur d'une manière qui correspond à la perception humaine. La teinte (Hue) est l'angle de couleur (0-360), la saturation (Saturation) est l'intensité (0-100 %), la luminosité (Lightness) est la clarté (0-100 %). C'est beaucoup plus intuitif pour ajuster les couleurs — vous pouvez éclaircir une couleur en modifiant uniquement L, plutôt qu'en ajustant les trois valeurs RGB.
Le CMYK (Cyan, Magenta, Yellow, Key/Black) est le modèle de couleur soustractif utilisé dans la production d'impression professionnelle. Si vous préparez des couleurs pour un travail d'impression, utilisez la sortie CMYK de cet outil pour indiquer les valeurs de couleur précises à votre imprimante ou à votre imprimeur.
Le CIE Lab (L*a*b*) est un espace colorimétrique où des distances numériques égales correspondent à des différences de couleur perçues égales — contrairement au RGB ou au HSL, où le même écart peut sembler différent selon la zone de couleur. Il est utilisé en science de la couleur, dans les profils ICC et dans les logiciels de design professionnels pour des comparaisons de couleurs précises.
Nous calculons la distance euclidienne entre votre couleur RGB et chaque couleur de la palette par défaut de Tailwind v3 (22 familles de couleurs x 11 nuances = 242 couleurs) et affichons les 5 correspondances les plus proches avec leurs noms de classe (par exemple blue-500), leurs valeurs HEX et leurs scores de distance. Cliquez sur le bouton de copie d'une ligne pour copier le nom de la classe.
Ouvrez l'onglet de fonctionnalité Harmonies ou Shades, puis cliquez sur l'un des boutons d'export : CSS Vars, Tailwind, SCSS ou JSON. Le code formaté est copié dans votre presse-papiers.
Oui — ouvrez l'onglet Image, faites glisser-déposer ou téléchargez une image, puis survolez-la pour afficher une loupe grossissante (vue agrandie des pixels) et cliquez sur n'importe quel pixel pour charger sa couleur exacte. L'outil extrait également automatiquement jusqu'à 8 couleurs dominantes sous forme d'échantillons cliquables.
Les favoris et l'historique sont stockés dans le localStorage de votre navigateur et persistent entre les sessions sur le même navigateur. Ils ne sont pas synchronisés entre appareils et seront perdus si vous effacez les données de votre navigateur. Rien n'est stocké sur nos serveurs.