HEX verso RVB - Come fonctionnent i codici di colore (avec exemples)

Ogni colore su un schermo e un mélange di lumière rouge, verte e bleue. Les concepteurs e i sviluppatori écrivent questo mélange in deux notations courantes : HEX (#3b82f6) e RVB (rgb(59, 130, 246)). Ils décrivent i trois mêmes stringhe - seul il système numérique change. Questa guida explique questo qu'est un codice colore HEX, questo que significa RVB, come convertire manuellement HEX in RVB (y incluso perche FF e égal a 255), dei esempi concrets, alpha/RGBA e un array rapide dei colori courantes.

Risposta rapida

Une colore HEX a six chiffres se divise in trois coppie (RR, GG, BB). Convertissez ogni paire dell'hexadécimal (base 16) in decimale (0-255) per obtenir RVB. Exemple : #FFFFFF → rgb(255, 255, 255). HEX a huit chiffres (#RRGGBBAA) ajoute un canal alpha per l'opacité. Préférez un convertisseur quando vous avez besoin di vitesse ; impara i mathématiques quando vous devez déboguer CSS o concevoir dei jetons.

Qu'est-ce qu'un codice colore HEX ?

Les codici di colore HEX (hexadécimaux) utilisent dei chiffres in base 16 : 0-9 e A-F, dove A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15. Sur il Web, ils commencent généralement par # e se déclinent in diversi longueurs :

#RGB - raccourci : ogni chiffre e doublé (#F0A → #FF00AA)
#RRGGBB - il formulaire standard a six chiffres (deux chiffres par canal)
#RRGGBBAA - huit chiffres : RVB piu alpha (opacité)

Ogni paire di chiffres correspond a un canal. Les deux premiers chiffres sono rouges, i deux suivants verts e i deux derniers bleus. Étant donné que deux chiffres hexadécimaux possono représenter 16 × 16 = 256 valori, ogni canal va di 00 (0) a FF (255) - la stesso plage que CSS utilise in rgb().

HEX e populaire in i strumenti di conception, i direttivas di marque e CSS car il e compact e facile a copier. La rompe n'a non d'importance : #3b82f6 e #3B82F6 sono della stesso couleur.

Qu’est-ce que il RVB ?

RVB significa rouge, vert e bleu. Dans CSS, vous l'écrivez sotto la forme rgb(r, g, b) o sotto la forme moderne séparée par dei espaces rgb(r g b), dove ogni canal e un intero di 0 a 255 (ou un pourcentage). Le mélange dei canaux a pleine puissance donne del blanc ; tutti i zéros font del noir ; dei mélanges inégaux créent tutte i altri colori su un schermo sRGB.

RVB (255, 0, 0) - rouge pur
rgb(0, 255, 0) - vert pur
RVB (0, 0, 255) - bleu pur
RVB (255, 255, 255) - blanc
RVB (0, 0, 0) - noir

Il e souvent piu facile di raisonner su RVB quando vous modifiez la luminosité o l'opacité in il code. HEX e souvent piu facile a incollare a partir d'un guida di style. La conversion tra eux change simplement la modo dont vous écrivez i trois mêmes nombres.

Comment convertire manuellement HEX in RVB

Divisez i six chiffres hexadécimaux in trois coppie, puis convertissez ogni paire di base 16 in décimal. La formule per una valore hexadécimale a deux chiffres XY est :

Formule

valeur = (premier chiffre × 16) + deuxième chiffre. Rappelez-vous A=10 … F=15. Donc FF = (15 × 16) + 15 = 240 + 15 = 255. C'est perche #FF correspond a la pleine intensité d'un canal.

Supprimez il premier # s’il e présent.
Si vous avez 3 chiffres (#RGB), développez ogni chiffre in il doublant (#F0A → #FF00AA).
Divisé in RR, GG e BB.
Convertissez ogni paire con (haut × 16) + bas.
Écrivez RVB (R, V, B).

Exemple concret : #FFFFFF

Le blanc e il contrôle il piu simple. RR = FF, GG = FF, BB = FF. Ogni FF e converti in 255, donc #FFFFFF → rgb(255, 255, 255). Le noir e a l'opposé : #000000 → rgb(0, 0, 0).

Exemple concret : #1A2B3C

Rouge 1A : (1 × 16) + 10 = 16 + 10 = 26
Vert 2B : (2 × 16) + 11 = 32 + 11 = 43
Bleu 3C : (3 × 16) + 12 = 48 + 12 = 60
Résultat : #1A2B3C → rgb(26, 43, 60)

Dans l'autre sens (RVB verso HEX), ogni canal e limité a 0-255, divisé par 16 per il quartet élevé, prend il reste per il quartet faible e mappe 10-15 su AF. Complétez i chiffres con un zéro non significatif affinche ogni canal soit composé di deux caractères (#0A1B2C, non #A1B2C).

Alpha, RGBA e HEX a huit chiffres

L'opacité e un quatrième canal appelé alpha. Dans CSS, rgba(r, g, b, a) utilise a di 0 (entièrement transparent) a 1 (entièrement opaque), o vous puoi utilizzare la syntaxe rgb(r g b / a) moderne. HEX a huit chiffres codice la stesso idée que #RRGGBBAA, dove AA va di 00 (transparent) a FF (opaque).

#FF000080 → rouge a environ 50 % d'opacité (128/255 ≈ 0,5) → rgba(255, 0, 0, 0,5)
#00000000 → noir entièrement transparent (souvent utilisé comme « sans remplissage »)
#3B82F6FF → identique a #3B82F6 con una opacité complète explicite

Tous i anciens navigateurs o exportations di conceptions non traitaient non i HEX a huit chiffres della stesso manière, mais il CSS moderne il prend in charge. Quando vous avez besoin di superpositions translucides, d'ombres o d'effets di verre, RGBA (ou HEX con alpha) e il bon strumento - un HEX solide a six chiffres non puo non exprimer la transparence.

Table di colori commune HEX e RVB

Ces colori di tutti i jours sono utiles a mémoriser per il debug di CSS e i token di marque correspondant :

#FFFFFF → RVB (255, 255, 255) - blanc
#000000 → RVB (0, 0, 0) - noir
#FF0000 → rgb(255, 0, 0) - rouge
#00FF00 → rgb(0, 255, 0) - vert lime
#0000FF → RVB (0, 0, 255) - bleu
#FFFF00 → rgb(255, 255, 0) - jaune
#FFA500 → RVB (255, 165, 0) - orange
#808080 → RVB (128, 128, 128) - gris
#1A2B3C → rgb(26, 43, 60) - bleu-gris foncé (d'après l'exemple ci-dessus)
#3B82F6 → rgb(59, 130, 246) - un bleu "ciel" commun utilisé in di nombreux kits d'interface utente

Questions fréquemment posées

HEX est-il la stesso chose que RVB ?

Ils codent i mêmes intensités di rouge, di vert e di bleu per i colori Web typiques. HEX écrit questi valori in hexadécimal ; RVB i écrit in décimal. La conversion di HEX in RVB (ou inversement) non change non la colore - seulement la notation.

Pourquoi FF est-il égal a 255 ?

F vaut 15 in hexadécimal. Deux chiffres signifient (15 × 16) + 15 = 255, questo qui correspond a la valore maximale del canal 8 bits. C'est perche #FF0000 e entièrement rouge e #FFFFFF e blanc.

Que significa una colore HEX a 3 chiffres ?

Le raccourci #RGB se développe in répétant ogni chiffre : #0F8 devient #00FF88. Il s'agit d'une manière compacte d'écrire dei colori dove i deux chiffres di ogni canal sono identici (#00, #FF, #88, etc.).

Quelle e la différence tra RVB e RGBA ?

RGBA ajoute un canal alpha (opacité). rgb(255, 0, 0) e rouge uni ; rgba(255, 0, 0, 0.5) e il stesso rouge a 50 % d'opacité. HEX a huit chiffres (#RRGGBBAA) e l'équivalent HEX di RGBA.

Dois-je utilizzare HEX o RVB in CSS ?

Les deux sono valables. Utilisez HEX quando vous copiez a partir d'un système di conception o que vous souhaitez un token court. Utilisez RVB/RGBA quando vous avez besoin d'opacité o quando vous créez dei colori a partir di variables e di mathématiques. De nombreuses équipes stockent una colore di marque HEX e dérivent dei canaux rgb() per i astuces d'opacité CSS modernes (par exemple, rgb(var(--brand-rgb) / 0.2)).

Comment convertire rapidement HEX in RVB ?

Per un apprentissage ponctuel, utilisez la metodo (chiffre × 16) + chiffre ci-dessus. Per il travail quotidien, collez il codice in un convertisseur HEX verso RVB afin di pouvoir copiare rgb()/rgba(), prévisualiser un échantillon e evitare i errori arithmétiques.

Convertitore HEX verso RVB gratuit

Collez n'importe quelle colore HEX in il [Convertitore HEX verso RVB] gratuito (/converter-tools/hex-to-rgb-converter) per obtenir instantanément rgb()/rgba() - ainsi que il chemin RVB → HEX inversé, un échantillon in direct e dei pulsanti di copie. Il s'exécute entièrement in tuo navigateur ; rien non e téléchargé.