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.
#535bebrgb(83, 91, 235)hsl(237, 79%, 62%)Comment utiliser cet outil
- 1
Click the color swatch to open your operating system's color picker and choose a color visually.
- 2
Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.
- 3
Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.
- 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 ?▼
Et OKLCH et les espaces colorimétriques modernes ?▼
Outils connexes
Générateur de box-shadow CSS
Créez visuellement des valeurs de box-shadow en CSS. Prévisualisez en temps réel et copiez le CSS généré.
Générateur de dégradés CSS
Créez des dégradés CSS linéaires et radiaux. Choisissez les couleurs visuellement et copiez le CSS généré.
Générateur de courbes d'accélération cubic-bezier
Créez des courbes d'accélération cubic-bezier pour CSS. Inclut des préréglages standard.
Générateur de palettes de couleurs
Générez des palettes de couleurs harmonieuses à partir de n'importe quelle couleur de base. Prend en charge les schémas complémentaires, analogues, triadiques et monochromatiques.
Générateur de border-radius CSS
Créez visuellement des valeurs complexes de border-radius en CSS. Contrôle indépendant de chaque coin.
Générateur de CSS clamp()
Générez des valeurs CSS fluides et responsives avec clamp(). Mise à l'échelle progressive entre des tailles minimale et maximale sur les plages de viewport.