Aller au contenu principal
Bethemesh
Images & graphisme

Convertisseur de couleurs

Passez rapidement d’une notation de couleur à une autre entre HEX, RGB et HSL, puis récupérez les valeurs correspondantes pour vos projets Web.

  • Presse-papiers

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Couleur

Code HEX (#3366FF, #36F), rgb(51, 102, 255) ou hsl(225, 100%, 60%), avec transparence facultative.

Résultat

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Une même couleur s’écrit de plusieurs façons en CSS : #3366FF, rgb(51, 102, 255) ou hsl(225, 100%, 60%). Ce convertisseur lit l’une de ces notations et affiche aussitôt les deux autres, transparence comprise, pour passer d’une maquette au code, harmoniser une feuille de style ou retrouver la teinte et la luminosité d’un code hexadécimal.

Saisissez une couleur dans le champ : code HEX à 3, 4, 6 ou 8 chiffres (#36F, #3366FF80), rgb() ou rgba() avec des virgules ou des espaces, ou hsl() et hsla() avec une teinte en degrés, en tours (turn) ou en radians. Vous pouvez aussi cliquer sur la pastille pour choisir une couleur dans le sélecteur du système.

La conversion est immédiate. HEX est affiché en majuscules, RGB en entiers de 0 à 255 et HSL avec au plus une décimale. Une transparence inférieure à 100 % ajoute un quatrième octet au code HEX et donne rgba() et hsla(). Les valeurs hors limites sont ramenées dans l’intervalle autorisé : rgb(300, 0, 0) devient rgb(255, 0, 0).

Chaque résultat a son bouton Copier. Les noms de couleurs CSS comme « red » ou « navy » ne sont pas reconnus : saisissez leur code.

Comment utiliser cet outil ?

  1. Saisissez la couleur

    Tapez un code HEX, une valeur rgb() ou hsl(), ou choisissez-la dans le sélecteur.

  2. Lisez les équivalences

    Les champs HEX, RGB et HSL se mettent à jour à chaque frappe ; un message signale une saisie non reconnue.

  3. Copiez le résultat

    Cliquez sur l’icône Copier à côté de la notation dont vous avez besoin.

Passer de RGB à HSL

Les trois canaux sont ramenés entre 0 et 1 ; leur maximum M, leur minimum m et leur écart Δ = M − m donnent la luminosité, la saturation et la teinte.

Luminosité

L = (M + m) ÷ 2

Moyenne du canal le plus fort et du plus faible.

Saturation

S = Δ ÷ (1 − |2L − 1|)

Nulle quand les trois canaux sont égaux (gris).

Teinte

H = 60° × ((G − B) ÷ Δ mod 6, (B − R) ÷ Δ + 2 ou (R − G) ÷ Δ + 4)

La formule dépend du canal le plus fort ; le résultat est ramené entre 0 et 360°.

R, G, B
canaux rouge, vert et bleu divisés par 255
M, m
plus grand et plus petit des trois canaux
Δ
écart M − m

Cas d'utilisation

Passer d’une maquette au CSS

Transformez le code HEX d’une maquette en hsl() pour créer facilement des variantes plus claires ou plus foncées.

Harmoniser une feuille de style

Uniformisez des couleurs écrites tantôt en HEX, tantôt en rgb() dans un même projet.

Comprendre une couleur

Lisez la teinte, la saturation et la luminosité d’un code pour savoir pourquoi il paraît terne ou trop vif.

Exemples

Un bleu de marque en trois notations

33, 66 et FF en hexadécimal valent 51, 102 et 255. Le bleu domine : teinte 225°, saturation maximale, luminosité 60 %.

Entrée

#3366FF

Résultat

HEX #3366FF ; RGB rgb(51, 102, 255) ; HSL hsl(225, 100%, 60%)

Une couleur HSL et sa transparence

La couleur HSL est convertie en canaux de 0 à 255 arrondis, puis l’opacité de 50 % devient l’octet 80 en hexadécimal (128 sur 255).

Entrée

hsl(210 70% 50% / 50%)

Résultat

HEX #2680D980 ; RGB rgba(38, 128, 217, 0.5) ; HSL hsla(210, 70%, 50%, 0.5)

Conseils et bonnes pratiques

  • Pour éclaircir ou assombrir une couleur sans changer sa teinte, passez en HSL et modifiez uniquement la luminosité.
  • Un code HEX à 3 chiffres double chaque chiffre : #36F équivaut à #3366FF.
  • Le code HEX à 8 chiffres (#RRGGBBAA) est accepté par les navigateurs actuels, mais certains logiciels de dessin n’attendent que 6 chiffres.
  • Convertir HSL vers HEX arrondit les canaux à l’entier : deux valeurs HSL très proches peuvent donner le même code HEX.

Sources et références

Questions fréquentes

Quelles notations puis-je saisir ?

HEX à 3, 4, 6 ou 8 chiffres, avec ou sans #, rgb() et rgba(), hsl() et hsla(), avec des virgules ou la syntaxe moderne à espaces et « / » pour l’opacité.

Les noms de couleurs comme « tomato » sont-ils acceptés ?

Non. Seules les notations numériques sont lues ; cherchez le code HEX du nom de couleur puis saisissez-le.

Pourquoi la teinte vaut-elle 0 pour un gris ?

Un gris n’a pas de teinte : ses trois canaux sont égaux, la saturation est nulle et la teinte est fixée à 0 par convention.

Comment la transparence est-elle convertie ?

L’opacité entre 0 et 1 est multipliée par 255 pour former le quatrième octet du code HEX : 0,5 donne 80, 1 supprime l’octet.

La conversion est-elle exacte ?

HEX et RGB sont équivalents au bit près. HSL est calculé sans arrondi intermédiaire et affiché avec une décimale ; le passage vers HEX arrondit chaque canal à l’entier.

La couleur est-elle envoyée quelque part ?

Non. La conversion est un calcul fait dans votre navigateur, sans requête réseau.

Outils associés

Continuez avec ces outils

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Simulateur de daltonisme

Visualisez une image comme elle peut être perçue avec différents types de daltonisme.

Images & graphismeUtiliser l’outil

À lire aussi

RéférenceConcepts et technologiesDébutant

RGB, HEX ou HSL : quelle notation choisir ?

Comprenez comment RGB, HEX et HSL décrivent les couleurs sRGB afin de choisir une notation CSS lisible et de convertir les valeurs sans confusion.

31 août 202623 min
GuideBonnes pratiquesIntermédiaire

Optimiser un fichier SVG sans altérer son rendu

Apprenez à alléger un SVG en supprimant les données inutiles, en réduisant la précision avec prudence et en vérifiant que le rendu, l’accessibilité et les licences restent intacts.

31 août 202630 min
GuideFormatsDébutant

SVG : comprendre le format vectoriel

Découvrez comment un fichier SVG décrit des formes, utilise viewBox et s’intègre dans une page Web, avec les bonnes pratiques de responsive, d’accessibilité et de sécurité.

31 août 202633 min