RevealTheme logo

Convertisseur de couleur (HEX/RGB/HSL)

Convertissez des couleurs entre les formats HEX, RGB et HSL. Choisissez une couleur visuellement ou saisissez les valeurs manuellement.

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

Comment utiliser cet outil

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 4

    Copy whichever format you need straight into your CSS or design file.

Qu'est-ce que le convertisseur de couleur (HEX/RGB/HSL) ?

HEX, RGB et HSL sont trois façons d'exprimer la même couleur. HEX (#RRGGBB) est le plus courant en CSS et dans les outils de conception. RGB (rgb(R,G,B)) sépare les canaux numériquement. HSL (hsl(H,S%,L%)) est plus intuitif pour les humains : la teinte (hue) est la couleur, la saturation est l'intensité et la luminosité (lightness) est la clarté. Utilisez HSL pour concevoir des palettes ; convertissez-le en HEX pour la mise en œuvre.

Cas d'usage courants

  • Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

  • Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

  • Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

  • Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

  • Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

  • Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

Questions fréquentes

Quand dois-je utiliser HSL plutôt que HEX ?
Lors de la conception : HSL vous permet d'ajuster la luminosité ou la saturation de façon indépendante. Convertissez-le ensuite en HEX pour le code.
Et OKLCH et les espaces colorimétriques modernes ?
OKLCH est perceptuellement uniforme et meilleur pour l'accessibilité. Il est pris en charge dans CSS Color Level 4 (tous les navigateurs modernes).

Outils connexes