CodeKitHubEn quoi consiste cet outil ?
Sur le Web, les couleurs sont exprimées sous plusieurs formats équivalents. Le format HEX (#4f46e5) est la forme compacte utilisée partout dans le CSS et les livraisons de projets graphiques. Le format RVB (rgb(79, 70, 229)) indique directement les composantes rouge, verte et bleue, ce qui est souvent nécessaire en programmation. Le format HSL (hsl(243, 75 %, 59 %)) décrit la teinte, la saturation et la luminosité — c'est le format le plus intuitif pour ajuster une couleur, par exemple pour la rendre plus foncée ou moins saturée.
Elles désignent toutes la même couleur ; cet outil permet de convertir ces noms de manière précise et affiche un aperçu pour que vous puissiez vérifier que c'est bien la couleur que vous vouliez.
Pourquoi l'utiliser ?
- Accepte n'importe quel format d'entrée — HEX (3 ou 6 chiffres), RVB ou HSL — et génère tous les formats en sortie.
- Échantillon en direct pour que vous puissiez voir la couleur, et pas seulement des chiffres.
- Sélectionneur de couleurs visuel, lorsque vous préférez choisir à l'œil nu.
- Copie en un clic par format, prête à être utilisée en CSS ou dans le code.
- Gratuit, instantané, sans téléchargement.
Mode d'emploi
- Saisissez ou collez une couleur : #4f46e5, rgb(79, 70, 229) ou hsl(243, 75 %, 59 %) ; toutes ces formulations sont acceptées.
- Ou cliquez sur le sélecteur de couleur et faites votre choix à l'œil nu.
- Lisez les trois formats indiqués dans les résultats et vérifiez l'échantillon d'aperçu.
- Cliquez sur « Copier » à côté du format qui vous intéresse.
Exemple
Entrée
#4f46e5Résultat
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Trois notations, une seule et même couleur.
Quel format choisir ?
Ces trois termes décrivent exactement la même couleur — le choix dépend de celui qui est le plus facile à utiliser pour la tâche à accomplir, et non d'une question de précision.
| Format | Idéal pour | Pourquoi ? |
|---|---|---|
| Code de couleur hexadécimal | CSS, transfert des fichiers de conception, copier-coller rapide | Le plus rapide à saisir et à coller ; le format universel dans les outils de conception comme Figma. |
| Rouge, vert, bleu (79, 70, 229) | Code permettant de manipuler directement les canaux, traitement des canevas et des images | Cela correspond à la manière dont les API graphiques et les données de pixels d'image stockent réellement les couleurs. |
| HSL (hsl(243,75 %, 59 %)) | Réglage d'une couleur : plus claire, plus foncée, plus ou moins saturée | La luminosité et la saturation sont des valeurs distinctes que vous pouvez régler directement, contrairement aux formats HEX/RGB où tous les canaux sont modifiés simultanément. |
Cas d'utilisation courants
- Sélectionner une couleur visuellement dans un outil de conception, puis la convertir en valeur HEX ou RVB exacte requise en CSS ou dans le code.
- Générer une série de nuances apparentées (variantes plus claires ou plus foncées) en convertissant les couleurs au format HSL, en ajustant la luminosité, puis en les reconvertissant.
- Harmoniser la couleur d'une marque entre différents outils qui requièrent chacun un format différent : un fichier de logo en RVB, un guide de style en HEX, une variable CSS nécessitant le format HSL pour la personnalisation.
- Vérifier qu'une couleur extraite d'une capture d'écran ou d'un fichier de conception (souvent exprimée en RVB) correspond à la valeur HEX indiquée dans une feuille de style.
Foire aux questions
Quand faut-il utiliser le format HSL plutôt que le format HEX ou RVB ?
Lorsque l'on souhaite analyser une couleur, assombrir une couleur de 10 % en HSL revient à réduire sa luminosité de 10 points ; en HEX ou en RVB, il faudrait recalculer tous les canaux. C'est précisément pour cette raison que les systèmes de design définissent souvent leurs palettes en HSL.
Cet outil prend-il en charge les codes hexadécimaux à 3 chiffres, comme #fff ?
Oui. #fff est une abréviation de #ffffff : chaque chiffre est doublé. Les deux formats sont acceptés et le résultat s'affiche sous la forme complète à 6 chiffres.
Et qu'en est-il de l'alpha (transparence) ?
Cet outil convertit les couleurs opaques (les valeurs RVB/HSL). Si vous avez besoin de transparence, ajoutez vous-même la valeur alpha : rgba(79, 70, 229, 0,5) ou #4f46e580 — la partie couleur reste inchangée.
Pourquoi mes valeurs HSL diffèrent-elles de 1 par rapport à celles d'un autre outil ?
Arrondi. La conversion HSL↔RGB génère des valeurs décimales, et les outils les arrondissent différemment. Une différence de ±1 en teinte ou en pourcentage est imperceptible et tout à fait normale.
Les noms de couleurs tels que « rouge » sont-ils pris en charge ?
Pas pour l'instant — l'outil se concentre sur les trois formats numériques les plus couramment utilisés par les développeurs. Saisissez la valeur HEX/RGB/HSL de la couleur, ou sélectionnez-la visuellement à l'aide du sélecteur.