Convertisseur de code couleur (HEX, RGB, HSL)

Comment ça marche

Écrivez une couleur par ligne : chaque ligne est reconnue pour elle-même, donc une liste peut mélanger librement HEX, RGB et HSL. Le HEX est accepté sous sa forme à six caractères (#2F6FED) comme sous sa forme courte à trois caractères (#2F6), et le dièse de tête est facultatif. Pour le RGB, écrivez rgb(154, 52, 18) ou simplement les trois nombres séparés par des virgules ou des espaces ; un canal hors de l'intervalle 0-255 est refusé au lieu d'être ramené discrètement dans les bornes, ce qui fait qu'une faute de frappe se voit au lieu de produire une couleur fausse. Le HSL attend une teinte en degrés de 0 à 360 avec la saturation et la luminosité en pourcentage ; les écritures rgba() et hsla() sont lues elles aussi, mais la valeur de transparence n'est pas reportée dans la sortie. Chaque couleur correctement lue apparaît sous forme de pastille à côté de son code HEX, ce qui vous permet de voir ce que vous avez converti au lieu de vous fier aux chiffres. Toute ligne illisible est marquée dans la sortie, ce qui vous indique laquelle corriger.

Cet outil est aussi connu sous le nom de convertir hex en rgb, rgb en hex, convertisseur de code couleur, code couleur hexadecimal, hex vers hsl, trouver un code couleur.

Qu'est-ce que code couleur HEX ?

Un code HEX écrit les composantes rouge, verte et bleue d'une couleur en base 16, sous la forme de six caractères précédés d'un dièse : #9A3412 par exemple. La première paire porte le rouge, celle du milieu le vert, la dernière le bleu, et un raccourci à trois caractères comme #F00 se lit en doublant chaque caractère. Court, sans ambiguïté et facile à copier, il est devenu la langue par défaut des couleurs dans CSS, dans les logiciels de conception et dans les chartes graphiques : c'est presque toujours sous cette forme qu'un graphiste vous transmet une couleur, et c'est celle qu'il faut conserver comme référence.

Qu'est-ce que RGB ?

Le RGB décrit une couleur telle qu'un écran la fabrique réellement : par l'intensité d'une lumière rouge, verte et bleue, chacune sur une échelle de 0 à 255. L'écriture rgb(154, 52, 18) énonce les trois canaux ouvertement, ce qui rend visible l'effet d'une hausse ou d'une baisse sur l'un d'eux. Elle porte exactement la même information qu'un code HEX, seule la base de numération change, si bien que le choix entre les deux est pratique et non technique. Le RGB s'impose dès qu'un programme doit faire un calcul sur les canaux, par exemple pour éclaircir une couleur ou mesurer un contraste.

Qu'est-ce que HSL ?

Le HSL décrit une couleur par trois composantes plus proches de la perception humaine : la teinte, c'est-à-dire la position sur la roue chromatique de 0 à 360 degrés, la saturation et la luminosité. Produire une version plus claire, plus sombre ou plus terne de la même couleur revient à changer un seul nombre, ce qui explique que les graphistes s'y réfèrent pour bâtir une palette ou dériver un thème sombre. CSS accepte directement l'écriture hsl(), donc une valeur lue ici se colle telle quelle dans une feuille de style, sans conversion supplémentaire.

HEX et RGB désignent-ils la même couleur ?

Oui — HEX et RGB sont deux écritures de la même information : #9A3412 et rgb(154, 52, 18) désignent exactement la même couleur, puisque 9A en hexadécimal vaut 154 en décimal. Choisir entre les deux relève de la destination de la valeur, pas de son sens. Le HSL, lui, diffère par nature : il décrit la même couleur par teinte, saturation et luminosité plutôt que par trois canaux de lumière. Comme ces composantes sont arrondies à l'entier pour rester lisibles, un aller-retour par le HSL peut revenir décalé d'une ou deux unités. La couleur reste identique à l'œil ; c'est le code qui ne correspond plus caractère pour caractère, ce qui compte dès lors que le code lui-même est ce qui est spécifié.

Quel format pour quel usage

Les trois écritures peuvent porter exactement la même couleur ; ce qui les départage, c'est la destination de la valeur. Pour un code isolé collé dans une feuille de style, le HEX est le plus court et le plus universellement reconnu, et c'est sous cette forme qu'une charte graphique vous livrera presque toujours ses couleurs.

Si vous devez calculer sur les canaux, le RGB met les trois nombres sous les yeux. Si vous cherchez la variante plus claire ou plus sombre d'une même couleur, le HSL vous fait modifier un seul nombre au lieu de trois.

• HEX → court, standard dans CSS et les outils de conception
• RGB → quand il faut manipuler les canaux séparément
• HSL → pour construire une famille de tons et des variantes claires ou sombres

Pourquoi une valeur revient parfois décalée d'une unité

Les composantes HSL sont fractionnaires ; elles sont arrondies à l'entier pour que la sortie reste lisible. Convertissez un code HEX en HSL puis revenez en arrière et vous constaterez parfois un écart d'une ou deux unités sur un canal.

Ce décalage est invisible à l'écran, mais il est réel. Lorsqu'un code doit rester exactement tel qu'il a été communiqué — couleur de marque, valeur inscrite dans un cahier des charges — gardez le HEX comme référence et considérez la lecture HSL comme une valeur dérivée.

Questions fréquentes

Comment convertir un code HEX en RGB ?

Écrivez le code dans le panneau de gauche et réglez le format de sortie sur RGB. Le résultat apparaît à droite pendant que vous tapez, accompagné d'une pastille qui montre la couleur elle-même.

Puis-je convertir plusieurs couleurs à la fois ?

Oui. Mettez une couleur par ligne. La liste entière est traitée en une seule passe et garde son ordre, de sorte qu'une palette ressort comme une palette.

La forme courte du HEX est-elle acceptée ?

Oui. Un code à trois caractères comme #2F6 est étendu en doublant chaque caractère, exactement comme le fait un navigateur. Le dièse de tête est facultatif ici aussi.

Pourquoi ma couleur est-elle signalée comme non reconnue ?

Le plus souvent parce qu'un canal sort de son intervalle ou qu'une parenthèse manque. Les canaux RGB doivent rester entre 0 et 255, la teinte entre 0 et 360, la saturation et la luminosité entre 0 et 100. Les lignes en échec sont listées, ce qui vous évite de tout revérifier.

Mes couleurs sont-elles envoyées quelque part ?

Non. La lecture et la conversion se font dans votre navigateur ; ce que vous collez n'atteint aucun serveur, ce qui compte quand la palette appartient à une charte graphique non encore publiée.

Sources

• W3C — CSS Color Module Level 4 (hex, rgb(), hsl())