Convertisseur Hex vers RGB : Guide des codes couleur pour développeurs

Les couleurs sont les fondements de toute interface utilisateur, et les developpeurs passent constamment entre codes couleur hexadecimaux et valeurs RGB. Que vous stylisiez un site web en CSS, construisiez une application mobile ou ecriviez un script de visualisation en Python, comprendre la conversion entre hex et RGB est essentiel. Ce guide complet explique l'algorithme de conversion, fournit des exemples de code et couvre la transparence alpha.

Essayez notre outil gratuit de conversion Hex vers RGB en ligne.

Que sont les codes couleur Hex et les valeurs RGB ?

Les codes couleur hexadecimaux representent les couleurs avec une chaine de 6 caracteres prefixee par #. Chaque paire encode un canal : rouge, vert, bleu. Le format est #RRGGBB, chaque paire etant un nombre hexadecimal de 00 a FF. CSS supporte aussi le raccourci a 3 caracteres comme #F00 qui s'etend en #FF0000.

Les valeurs RGB definissent les couleurs avec trois nombres decimaux (0-255) pour le rouge, le vert et le bleu. En CSS : rgb(255, 87, 51). Hex et RGB decrivent le meme espace colorimetrique (sRGB), donc la conversion est sans perte.

Comment fonctionne la conversion Hex vers RGB

La conversion hex vers RGB est simple car chaque paire hex correspond directement a un canal RGB :

Exemple : #1A2B3C donne R=26, G=43, B=60, soit rgb(26, 43, 60).

La conversion inverse (RGB vers hex) convertit chaque valeur decimale en chaine hexadecimale a deux chiffres et les concatene.

Codes couleur Hex courants et leurs valeurs RGB

Tableau de reference des couleurs courantes avec leurs equivalents hex et RGB :

Quand utiliser Hex, RGB ou HSL

Les trois formats decrivent le meme espace sRGB, mais chacun a ses avantages :

Hex (#RRGGBB) est le format le plus compact, choix par defaut en CSS. Les outils de design copient les couleurs en hex par defaut.

RGB / RGBA est ideal pour manipuler les canaux individuellement ou ajouter de la transparence avec rgba().

HSL / HSLA est le format le plus lisible, excellent pour creer des palettes et gerer les themes.

En pratique : hex pour les couleurs statiques, rgba() pour la transparence, hsl() pour les systemes de couleurs dynamiques.

Conversion Hex vers RGB en JavaScript, CSS et Python

JavaScript / TypeScript

Fonction robuste hex-vers-RGB gerant le raccourci 3 caracteres, 6 caracteres et 8 caracteres (avec alpha) :

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');

  // Handle 3-character shorthand (#F0A -> FF00AA)
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }

  // Handle 4-character shorthand (#F0A8 -> FF00AA88)
  if (hex.length === 4) {
    hex = hex.split('').map(c => c + c).join('');
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  // Handle 8-character hex with alpha (#RRGGBBAA)
  if (hex.length === 8) {
    const a = parseInt(hex.substring(6, 8), 16) / 255;
    return { r, g, b, a: Math.round(a * 100) / 100 };
  }

  return { r, g, b };
}

// Examples
hexToRgb('#FF5733');    // { r: 255, g: 87, b: 51 }
hexToRgb('#3B82F6');    // { r: 59, g: 130, b: 246 }
hexToRgb('#F00');       // { r: 255, g: 0, b: 0 }
hexToRgb('#FF000080');  // { r: 255, g: 0, b: 0, a: 0.5 }

CSS : Hex vs RGB en pratique

En CSS, hex et RGB sont interchangeables. Les navigateurs modernes supportent les deux :

/* These produce the exact same color */
.element-hex   { color: #3B82F6; }
.element-rgb   { color: rgb(59, 130, 246); }

/* Transparency — both are equivalent */
.overlay-hex   { background: #3B82F680; }      /* 50% opacity */
.overlay-rgba  { background: rgba(59, 130, 246, 0.5); }

/* Modern CSS space-separated syntax */
.modern        { color: rgb(59 130 246); }
.modern-alpha  { color: rgb(59 130 246 / 0.5); }

/* CSS custom properties work with any format */
:root {
  --primary: #3B82F6;
  --primary-rgb: 59, 130, 246;
}
.card {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid var(--primary);
}

Python

Python simplifie la conversion avec int() :

def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    """Convert hex color string to RGB tuple."""
    hex_color = hex_color.lstrip('#')

    # Handle 3-character shorthand
    if len(hex_color) == 3:
        hex_color = ''.join(c * 2 for c in hex_color)

    r = int(hex_color[0:2], 16)
    g = int(hex_color[2:4], 16)
    b = int(hex_color[4:6], 16)

    return (r, g, b)


def rgb_to_hex(r: int, g: int, b: int) -> str:
    """Convert RGB values to hex color string."""
    return f'#{r:02x}{g:02x}{b:02x}'


# Examples
print(hex_to_rgb('#FF5733'))   # (255, 87, 51)
print(hex_to_rgb('#3B82F6'))   # (59, 130, 246)
print(hex_to_rgb('#F00'))      # (255, 0, 0)

print(rgb_to_hex(59, 130, 246))  # #3b82f6
print(rgb_to_hex(255, 87, 51))   # #ff5733

RGB vers Hex (JavaScript)

La conversion inverse de RGB vers hex :

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => {
      const hex = v.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    })
    .join('');
}

// With alpha support
function rgbaToHex(r, g, b, a = 1) {
  const hex = rgbToHex(r, g, b);
  if (a === 1) return hex;
  const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0');
  return hex + alphaHex;
}

// Examples
rgbToHex(255, 87, 51);        // '#ff5733'
rgbToHex(59, 130, 246);       // '#3b82f6'
rgbaToHex(255, 0, 0, 0.5);   // '#ff000080'

Canal Alpha : Hex avec transparence (#RRGGBBAA) et RGBA

Hex et RGB supportent un canal alpha. 1.0 (ou FF) = opaque, 0.0 (ou 00) = transparent.

Hex 8 chiffres (#RRGGBBAA) ajoute deux caracteres alpha. Exemple : #FF000080 = rouge a 50% d'opacite.

rgba() est la syntaxe la plus reconnue : rgba(255, 0, 0, 0.5). Syntaxe moderne : rgb(255 0 0 / 0.5).

Conversion alpha : hex vers decimal : diviser par 255. Decimal vers hex : multiplier par 255 et convertir.

/* Common alpha values: hex ↔ decimal */
100% opacity:  FF = 1.0    →  #FF0000FF  =  rgba(255, 0, 0, 1.0)
 90% opacity:  E6 = 0.9    →  #FF0000E6  =  rgba(255, 0, 0, 0.9)
 80% opacity:  CC = 0.8    →  #FF0000CC  =  rgba(255, 0, 0, 0.8)
 70% opacity:  B3 = 0.7    →  #FF0000B3  =  rgba(255, 0, 0, 0.7)
 60% opacity:  99 = 0.6    →  #FF000099  =  rgba(255, 0, 0, 0.6)
 50% opacity:  80 = 0.5    →  #FF000080  =  rgba(255, 0, 0, 0.5)
 40% opacity:  66 = 0.4    →  #FF000066  =  rgba(255, 0, 0, 0.4)
 30% opacity:  4D = 0.3    →  #FF00004D  =  rgba(255, 0, 0, 0.3)
 20% opacity:  33 = 0.2    →  #FF000033  =  rgba(255, 0, 0, 0.2)
 10% opacity:  1A = 0.1    →  #FF00001A  =  rgba(255, 0, 0, 0.1)
  0% opacity:  00 = 0.0    →  #FF000000  =  rgba(255, 0, 0, 0.0)

Questions frequemment posees

Comment convertir hex en RGB ?

Supprimez le #, divisez en 3 paires de 2 caracteres, convertissez chaque paire de l'hexadecimal au decimal. #3B82F6 donne rgb(59, 130, 246).

Quelle est la difference entre hex et RGB ?

Hex et RGB representent les memes couleurs sRGB avec des systemes numeriques differents. Hex utilise la notation hexadecimale compacte, RGB utilise trois nombres decimaux 0-255. #FF0000 et rgb(255, 0, 0) sont identiques.

Comprendre les formats hex et RGB est une competence fondamentale. Utilisez notre outil pour des conversions instantanees.

Convertissez vos couleurs avec notre outil gratuit Hex vers RGB.