Passer au contenu principal

HEX / RGB / HSL Converter

Online color converter — HEX, RGB, HSL, HSB, CMYK, RGBA, WCAG contrast, shades, named CSS colors

#3B82F6
#
← version courte ← avec alpha
R
G
B
rgb( )
H °
S %
L %
hsl( )
H °
S %
B %
hsb( )
C %
M %
J %
N %
cmyk( )
rgba( )
hsla( )
Informations détaillées
Nuances & teintes
Contraste WCAG
Couleurs CSS nommées proches
Historique

Convertisseur HEX, RGB, HSL : guide complet

Les couleurs en informatique peuvent être exprimées dans plusieurs espaces colorimétriques, chacun adapté à un usage différent. Notre convertisseur permet de passer instantanément d'un format à l'autre : HEX, RGB, HSL, HSB/HSV, CMJN et RGBA.

Les formats de couleur en détail

#HEX — Notation hexadécimale

Format le plus courant sur le web. Chaque paire de chiffres représente R, G, B en base 16. #FF0000 = rouge pur. Peut s'abréger en 3 caractères si chaque paire est doublée : #FF6600#F60.

rgb() — Rouge Vert Bleu

Chaque canal varie de 0 à 255 (256 valeurs). Modèle additif : rouge + vert + bleu = blanc. rgb(255,0,0) = rouge. Avec transparence : rgba(255,0,0,0.5).

hsl() — Teinte Saturation Luminosité

Le plus intuitif : Hue (0-360°) = couleur sur la roue, Saturation (0-100%) = vivacité, Lightness (0-100%) = clair/foncé. Idéal pour créer des variantes d'une couleur.

hsb() — Teinte Saturation Luminance

Utilisé dans Photoshop et Illustrator. Similaire au HSL mais Brightness (0 = noir, 100 = couleur pure). Plus naturel pour choisir une couleur à la main.

cmyk() — Cyan Magenta Jaune Noir

Modèle soustractif utilisé en imprimerie. Les valeurs représentent la quantité d'encre de chaque couleur. Le noir (K) est séparé pour économiser l'encre.

Luminance relative & WCAG

La luminance relative mesure la clarté perçue par l'œil humain. Elle sert au calcul du ratio de contraste WCAG pour vérifier l'accessibilité texte/fond.

Frequently asked questions

HEX and RGB represent exactly the same information but in different notations. RGB uses three decimal numbers from 0 to 255 for red, green, blue. HEX encodes th... HEX and RGB represent exactly the same information but in different notations. RGB uses three decimal numbers from 0 to 255 for red, green, blue. HEX encodes these same values in base 16 (hexadecimal) as a 6-character string preceded by #. Example: rgb(59, 130, 246) = #3B82F6.

Both use Hue and Saturation, but differ on the third component. HSL uses Lightness: 0% = black, 50% = pure color, 100% = white. HSB/HSV uses Brightness: 0% = bl... Both use Hue and Saturation, but differ on the third component. HSL uses Lightness: 0% = black, 50% = pure color, 100% = white. HSB/HSV uses Brightness: 0% = black, 100% = full intensity color. Photoshop and Illustrator use HSB, web browsers use HSL.

Short HEX notation (#RGB) is only possible if each pair of characters is identical. For example, #FF6600 can be written #F60, but #3B82F6 cannot be shortened be... Short HEX notation (#RGB) is only possible if each pair of characters is identical. For example, #FF6600 can be written #F60, but #3B82F6 cannot be shortened because its pairs (3B, 82, F6) are not doublets. If the short version shows —, your color cannot be abbreviated.

Use the Alpha slider to adjust transparency from 0% (invisible) to 100% (opaque). The tool automatically generates the corresponding rgba() and hsla() formats, ... Use the Alpha slider to adjust transparency from 0% (invisible) to 100% (opaque). The tool automatically generates the corresponding rgba() and hsla() formats, as well as the HEX8 notation (#RRGGBBAA) supported by all modern browsers since CSS4.

Relative luminance is a value between 0 (absolute black) and 1 (pure white) that measures the lightness perceived by the human eye according to a linear model. ... Relative luminance is a value between 0 (absolute black) and 1 (pure white) that measures the lightness perceived by the human eye according to a linear model. It is the basis for the WCAG contrast ratio calculation: a ratio ≥ 4.5:1 is required for normal text (AA level), ≥ 7:1 for AAA level.
Publicité
Lien copié !