Convertisseur RGBA vers Hex

Ce convertisseur RGBA vers Hex transforme les valeurs couleur RGBA (rouge, vert, bleu, alpha) en codes couleur hexadécimaux. Saisissez des valeurs RGBA de 0 à 255 pour chaque canal de couleur et de 0 à 1 pour la transparence alpha afin d’obtenir le code hex équivalent à 6 ou 8 chiffres avec aperçu couleur en direct.

Convertisseur RGBA vers Hex

Convertissez des valeurs RGBA en codes couleur hexadécimaux à 6 ou 8 chiffres avec aperçu en direct et conversion inverse.

rgba(255, 255, 255, 1)
#FFFFFF
#FFFFFFFF

Hex vers RGBA

Collez un code hex à 3, 4, 6 ou 8 chiffres pour le reconvertir en valeurs RGBA.

Questions fréquentes

Qu’est-ce que le format couleur RGBA ?

RGBA signifie Red, Green, Blue, Alpha. Chaque canal de couleur (R, G, B) prend une valeur de 0 à 255, tandis que le canal Alpha contrôle l’opacité de 0 (totalement transparent) à 1 (totalement opaque). Par exemple, rgba(255, 0, 0, 0.5) est un rouge semi-transparent.

Comment convertir RGBA en hex ?

Convertissez chaque valeur R, G et B de décimal en hexadécimal : divisez par 16, le quotient est le premier chiffre hexadécimal et le reste est le second. Pour le canal alpha, multipliez par 255, puis convertissez en hex. Par exemple, rgba(255, 128, 0, 0.5) : R=FF, G=80, B=00, A=80 → #FF800080.

Qu’est-ce qu’une couleur hexadécimale à 8 chiffres ?

Les couleurs hexadécimales standard utilisent 6 chiffres (#RRGGBB) pour les canaux rouge, vert et bleu. Le format à 8 chiffres (#RRGGBBAA) ajoute deux chiffres pour le canal alpha, ce qui permet la transparence sans utiliser la fonction rgba(). Par exemple, #FF000080 est du rouge à 50 % d’opacité.

Que vaut rgba(255,0,0,0.5) en hex ?

rgba(255,0,0,0.5) se convertit en #FF000080 au format hexadécimal à 8 chiffres. Le canal rouge (255) devient FF, le vert (0) devient 00, le bleu (0) devient 00, et alpha (0.5) devient 80 (soit 128 en décimal, ou 50 % de 255).

Tous les navigateurs prennent-ils en charge les couleurs hex à 8 chiffres ?

Oui, tous les navigateurs modernes prennent en charge les couleurs hexadécimales à 8 chiffres (#RRGGBBAA) dans le cadre de CSS Color Level 4. Cela inclut Chrome 62+, Firefox 49+, Safari 10+ et Edge 79+. Pour les navigateurs plus anciens, utilisez plutôt la fonction rgba().

Quelle est la différence entre RGBA et HSLA ?

RGBA définit les couleurs avec les canaux rouge, vert et bleu (0-255), plus alpha. HSLA utilise la teinte (0-360°), la saturation (0-100 %), la luminosité (0-100 %) et alpha. HSLA est plus intuitif pour choisir des variantes de couleur (plus claires, plus sombres, plus saturées), tandis que RGBA correspond directement à la manière dont les écrans affichent les couleurs.

Comment alpha fonctionne-t-il en hex ?

Dans le format hexadécimal à 8 chiffres, les deux derniers chiffres représentent le canal alpha. 00 = totalement transparent, FF = totalement opaque. Valeurs courantes : 80 ≈ 50 % d’opacité, BF ≈ 75 %, 40 ≈ 25 %. La formule de conversion est : hex_alpha = Math.round(alpha * 255).toString(16).

Quelle est la différence entre hex et RGB ?

Hex (#FF0000) et RGB (rgb(255,0,0)) représentent les mêmes couleurs avec des notations différentes. Hex utilise des nombres en base 16, tandis que RGB utilise des valeurs décimales de 0 à 255. Ils sont interchangeables pour n’importe quelle couleur. Hex est plus compact dans le code CSS, tandis que RGB est plus facile à lire et à manipuler par programme.

Comment convertir RGBA en Hex

Convertir RGBA en hexadécimal consiste à traduire chaque canal de couleur de la notation décimale (base 10) vers la notation hexadécimale (base 16). La formule pour chaque canal est :

Chiffre hex 1 = floor(valeur ÷ 16)
Chiffre hex 2 = valeur mod 16

Pour le canal alpha, multipliez d’abord la valeur 0–1 par 255, puis convertissez le résultat en hex :

Alpha (hex) = toHex(Math.round(α × 255))

Exemple détaillé : rgba(255, 128, 0, 0.5)

1. Convertir chaque canal RGB :

  • R : 255 ÷ 16 = 15 reste 15 → FF
  • G : 128 ÷ 16 = 8 reste 0 → 80
  • B : 0 ÷ 16 = 0 reste 0 → 00

2. Convertir le canal alpha :

  • 0.5 × 255 = 127.5 ≈ 128
  • 128 ÷ 16 = 8 reste 0 → 80

Résultat :

  • Hex à 6 chiffres : #FF8000 (sans alpha)
  • Hex à 8 chiffres : #FF800080 (avec alpha)

Conversions RGBA vers Hex courantes

Tableau de référence pour des couleurs courantes avec leurs valeurs RGBA, leurs codes hex à 6 chiffres et leurs codes hex à 8 chiffres :

CouleurRGBAHexHex à 8 chiffres
Blancrgba(255,255,255,1)#FFFFFF#FFFFFFFF
Noirrgba(0,0,0,1)#000000#000000FF
Rougergba(255,0,0,1)#FF0000#FF0000FF
Rouge 50 %rgba(255,0,0,0.5)#FF000080
Vertrgba(0,128,0,1)#008000#008000FF
Bleurgba(0,0,255,1)#0000FF#0000FFFF
Bleu 50 %rgba(0,0,255,0.5)#0000FF80
Jaunergba(255,255,0,1)#FFFF00#FFFF00FF
Cyanrgba(0,255,255,1)#00FFFF#00FFFFFF
Magentargba(255,0,255,1)#FF00FF#FF00FFFF
Orangergba(255,165,0,1)#FFA500#FFA500FF
Violetrgba(128,0,128,1)#800080#800080FF
Grisrgba(128,128,128,1)#808080#808080FF
Bleu marinergba(0,0,128,1)#000080#000080FF
Corailrgba(255,127,80,1)#FF7F50#FF7F50FF

Comprendre le canal alpha en hex

Le format hex à 8 chiffres (#RRGGBBAA) étend le format standard à 6 chiffres en ajoutant deux chiffres hexadécimaux pour le canal alpha (transparence). Les chiffres alpha vont de 00 (totalement transparent) à FF (totalement opaque).

OpacitéAlpha (0–1)Décimal (0–255)Hex
100 %1.0255FF
75 %0.75191BF
50 %0.512880
25 %0.256440
10 %0.1261A
0 %0.0000

Le format hex à 8 chiffres fait partie de la spécification CSS Color Level 4 et est pris en charge par tous les navigateurs modernes. Lorsque la valeur alpha est FF (totalement opaque), le code à 8 chiffres est fonctionnellement identique à la version à 6 chiffres. Par exemple, #FF0000FF s’affiche comme #FF0000.

RGBA vs Hex : différences clés

FonctionnalitéRGBAHex
NotationDécimale (0–255)Hexadécimale (00–FF)
Prise en charge alphaIntégrée (0–1)Format à 8 chiffres (#RRGGBBAA)
LisibilitéPlus lisible pour l’humainPlus compact
Syntaxe CSSrgba(255, 0, 0, 0.5)#FF000080
Usage programmatiquePlus facile à manipulerPlus pratique pour comparer des chaînes
Outils de designUtilisé dans certains sélecteurs de couleurStandard dans Figma, Sketch, etc.

Comparaison des formats couleur CSS

CSS prend en charge plusieurs formats de couleur, chacun avec ses forces. Voici une comparaison des formats les plus utilisés :

FormatExemple de syntaxeAlphaIdéal pour
HEX#FF00008 chiffres seulementCSS compact, outils de design
RGBrgb(255, 0, 0)NonManipulation par programme
RGBArgba(255, 0, 0, 0.5)Oui (0–1)Superpositions, effets de transparence
HSLhsl(0, 100%, 50%)NonSélection intuitive des couleurs
HSLAhsla(0, 100%, 50%, 0.5)Oui (0–1)Variantes de thème, palettes
OKLCHoklch(0.63 0.26 29)Oui (/ 0.5)Couleurs perceptuellement uniformes

Outils associés

Outils associés