Convertisseur de couleurs RVB en HEX

Explication des systèmes de couleurs RVB et HEX

RVB (Rouge, Vert, Bleu) etHEXAMEN (hexadécimal) sont deux façons de représenter exactement les mêmes couleurs – elles utilisent simplement des systèmes de notation différents. Les deux décrivent les couleurs en mélangeant trois couleurs de lumière primaires (rouge, vert, bleu) à différentes intensités. Comprendre les deux systèmes est essentiel pour la conception Web, le CSS, la conception graphique, l'édition de photographies et l'art numérique.

Dans leModèle RVB, chacun des trois canaux (rouge, vert, bleu) a une valeur d'intensité de 0 à 255. Zéro signifie aucune de ces couleurs ; 255 signifie intensité maximale. Mélanger les trois à 255 donne du blanc (rgb(255,255,255)). Les trois à 0 donnent du noir (rgb(0,0,0)). Avec 256 valeurs possibles par canal et 3 canaux, RVB peut représenter 256³ = 16 777 216 couleurs distinctes (environ 16,7 millions).

Dans leModèle HEX, les trois mêmes canaux sont chacun exprimés sous la forme d'un nombre hexadécimal à 2 chiffres (00 à FF), préfixé par #. L'hexadécimal utilise les chiffres 0 à 9 et les lettres A à F, où A=10, B=11, C=12, D=13, E=14, F=15. FF en hexadécimal = 15×16 + 15 = 255 en décimal. Donc #FFFFFF = rgb(255,255,255) = blanc. La conversion est purement un changement de base : décimal (base 10) vers hexadécimal (base 16).

Comment convertir RVB en HEX : étape par étape

La conversion de chaque canal RVB en hexadécimal nécessite de diviser par 16 et d'exprimer le quotient et le reste sous forme de chiffres hexadécimaux :

1. Prenez la valeur du canal (0–255)
2. Divisez par 16 : quotient = premier chiffre hexadécimal, reste = deuxième chiffre hexadécimal
3. Convertissez les deux en hexadécimal s'ils sont 10-15 (A-F)
4. Combiner : premier chiffre + deuxième chiffre = valeur hexadécimale à 2 caractères
5. Répétez l’opération pour les canaux G et B
6. Concaténer : # + R_hex + G_hex + B_hex

Exemple : Convertissez RVB (255, 99, 71) en hexadécimal (rouge tomate).

• R=255 : 255÷16=15 reste 15 → F + F → FF
• G=99 : 99÷16=6 reste 3 → 6 + 3 → 63
• B=71 : 71÷16=4 reste 7 → 4 + 7 → 47
• Résultat : #FF6347

Couleurs Web courantes : référence RVB et HEX

Voici un tableau de référence complet pour les couleurs Web les plus couramment utilisées :

Utilisation de RVB et HEX dans CSS et Web Design

CSS accepte plusieurs formats de couleurs. HEX et RVB sont les plus courants, mais le CSS moderne prend également en charge HSL, les couleurs nommées, ainsi que les nouveaux espaces colorimétriques oklch et oklch pour des affichages à gamme plus large.

En CSS, les couleurs peuvent être spécifiées comme :

• couleur : #FF6347 ; (HEX)
• couleur : RVB (255, 99, 71) ; (RVB)
• couleur : rgba (255, 99, 71, 0,5) ; (RVB + transparence alpha, 0=transparent, 1=opaque)
• couleur : hsl (9, 100 %, 64 %) ; (Teinte, Saturation, Luminosité)
• couleur : tomate ; (couleur nommée CSS)

Les codes HEX peuvent également être écrits en raccourci à 3 caractères lorsque chaque paire est un chiffre répété : #FF0000 = #F00, #FFFFFF = #FFF, #336699 ne peuvent pas être raccourcis. Le raccourci réduit de moitié le temps de frappe et est pris en charge dans tous les navigateurs.

Pour des raisons de cohérence de conception, les systèmes de conception modernes (Material Design, Tailwind CSS, Bootstrap) utilisent des palettes de couleurs prédéfinies exprimées sous forme de codes HEX. Tailwind CSS, par exemple, propose 22 familles de couleurs avec chacune 10 nuances (gris-100 à gris-900), toutes spécifiées sous forme de codes HEX dans le fichier de configuration.

Transparence RGBA et Alpha

RGBA ajoute un quatrième canal à RGB :alpha, qui contrôle la transparence. Les valeurs alpha vont de 0 (entièrement transparent, invisible) à 1 (entièrement opaque, pas de transparence). Les valeurs fractionnaires créent des couleurs semi-transparentes.

Exemples :rgba(0, 0, 0, 0.5) est noir semi-transparent (comme une superposition translucide). rgba(255, 255, 255, 0,8) est un blanc opaque à 80%. Ceci est largement utilisé pour les effets de superposition, les éléments d'interface utilisateur en verre dépoli et la mise en évidence de l'état de survol.

Dans le CSS moderne, il y a aussiHEX avec alpha: codes hexadécimaux à 8 caractères où les 2 derniers caractères spécifient l'alpha. #FF6347CC serait une tomate avec une opacité de 80 % (CC en hexadécimal = 204 en décimal ; 204/255 ≈ 0,8). Ce format a été introduit dans la spécification CSS Color Level 4 et est pris en charge dans tous les navigateurs modernes.

L'équivalent en RGBA est plus simple pour les humains :rgba(255, 99, 71, 0,8) contre#FF6347CC. Le format que vous utilisez dépend de vos préférences personnelles et de vos outils : les outils de conception comme Figma affichent et exportent généralement au format HEX, tandis que les préprocesseurs CSS (Sass, Less) utilisent souvent RGBA pour sa lisibilité.

Bases de la théorie des couleurs pour les designers

Comprendre le modèle de couleur RVB va de pair avec la compréhension de la théorie des couleurs. RVB est unmodèle de couleur additif — les couleurs sont créées en ajoutant de la lumière. Mélange R+G+B à pleine intensité = blanc (tout clair). C'est l'opposé de la couleur soustractive (pigment/impression), où mélanger toutes les couleurs = noir.

Couleurs complémentaires en RVB se font face sur la roue chromatique. Le rouge (FF0000) et le cyan (00FFFF) sont complémentaires — notez que le RVB du cyan est l'inverse au niveau du bit du rouge (0,255,255 contre 255,0,0). De même, bleu et jaune, vert et magenta. Les paires complémentaires créent un contraste et une vibration visuelle maximum lorsqu’elles sont placées côte à côte.

Harmonie des couleurs guide la sélection des couleurs qui fonctionnent bien ensemble : analogiques (adjacentes sur la roue), triadiques (trois couleurs équidistantes), complémentaires et tétradiques (quatre couleurs formant un rectangle). Ces relations aident les concepteurs à créer des palettes intentionnelles et visuellement équilibrées.

Accessibilité et contraste : Les WCAG (Web Content Accessibility Guidelines) exigent un rapport de contraste minimum entre le texte et l'arrière-plan : 4,5 : 1 pour le texte normal, 3 : 1 pour le texte de grande taille. Le rapport de contraste est calculé à partir de la luminance relative des valeurs RVB. De nombreux outils en ligne vérifient la conformité aux WCAG, ce qui est très important pour les utilisateurs malvoyants ou daltoniens.

Espaces colorimétriques au-delà du RVB : HSL, HSB, CMJN

Le RVB n'est pas toujours le système le plus intuitif pour choisir les couleurs. Les espaces colorimétriques alternatifs peuvent être plus pratiques pour différents cas d’utilisation :

HSL est particulièrement convivial pour les concepteurs : la teinte sélectionne la couleur (0°=rouge, 120°=vert, 240°=bleu), la saturation contrôle son éclat (0 % est gris, 100 % est couleur pure) et la luminosité contrôle la luminosité (0 % est noir, 50 % est la couleur pure, 100 % est blanc). Ajuster uniquement la luminosité tout en gardant la teinte et la saturation constantes crée une échelle de couleurs cohérente – très utile pour créer des états de survol, des états désactivés et des teintes/nuances d'une couleur de marque.

Accessibilité des couleurs et rapports de contraste

Les directives d'accessibilité du Web (WCAG 2.1) spécifient des rapports de contraste minimaux entre les couleurs du texte et de l'arrière-plan pour garantir la lisibilité pour les utilisateurs malvoyants ou daltoniens. Environ 8 % des hommes souffrent d’une forme de déficience de la vision des couleurs (daltonisme), ce qui fait du choix de couleurs accessibles une exigence éthique et légale pour la conception de sites Web professionnels.

Le rapport de contraste entre deux couleurs est calculé à partir de leur luminance relative : rapport de contraste = (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire et L2 est la plus foncée. La luminance relative est dérivée des valeurs RVB via une formule de correction gamma : pour chaque valeur de canal v = V/255, si v ≤ 0,03928 alors linéaire = v/12,92, sinon linéaire = ((v+0,055)/1,055)^2,4. Alors L = 0,2126×R + 0,7152×G + 0,0722×B.

Exigences de contraste minimales : le niveau AA nécessite 4,5 : 1 pour le texte normal (moins de 18 pts ou 14 pts en gras) et 3 : 1 pour les textes de grande taille. Le niveau AAA nécessite 7:1 pour un texte normal et 4,5:1 pour un texte volumineux. Les échecs les plus courants sont le texte gris clair sur fond blanc (#999999 sur blanc n'a qu'un rapport de 2,85:1, en cas d'échec de AA) et le texte sombre sur fond sombre.

Construire une palette de couleurs : de HEX au système de conception

Une palette de couleurs professionnelle comprend généralement une couleur principale de marque, des couleurs d'accent secondaires, des gris neutres et des couleurs sémantiques (vert de réussite, ambre d'avertissement, rouge d'erreur, bleu d'information). Chaque couleur de base nécessite plusieurs nuances pour différents états de l'interface utilisateur.

À partir d'une couleur de marque comme # 3B82F6 (bleu-500 de Tailwind), vous pouvez dériver une échelle de 10 nuances en ajustant la luminosité dans l'espace HSL : bleu-50 (#EFF6FF, très clair), bleu-100 (#DBEAFE), jusqu'au bleu-900 (#1E3A5F, très foncé). Les jetons de conception mappent ensuite ces nuances à des utilisations sémantiques : bouton-primaire-bg = bleu-600, survol du bouton-primaire = bleu-700, texte-bouton-primaire = blanc, etc.

Lorsque vous créez un système de couleurs de marque, tenez compte des éléments suivants :Règle 60-30-10 — 60 % de couleur dominante (généralement un neutre), 30 % de couleur secondaire, 10 % d'accent. Assurez-vous que toutes les combinaisons de texte respectent le contraste WCAG AA. Testez les couleurs dans différentes conditions d’éclairage et écrans d’appareils. Tenez compte du mode sombre (qui peut nécessiter différentes valeurs de teinte pour maintenir le contraste). Un système de couleurs bien conçu dans le code comprend 8 à 15 valeurs HEX qui couvrent tous les cas d'utilisation de manière cohérente.

Psychologie des couleurs dans le design et le marketing

Les couleurs évoquent des réponses psychologiques et émotionnelles, faisant du choix des couleurs une décision stratégique dans la conception de l'image de marque et de l'interface utilisateur. La recherche en psychologie des couleurs (bien que parfois exagérée dans la culture populaire) fournit des lignes directrices générales utiles pour concevoir des expériences visuelles efficaces.

Rouge (gamme #FF0000) : Énergie, urgence, passion, danger. Utilisé pour les ventes (les panneaux « Vente ! » sont généralement rouges), les alertes d'urgence, les signaux d'arrêt et les marques de produits alimentaires (Coca-Cola, McDonald's, KFC – le rouge stimule l'appétit et crée une urgence). Le rouge à contraste élevé est excellent pour les appels à l'action lorsque vous souhaitez une action immédiate de l'utilisateur.

Bleu (plage #0000FF) : Confiance, professionnalisme, stabilité, calme. La couleur dominante dans les marques financières et technologiques (Facebook, Twitter/X, LinkedIn, PayPal, IBM, Samsung). Des études montrent que le bleu est la couleur préférée dans toutes les cultures. Le bleu clair évoque l'ouverture et la convivialité ; La marine sombre transmet autorité et expertise.

Vert (plage #00FF00) : Nature, santé, croissance, réussite (l'argent aux États-Unis). Largement utilisé dans les marques de santé/bien-être, les applications financières (rendements positifs affichés en vert), les organisations environnementales et les signaux « Go ». Les tons moyens comme # 28A745 (Bootstrap success green) signalent des états positifs dans l'interface utilisateur sans être agressifs.

Gamme Jaune/Orange : Optimisme, énergie, créativité, avertissement. Le jaune est très visible (panneaux de construction, taxis) mais difficile à lire sous forme de texte sur blanc. L'orange (gamme #FFA500) est fréquemment utilisé pour les appels à l'action : il est visible et énergique sans la connotation d'urgence/danger du rouge.

Travailler avec les couleurs dans les outils de conception populaires

Chaque outil de conception majeur possède son propre flux de travail de couleur. Comprendre comment travailler efficacement avec HEX et RVB dans votre outil permet de gagner beaucoup de temps dans le travail de conception professionnel.

Figma : Cliquez sur n'importe quel élément rempli → Le panneau Propriétés affiche la couleur de remplissage → Cliquez sur l'échantillon de couleur pour ouvrir le sélecteur. Vous pouvez saisir directement des valeurs HEX ou passer aux modes RVB, HSL ou HSB. Figma prend également en charge l'opacité via le champ d'opacité séparé et la notation RGBA. Copiez/collez les codes HEX entre Figma et CSS sans aucune conversion nécessaire.

Adobe Photoshop : Ouvrez le sélecteur de couleurs (carrés de couleur de premier plan/arrière-plan). Le bas du sélecteur affiche le code HEX dans un champ de texte. Cliquez avec le bouton droit sur les échantillons de couleurs pour les ajouter à votre palette. L’outil Pipette échantillonne n’importe quelle couleur à l’écran – survolez pour voir son code HEX dans le panneau d’informations.

Outils de développement du navigateur : Inspectez n'importe quel élément → Le panneau Styles affiche les valeurs de couleur CSS → Cliquez sur l'échantillon de couleur à côté de n'importe quelle propriété de couleur pour ouvrir un sélecteur en ligne. DevTools peut afficher les couleurs au format HEX, RVB, HSL ou nommées : cliquez sur l'aperçu des couleurs pour parcourir les formats. Ceci est inestimable pour les décisions de conception de rétro-ingénierie à partir de sites Web existants.

Code VS : Les décorateurs de couleurs (carrés de couleur) apparaissent à côté des valeurs HEX et RVB dans les fichiers CSS. Le survol montre un sélecteur. L'extension colorize ajoute des aperçus de couleurs pour tous les formats de couleurs. Les abréviations d'Emmet commec:f développer verscouleur : #fff ; pour les couleurs communes.

Utilisation de ce convertisseur RVB vers HEX

Entrez les valeurs des canaux rouge, vert et bleu (chacune entre 0 et 255). Le convertisseur affiche le code couleur HEX prêt à être collé dans CSS, HTML ou tout autre outil de conception. Les valeurs en dehors de 0 à 255 sont automatiquement bloquées. Le convertisseur affiche également l'opération inverse : entrez un code HEX pour récupérer la répartition RVB. Utilisez cet outil lorsqu'un outil de conception vous donne une valeur RVB mais que votre feuille de style CSS utilise le format HEX, ou lorsque vous copiez des couleurs entre différentes applications utilisant des formats différents. La sortie du code HEX inclut le symbole # initial pour un collage direct dans les propriétés de couleur CSS. Les 16,7 millions de combinaisons de couleurs RVB correspondent à un code HEX unique à 6 caractères sans ambiguïté ni arrondi.