Convertisseur RGB vers HEX

Qu'est-ce qu'un convertisseur RGB vers HEX ?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Fonctionnalités clés

Alternatives au convertisseur RGB vers HEX

Exemples RGB vers HEX

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Conversions RGB → HEX courantes

Table de référence des 10 tuples RGB les plus convertis et leurs équivalents hex — primaires pures, secondaires pures et deux couleurs de marque réelles de la palette Tailwind.

Comment utiliser le convertisseur RGB vers HEX

1. 1

   Saisissez ou collez un tuple RGB dans le champ RGB

   Déposez n'importe quelle valeur `rgb()` dans l'entrée RGB — moderne séparée par espaces `rgb(255 87 51)`, héritée à virgules `rgb(255, 87, 51)`, avec alpha via barre oblique `rgb(255 87 51 / 0.5)` ou via la forme `rgba(255, 87, 51, 0.5)`, ou canaux en pourcentage `rgb(100% 34% 20%)`. L'outil normalise toutes les formes d'entrée vers le même tuple RGB interne avant de calculer le hex. Les caractères invalides, les entiers hors plage ou une syntaxe malformée produisent une discrète erreur en ligne ; un RGB valide met à jour chaque autre champ de format en temps réel.

2. 2

   Lisez le code hex dans le champ HEX

   Le champ HEX au-dessus du champ RGB affiche la valeur hex correspondante : `#FF5733` pour une couleur opaque, `#FF573380` pour une couleur portant de l'alpha (forme à 8 chiffres). La sortie utilise par défaut des chiffres hex en majuscules pour cohérence avec la plupart des chartes de marque ; les minuscules (`#ff5733`) sont à un remplacement mécanique près et tout aussi valides en CSS. La conversion est exacte au bit près — un aller-retour RGB → HEX → RGB récupère le tuple original verbatim sans dérive en virgule flottante.

3. 3

   Cliquez sur Copier pour saisir la chaîne hex

   Chaque carte de format possède un bouton Copier à droite. Un clic et la valeur arrive dans votre presse-papiers — le label du bouton bascule brièvement sur « Copié ! » pour vous le signaler. La chaîne copiée inclut le `#` initial pour qu'elle se colle directement dans une règle CSS, un champ de couleur Figma, une extension hex SwiftUI ou un `colors.xml` Android. Pour une syntaxe spécifique à une plateforme (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, jetons `@theme` Tailwind v4), utilisez la section Copier comme code sous le sélecteur.

4. 4

   Aussi visibles : HSL, OKLCH, OKLAB, CMYK, couleur nommée

   Le même RGB que vous collez illumine aussi les autres champs de format — HSL pour le CSS hérité, OKLCH et OKLAB pour les systèmes de design perceptuellement uniformes, HSV et HWB pour les flux de sélecteur de couleur designer, CMYK pour les estimations d'impression, et la couleur CSS nommée la plus proche pour la documentation et la prose. Vous n'êtes jamais enfermé dans RGB → hex seulement ; si vous avez aussi besoin du triplet OKLCH pour un bloc `@theme` Tailwind v4, il est juste là dans le champ OKLCH avec son propre bouton Copier.

5. 5

   Utilisez le sélecteur pour les ajustements visuels

   Sous la grille de formats se trouvent un carré SL + curseur de teinte + curseur alpha pour l'exploration visuelle. Faites glisser n'importe quel contrôle et chaque champ texte se met à jour en temps réel, y compris le RGB et le HEX par lesquels vous avez commencé. Sur les navigateurs basés sur Chromium (Chrome, Edge, Brave), le bouton EyeDropper active l'API native `EyeDropper` pour échantillonner n'importe quel pixel à l'écran, y compris hors de la fenêtre du navigateur — utile quand vous voulez capturer un tuple RGB depuis l'UI d'une autre application sans capture d'écran préalable, puis lire immédiatement le hex.

Erreurs courantes RGB / HEX

Sauter padStart :
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produit un hex invalide à 5 caractères.

Utiliser padStart(2, '0') :
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Hex valide à 6 caractères ; fonctionne correctement pour toutes les valeurs de canal 0-255.

Sauter l'arrondi :
(0.5 * 255).toString(16) → '7f.8'
Produit un hex invalide avec une virgule décimale.

Arrondir d'abord à l'entier :
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Paire hex à 2 chiffres valide ; correspond à la normalisation CSS Color 4.

Émettre du hex alpha-en-tête Android en CSS :
rgb(255 87 51 / 0.5) → #80FF5733 (format Android)
CSS analyse comme alpha=128, R=255, G=87, B=51 — mauvaise couleur entièrement.

Utiliser le format documenté de la plateforme cible :
pour CSS : #FF573380 (alpha comme dernier octet)
pour Android Compose : Color(0x80FF5733) (alpha comme premier octet)
Ne pas coller en travers entre les deux sans réorganiser.

Moyenner du RGB gamma-encodé directement :
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Ressemble à un olive foncé, pas à un jaune lumineux.

Moyenner en linear-RGB :
décoder → linear-RGB → moyenne → ré-encoder → rgb(188, 188, 0)
Visiblement jaune lumineux, correspondant à ce que produit un mélange de lumière physique.

Qui utilise RGB vers HEX

Développeurs front-end convertissant le RGB canvas en hex CSS

Les fonctions de dessin de l'API Canvas signalent et acceptent les couleurs sous forme de tuples RGB (`ctx.fillStyle = 'rgb(255 87 51)'`), mais la feuille de style CSS environnante veut des variables hex (`--color-fill: #FF5733`). Coller le RGB une fois produit le hex correspondant, prêt à déposer dans une propriété personnalisée CSS. Utile quand on extrait des couleurs de marque d'un graphique ou d'une visualisation de données rendu en canvas pour les réutiliser dans une UI statique.

Designers convertissant le RGB Photoshop en hex Figma

Le sélecteur Color d'Adobe (dans Photoshop, Illustrator et InDesign) signale RGB sous forme de trois entiers 0-255 sur trois cases de canal. Figma, à l'inverse, affiche les valeurs de couleur en hex par défaut dans ses panneaux de design. Collez les trois entiers Photoshop comme `rgb(...)` ici, copiez la sortie hex, déposez dans le champ de couleur de Figma. Correspond exactement à la couleur Photoshop originale sans détour par capture d'écran et pipette.

Développeurs matériels convertissant le RGB de capteur LED en hex web

Les bandes LED adressables, les capteurs de couleur et les caméras RGB matérielles signalent toutes les valeurs de canal comme entiers 0-255. Quand les relevés doivent piloter un tableau de bord web (« la lampe brille actuellement de cette couleur »), le code hex correspondant est ce qu'attend l'attribut CSS `style="background: ..."`. Collez le triplet RGB du capteur, copiez le hex, branchez dans le balisage du tableau de bord.

Développeurs de jeux exportant la Color Unity vers une maquette web

Les constructeurs `Color` d'Unity et `FLinearColor` d'Unreal prennent des flottants normalisés 0-1 ; multiplier chacun par 255 donne les entiers RGB correspondants. Collez le `rgb(...)` résultant ici, copiez le hex, déposez dans la maquette web ou le site marketing qui doit correspondre exactement à la couleur d'accent en jeu. La vue OKLCH simultanée expose aussi la clarté perceptuelle pour que la palette de la maquette puisse être réglée à la main pour correspondre aux niveaux de luminosité du jeu.

Ingénieurs d'accessibilité auditant les couleurs de marque Photoshop

Quand le guide de style de marque signale les couleurs comme triplets d'entiers RGB (« l'orange de marque est RGB 255 / 87 / 51 ») mais que l'outil d'audit WCAG veut des codes hex, ce convertisseur est le pont. Collez le triplet RGB, copiez le hex, faites passer l'audit. Les badges de contraste WCAG et APCA de cet outil exposent aussi le verdict en une seule étape, donc vous n'avez pas besoin de rebondir entre trois outils séparés.

Développeurs e-mail migrant rgba() vers hex à 8 chiffres

Le HTML moderne des clients e-mail prend en charge le hex à 8 chiffres (`#FF573380`) pour les couleurs portant de l'alpha, mais les templates hérités stockent souvent la même valeur sous `rgba(255, 87, 51, 0.5)`. Coller le `rgba()` ici et lire la sortie hex à 8 chiffres rend la migration mécanique. Le champ HEX affiche `#FF573380` pour le cas alpha 50 % ; la forme `rgba()` héritée reste dans le champ RGB pour les contextes de repli qui en ont encore besoin.

Développeurs documentant les jetons de marque avec les deux formats

La documentation des jetons de design affiche souvent la même couleur dans les deux formats RGB et hex : hex pour le bloc de code CSS, RGB pour l'annotation en prose (« l'orange de marque est `#FF5733`, équivalent à RGB 255 / 87 / 51 »). Avoir les deux visibles côte à côte permet à un rédacteur de doc de copier chacun en un passage au lieu de lancer deux outils séparés. Le hash d'URL partageable permet aussi aux lecteurs de cliquer pour atterrir sur la couleur exacte en discussion.

Ingénieurs QA assertant les couleurs de pixel contre des specs hex

Les tests de régression visuelle capturent parfois les couleurs de pixel comme entiers RGB (`expect(pixel).toMatchRgb([255, 87, 51])`), tandis que la spec sous-jacente est donnée en hex (« les boutons doivent rendre en `#FF5733` »). Coller le RGB capturé ici produit le hex correspondant, que l'ingénieur QA peut comparer directement à la spec. L'exactitude au bit près de la conversion signifie que la comparaison ne sera pas flaky sur des différences de dérive en virgule flottante.

Mathématiques et sérialisation RGB vers HEX

toString(16).padStart(2, '0') est l'implémentation en une ligne

Toute la conversion RGB-vers-hex tient en une expression par canal : `value.toString(16).padStart(2, '0')`. Le `toString(16)` de JavaScript convertit un entier décimal en sa représentation en chaîne base 16. Le `padStart(2, '0')` est le détail facile à oublier — sans lui, une valeur de canal 5 se sérialiserait en `'5'` au lieu de `'05'`, produisant un hex invalide à 5 caractères comme `#55733` quand on le joint avec les autres canaux. L'idiome standard est `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` suivi d'un préfixe `'#'`.

Normalisation des pourcentages : × 255 / 100, puis arrondir

CSS Color 4 autorise les canaux en pourcentage dans `rgb()` : `rgb(100% 34% 20%)` est équivalent à `rgb(255 87 51)`. La règle de normalisation est `Math.round(percent × 255 / 100)`. `50% × 255 / 100 = 127,5` s'arrondit à 128 (arrondi du banquier en s'éloignant de ,5). La même règle s'applique à l'alpha quand il est exprimé en pourcentage (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). Les formes entière et pourcentage produisent une sortie hex identique après normalisation ; l'outil expose la forme entière canonique dans le champ RGB après re-normalisation.

Alpha vers hex : multiplier par 255, arrondir, encoder comme paire finale

Un RGB portant de l'alpha (`rgb(255 87 51 / 0.5)`) émet du hex à 8 chiffres en multipliant l'alpha par 255, en arrondissant à l'entier le plus proche et en encodant comme 4e paire hex ajoutée après RGB. `0.5 × 255 = 127,5`, arrondi à 128 = `0x80`, sortie `#FF573380`. La spec CSS Color 4 utilise l'arrondi du banquier (round-half-to-even) pour cette conversion, que l'outil suit. La forme à 8 chiffres retombe à 6 chiffres quand alpha vaut exactement 1 pour éviter de laisser fuiter des paires `FF` finales dans les feuilles de style.

Entrée RGB : CSS Color 4 séparé par espaces et virgules héritées tous deux acceptés

Le parseur accepte à la fois la forme moderne CSS Color 4 `rgb(255 87 51)` et la forme CSS 1 héritée `rgb(255, 87, 51)`. La forme moderne s'aligne avec les autres notations fonctionnelles CSS Color 4 (`hsl()`, `lab()`, `oklch()`, `color()`) qui utilisent toutes la séparation par espaces et la barre oblique pour l'alpha. La forme à virgules héritée est toujours prise en charge dans tous les navigateurs evergreen et reste courante dans les bases de code plus anciennes. Les deux produisent une sortie hex identique ; le sérialiseur hex de l'outil ne se soucie pas de la forme d'entrée arrivée.

Source de vérité interne OKLCH pour la stabilité des allers-retours

Bien que cette branche cible spécifiquement RGB → HEX, le convertisseur sous-jacent partagé conserve la couleur canonique en triplet OKLCH en interne. Cela signifie que les allers-retours RGB → HEX → HSL → OKLAB → CMYK → RGB se font sans dérive en virgule flottante par étape ; les convertisseurs hérités qui routent via HSL ou sRGB comme pivot accumulent une erreur d'arrondi à chaque conversion. Le choix d'OKLCH (plutôt qu'OKLAB) préserve la Teinte comme axe stable, donc faire glisser le curseur de teinte ne traverse pas accidentellement le gris. Selon l'article OKLAB de Björn Ottosson de 2020.

Encodage de canal : non signé 8 bits, sRGB gamma-encodé

Chaque canal RGB est un entier non signé 8 bits (0-255), encodé dans l'espace colorimétrique sRGB défini par IEC 61966-2-1 (1996). Les valeurs sont *gamma-encodées* — c'est-à-dire que la relation entre la valeur de canal et la luminosité perçue est non linéaire, suivant la fonction de transfert sRGB par morceaux (à peu près un exposant 2,4 avec un petit segment linéaire près de zéro). Cela importe quand vous faites des mathématiques de couleur : moyenner deux valeurs RGB sous leur forme gamma-encodée donne le mauvais point médian perceptuel. Pour un mélange de couleurs correct, décodez d'abord vers linear-RGB (CSS Color 4 §11.2), puis moyennez, puis ré-encodez. Le modèle interne OKLCH de l'outil rend cela transparent.

Bonnes pratiques pour les flux RGB / HEX

Préférez le hex en majuscules dans les chartes de marque, en minuscules dans le code

Les chartes de marque, les PDF marketing et la documentation orientée designer utilisent typiquement le hex en majuscules (`#FF5733`) pour cohérence visuelle — l'aspect tout en capitales se lit comme un identifiant de marque. Le code (CSS, JSON, source JavaScript) utilise typiquement les minuscules (`#ff5733`) par convention parce que les minuscules sont plus rapides à taper et plus courantes dans la sortie autogénérée des linters. Les deux sont du CSS valide et s'analysent à l'identique ; choisissez-en un pour chaque contexte et restez cohérent. L'outil émet en majuscules par défaut ; un remplacement mécanique bascule en minuscules.

Émettez du hex à 8 chiffres seulement quand alpha < 1

Quand alpha vaut 1 (totalement opaque), retombez à la forme à 6 chiffres. Une paire `FF` finale (`#FF5733FF`) est du CSS légal mais encombre visuellement les feuilles de style et trompe certains parseurs hérités vers un mauvais rendu. La forme à 8 chiffres ne devrait apparaître que quand l'alpha est significativement transparent. Cet outil suit cette règle automatiquement — les couleurs opaques émettent du hex à 6 chiffres, les couleurs portant de l'alpha émettent du hex à 8 chiffres, et la coupure est exacte (alpha = 1,0 émet 6 chiffres ; alpha = 0,9999 émet 8 chiffres pour préserver la donnée).

Ne moyennez pas directement les canaux RGB pour les mathématiques de couleur

Les canaux RGB sont gamma-encodés — moyenner deux valeurs RGB donne le mauvais point médian perceptuel. `(255, 0, 0)` moyenné avec `(0, 255, 0)` produit `(127, 127, 0)`, un olive foncé boueux, pas le point médian jaune visuellement lumineux attendu. Pour un mélange de couleurs correct, décodez d'abord vers linear-RGB (CSS Color 4 §11.2), moyennez, puis ré-encodez. Ou, mieux, travaillez en OKLAB ou OKLCH où la distance perceptuelle est uniforme — c'est exactement ce que font les générateurs de palette de systèmes de design.

Préférez hex pour les variables CSS, RGB pour le matériel

Quand vous rédigez une propriété personnalisée CSS ou un jeton de configuration Tailwind, préférez hex — c'est plus concis et tient proprement dans du JSON ou YAML. Quand le code consommateur fait de l'arithmétique par canal (appels canvas, manipulation d'image, drivers LED matériels, attributs de couleur OpenGL), la forme entière RGB est plus rapide à consommer. Les deux formats décrivent la même couleur ; le choix est purement sur qui lit et écrit, pas sur la correction. La vue à champs simultanés de cet outil rend les deux également bon marché.

Validez la plage alpha avant de multiplier par 255

En implémentant votre propre convertisseur RGB → hex à 8 chiffres, validez que le flottant alpha tombe dans `[0, 1]` avant l'étape `× 255`. Un alpha hors plage (négatif, ou > 1) produit silencieusement des paires hex invalides que certains parseurs acceptent et d'autres rejettent — un mode de défaillance fragile. Bornez d'abord (`Math.max(0, Math.min(1, alpha))`), puis multipliez, puis arrondissez, puis encodez en hex. L'outil expose une discrète erreur en ligne pour un alpha hors plage plutôt que d'émettre une chaîne hex cassée.

Utilisez le hash d'URL pour partager des décisions de couleur en direct

Chaque changement de couleur met à jour le hash d'URL sous la forme `#hex=ff5733` automatiquement. Copiez l'URL dans un fil Slack ou un ticket GitHub et quiconque l'ouvre atterrit sur la même couleur avec le même hex. C'est plus fiable que de coller un tuple RGB dans le chat — les destinataires font parfois des fautes de virgule ou perdent un canal en saisissant manuellement la valeur — et permet à un fil de revue de design de référencer une couleur exacte plutôt que « l'orange dont on a parlé mardi ». Le hash n'est jamais transmis au serveur.

Questions fréquemment posées