Sélecteur de couleur HEX

Convertissez n’importe quelle couleur HEX en RGB et HSL, ou choisissez-en une visuellement.

Fonctionne dans votre navigateur
Aucun envoi de fichier
Aucun compte

Chargement de l'outil dans votre navigateur…

Ce que fait Sélecteur de couleur HEX

Saisissez un code HEX comme #3157D5 ou sa forme courte #35D : la pastille et les valeurs RGB et HSL se mettent à jour pendant la saisie. Vous pouvez aussi cliquer sur la pastille pour ouvrir le sélecteur de couleur de votre système et choisir une couleur à l’œil. C’est un moyen rapide de traduire une couleur d’outil de design en rgb() pour le CSS, ou de vérifier ce que donne un code HEX court une fois développé.

Aucune image n’est nécessaire. Si vous voulez prélever une couleur dans une capture, ouvrez Plus d’options et déposez-y l’image. Les couleurs choisies dans une image sont gardées sous forme de pastilles. Pour analyser les couleurs de toute une image, utilisez l’Extracteur de couleur dominante.

Exemple

Entrée

#35D

Résultat

HEX #3355DD
RGB rgb(51, 85, 221)
HSL hsl(228, 71%, 53%)

Chaque chiffre d’un code à 3 chiffres est doublé : #35D équivaut donc à #3355DD.

Mode d'emploi : Sélecteur de couleur HEX

Saisissez un code dans HEX, ou cliquez sur la pastille pour choisir une couleur.
Lisez les valeurs RGB et HSL sous la grande pastille.
Cliquez sur Copier pour copier le code HEX, ou copiez le RGB ou le HSL depuis leurs propres champs.

Bon à savoir

Les codes HEX à 8 chiffres avec alpha, comme #3157D580, ne sont pas acceptés. Utilisez les six premiers chiffres et réglez l’opacité séparément en CSS.
Seul le HEX est accepté en entrée sur cette page. La sortie couvre HEX, RGB et HSL ; il n’y a ni CMJN ni Pantone.
Les valeurs HSL sont arrondies à l’entier : les reconvertir peut donner un écart d’une unité en RGB.

Questions sur Sélecteur de couleur HEX

Comment convertir un code HEX en RGB ?

Séparez les six chiffres en trois paires et convertissez chacune de la base 16 à la base 10. #3157D5 donne 31, 57 et D5, soit 49, 87 et 213. Saisissez le code ici et rgb(49, 87, 213) s’affiche immédiatement.

Qu’est-ce qu’une couleur HEX à 3 chiffres ?

C’est une forme abrégée où chaque chiffre est doublé : #35D signifie #3355DD, et #FFF signifie #FFFFFF. Elle ne fonctionne que pour les couleurs dont les paires se répètent : la plupart des couleurs de marque demandent donc les six chiffres.

Quand utiliser le HSL plutôt que le HEX ?

Le HSL est plus facile à ajuster à la main. Modifier seulement la dernière valeur éclaircit ou assombrit une couleur, ce qui est pratique pour les états de survol et les teintes. Le HEX est plus court et c’est ce qu’exportent la plupart des outils de design.