Qu'est-ce que Générateur de Codes Couleur CSS ?

Un générateur de code couleur CSS qui convertit n'importe quelle couleur dans tous les formats compatibles CSS : HEX, RGB, RGBA, HSL, HSLA, OKLCH et couleurs nommées CSS. Choisissez une couleur visuellement ou saisissez-la dans n'importe quel format et obtenez instantanément tous les autres, avec une vérification de contraste WCAG.

Saisissez un code hexadécimal, déplacez le sélecteur, ajustez les curseurs RVB ou collez une chaîne rgb() ou hsl() existante. L'outil calcule les autres formats en direct, y compris OKLCH pour des palettes perceptuellement régulières, et cherche la couleur CSS nommée la plus proche dans les 147 valeurs de la liste du W3C. Le canal alpha n'apparaît que lorsque vous descendez l'opacité sous 100 %, ce qui garde les lignes rgba() et hsla() propres pour les couleurs opaques. Un panneau de contraste affiche le ratio WCAG sur blanc et sur noir pour savoir d'un coup d'œil si la couleur est lisible en texte.

Comment utiliser

1. Sélectionnez une couleur à l'aide du sélecteur visuel ou saisissez une valeur dans n'importe quel format pris en charge (HEX, RGB, HSL).
2. Visualisez la couleur affichée dans tous les formats CSS simultanément, avec copie en un clic pour chaque format.
3. Ajustez l'opacité avec le curseur alpha pour obtenir les valeurs RGBA et HSLA, puis copiez le code CSS dont vous avez besoin.

Quand l'utiliser

• Convertir un hex donné par votre graphiste vers le format attendu par votre framework CSS.
• Construire une palette et avoir besoin des valeurs HSL pour dériver des nuances plus claires et plus foncées.
• Ajouter de la transparence à une couleur de marque pour des overlays, des ombres ou des états de survol.

Résultat

Un développeur front-end choisit l'orange de sa marque #F97316 et obtient instantanément rgb(249, 115, 22), hsl(25, 95%, 53%) et tous les autres formats à utiliser de manière cohérente dans sa feuille de styles.

FAQ

Pourquoi le champ couleur nommée est-il parfois vide ?

CSS embarque seulement 147 couleurs nommées et votre hex doit correspondre exactement à l'une d'elles. La plupart des couleurs de marque tombent entre deux valeurs nommées, c'est normal. Le champ sert surtout à vérifier des couleurs courantes comme tomato ou steelblue.

Quand utiliser HSL plutôt que HEX ou RGB ?

HSL s'ajuste plus simplement à la main : +10 sur la luminosité donne une nuance plus claire, +30 sur la teinte fait avancer sur la roue chromatique. Les designers privilégient HSL pour construire des échelles. RGB et HEX sont un peu plus courts dans la feuille de styles finale.

Le curseur d'opacité change-t-il la couleur ou la transparence ?

Il modifie uniquement le canal alpha. Les valeurs rouge, vert, bleu restent identiques. C'est pour ça que rgba(255, 0, 0, 0.5) sur un fond blanc paraît rose : c'est le même rouge, mélangé à 50/50 avec ce qu'il y a derrière.

Ces valeurs CSS sont-elles supportées par tous les navigateurs ?

HEX, RGB, RGBA, HSL, HSLA et les noms ont une prise en charge universelle depuis 15 ans, jusqu'à IE11. OKLCH est aussi généré ici et fonctionne partout sur les moteurs actuels — Chrome, Firefox, Safari et Edge depuis 2023 — gardez donc un repli en hex ou rgb() si vous visez encore de très anciens moteurs.

Comment obtenir le hex d'une couleur vue sur un site ?

Cliquez sur Prélever à l'écran pour ouvrir la pipette, puis cliquez sur n'importe quel pixel de votre écran — une page, une image, une maquette — et cette couleur se charge aussitôt. (La pipette fonctionne sur Chrome, Edge ou Opera ; sur Safari ou Firefox, récupérez le hex avec la pipette intégrée à votre système et collez-le dans le champ HEX.) Dans tous les cas, vous obtenez tous les formats équivalents et les variantes avec opacité d'un coup.

Outils similaires