Outils de Couleur
Convert colors between HEX, RGB and HSL with a live preview — the quick way to grab the exact value you need for CSS and design.
À propos de Outils de Couleur
Les outils de couleur résolvent un problème modeste mais constant : la valeur que vous avez n'est pas dans le format dont vous avez besoin. Une charte de marque vous donne un code hexadécimal, un fichier de conception indique du RGB, une variable CSS veut du HSL, et quelque part au milieu vous devez convertir. Cette catégorie compte quatre outils pour exactement cela — le convertisseur HEX vers RGB pour la conversion la plus courante, le convertisseur de couleurs plus général pour passer d'un format à l'autre, le vérificateur de contraste des couleurs pour l'accessibilité, et le générateur de nuances de couleur pour construire une palette. Ils s'adressent aux développeurs front-end, aux designers et à quiconque assemble une feuille de style ou une présentation.
Choisir entre eux est simple. Si vous avez une valeur et en voulez une autre, utilisez HEX vers RGB lorsque c'est exactement le sens que vous voulez, ou le convertisseur de couleurs général lorsque vous allez dans l'autre sens ou avez besoin de HSL. Le HSL vaut la peine d'être appris ici, car c'est le format qui rend une couleur facile à raisonner : la teinte vous dit de quelle couleur il s'agit, et ajuster la seule luminosité vous donne un ensemble cohérent de teintes claires et foncées. Lorsque vous avez besoin de toute une gamme plutôt que d'une seule valeur — un état survolé, un état désactivé, un fond qui se tient discrètement derrière un texte — le générateur de nuances de couleur le fait en une seule étape. Et avant de livrer une association de texte et de fond, passez-la au vérificateur de contraste des couleurs, qui mesure le rapport de contraste afin que vous puissiez dire si votre combinaison est confortablement lisible ou seulement techniquement visible.
Les quatre outils sont gratuits, ne nécessitent aucun compte et s'exécutent entièrement dans votre navigateur — vos valeurs de couleur ne sont jamais envoyées, et l'aperçu en direct se met à jour à mesure que vous tapez plutôt qu'après un aller-retour vers un serveur. Cela les rend assez rapides pour servir de brouillon pendant que vous travaillez : ajustez une valeur, observez l'échantillon, copiez le résultat. Si vous construisez du CSS plutôt que de choisir des valeurs, la catégorie des générateurs CSS propose un constructeur de dégradé et un constructeur d'ombre portée qui produisent du code prêt à copier, et la catégorie des générateurs inclut un générateur de couleur aléatoire si vous avez simplement besoin d'un point de départ.
Questions fréquentes
Quel rapport de contraste dois-je viser ?
Les recommandations WCAG largement utilisées demandent un rapport d'au moins 4,5 pour 1 pour le corps de texte normal et 3 pour 1 pour le grand texte, avec un 7 pour 1 plus strict pour le niveau le plus élevé. Le vérificateur de contraste vous montre le rapport afin que vous puissiez juger selon la norme applicable à votre projet.
HEX, RGB et HSL sont-ils interchangeables ?
Pour les couleurs opaques ordinaires, oui. HEX et RGB décrivent la même valeur dans une notation différente, et HSL correspond aux mêmes couleurs sRGB. L'arrondi lors de la conversion vers HSL et retour peut décaler une valeur d'un point ou deux, ce qui est invisible en pratique mais peut faire paraître deux codes légèrement différents.
Ces outils fonctionnent-ils avec la transparence ?
L'alpha s'exprime à travers des formats comme RGBA, HSLA et l'hexadécimal à huit chiffres. Gardez à l'esprit qu'un rapport de contraste pour une couleur semi-transparente dépend de ce qui se trouve derrière elle, alors vérifiez la couleur finale mélangée plutôt que la couleur transparente.
Mes données de couleur sont-elles stockées quelque part ?
Non. Les quatre outils s'exécutent dans votre navigateur, de sorte que rien de ce que vous saisissez n'est envoyé, enregistré ni journalisé. Ils sont gratuits, sans compte.