Sélecteur de couleur

Le Sélecteur de couleur est un outil gratuit qui te permet de choisir une couleur dans ton navigateur et d'obtenir sa valeur dans le format souhaité.

Quel résultat renvoie un sélecteur de couleur ?

Un sélecteur de couleur renvoie une représentation numérique de la couleur choisie sur la roue chromatique. Une même couleur visible peut être exprimée dans plusieurs formats, le plus souvent en hexadécimal, RGB, RGBA, HSL ou HSLA.

Ces formats décrivent les couleurs de différentes manières. Les formats hexadécimal et RGB indiquent les valeurs des canaux rouge, vert et bleu. Le format HSL utilise la teinte, la saturation et la luminosité, ce qui peut faciliter les ajustements systématiques. Les formats dotés d'un canal alpha décrivent également l'opacité.

• Les valeurs hexadécimales commencent par un dièse suivi de chiffres hexadécimaux, par exemple #336699.
• Les valeurs RGB expriment généralement chaque canal par un nombre compris entre 0 et 255, par exemple rgb(51, 102, 153).
• Les valeurs HSL décrivent un angle de teinte ainsi que des pourcentages de saturation et de luminosité, par exemple hsl(210, 50%, 40%).
• Les formats RGBA et HSLA ajoutent la transparence. Une valeur alpha de 0 correspond à une transparence totale, tandis qu'une valeur de 1 correspond à une opacité totale.

CSS prend également en charge les couleurs nommées, mais celles-ci se limitent à un ensemble prédéfini et conviennent moins aux jetons de conception précis. Les valeurs numériques générées sont généralement plus faciles à transférer entre systèmes de conception, feuilles de style et code d'application.

Comment utiliser le sélecteur de couleur ?

Sélectionne le champ Couleur, choisis le point voulu sur la roue chromatique, puis utilise la valeur obtenue dans le format requis par ton application. Tout le traitement s'effectue dans ton navigateur et la couleur saisie n'est jamais envoyée à un serveur.

Pour une interface existante, commence par le format déjà employé dans le code. Tu éviteras ainsi les conversions inutiles et les demandes d'intégration resteront plus faciles à relire. Lorsque tu examines des données tierces, vérifie si leurs valeurs comprennent l'opacité avant de les remplacer par une couleur qui semble équivalente.

Avant le déploiement, tu peux suivre une méthode simple : sélectionne ou reproduis la couleur prévue, copie la notation appropriée, puis vérifie-la dans l'état réel du composant. Teste séparément les états normal, survolé, ciblé et désactivé, car l'opacité et les styles hérités peuvent modifier le rendu final.

Comment interpréter le résultat ?

Interprète le résultat selon son modèle colorimétrique et vérifie tout composant alpha avant de le copier dans le code. En RGB, la valeur de chaque canal contrôle l'intensité de sa composante rouge, verte ou bleue. En HSL, la teinte parcourt une roue chromatique, tandis que la saturation règle l'intensité de la couleur et que la luminosité détermine l'équilibre entre le noir et le blanc.

La syntaxe des couleurs doit être respectée à la lettre dans CSS ou dans des données structurées. Les erreurs courantes lors d'une modification manuelle sont les suivantes :

• omettre le dièse initial d'une valeur CSS hexadécimale ;
• utiliser cinq ou sept chiffres hexadécimaux, ce qui ne correspond à aucune longueur hexadécimale standard valide ;
• insérer des pourcentages alors qu'une implémentation RGB attend des valeurs numériques pour les canaux ;
• oublier les virgules dans l'ancienne syntaxe RGB ou mélanger des syntaxes anciennes et modernes incompatibles ;
• copier une valeur avec canal alpha dans un logiciel qui n'accepte que le format hexadécimal à six chiffres ;
• utiliser une virgule décimale, comme dans 0,5, alors que CSS exige un point décimal, comme dans 0.5.

Le sélecteur génère des valeurs de couleur, mais ne sert pas de validateur CSS général. Il ne garantit pas la validité de la déclaration qui l'entoure, d'un document JSON ou d'un fichier de thème. Les erreurs de syntaxe situées en dehors de la valeur de couleur doivent donc être vérifiées avec l'analyseur ou l'outil de développement approprié.

Exemples de conversion de couleurs

Dans une couleur hexadécimale à six chiffres, chaque paire correspond au rouge, au vert ou au bleu. Par exemple, les représentations suivantes décrivent la même couleur opaque.

Valeur hexadécimale #336699

Équivalent RGB rgb(51, 102, 153)

Équivalent HSL hsl(210, 50%, 40%)

Le format hexadécimal à trois chiffres est une notation abrégée. Chaque chiffre est répété pour former une valeur à six chiffres.

Valeur hexadécimale courte #fff

Valeur hexadécimale développée #ffffff

Équivalent RGB rgb(255, 255, 255)

Le format hexadécimal à huit chiffres ajoute le canal alpha après les paires rouge, verte et bleue. Sois prudent avec les systèmes qui utilisent un ordre de canaux différent ou qui n'acceptent pas la notation à huit chiffres. Une couleur unie visuellement identique peut également produire un résultat différent lorsque de l'opacité lui est appliquée sur un autre arrière-plan.

Quel format de couleur choisir ?

Choisis la notation déjà attendue à destination, sauf s'il existe une bonne raison d'en changer. Le format hexadécimal à six chiffres est compact et courant dans les variables CSS et les fichiers de jetons de conception. Le format RGB est pratique lorsque le logiciel expose directement les valeurs des canaux. Le format HSL est utile pour créer des couleurs apparentées en ajustant la luminosité ou la saturation.

• Utilise le format hexadécimal à six chiffres pour une couleur web opaque lorsque la concision et la lisibilité générale sont importantes.
• Utilise le format hexadécimal à huit chiffres uniquement si l'environnement cible prend explicitement en charge le canal alpha dans cette notation.
• Utilise RGB ou RGBA lorsque tu travailles séparément avec les canaux rouge, vert et bleu.
• Utilise HSL ou HSLA pour créer par programmation des variations de thème fondées sur la teinte, la saturation ou la luminosité.
• Utilise le Convertisseur de couleurs si tu disposes déjà d'une valeur et souhaites la convertir, plutôt que de choisir visuellement une nouvelle couleur.

Ne considère pas une valeur RGB affichée à l'écran comme une spécification d'impression. L'impression professionnelle peut nécessiter des valeurs CMYK, un profil colorimétrique ICC, une épreuve et un accord avec l'imprimeur. Une simple conversion mathématique ne peut pas garantir qu'une couleur imprimée correspondra à son rendu sur un écran rétroéclairé.

Quand est-il inutile de choisir ou de convertir une couleur ?

Il est inutile de choisir ou de convertir une couleur lorsque la valeur existante utilise déjà le format requis à destination. Des conversions répétées peuvent introduire des différences d'arrondi, une casse incohérente ou des modifications superflues dans les fichiers sources.

Il peut aussi être préférable de conserver un jeton de conception nommé, comme une variable de thème, au lieu de le remplacer par une valeur littérale. Les jetons préservent la relation entre les composants et permettent de modifier une couleur de manière centralisée. De même, une couleur utilisée uniquement par une machine n'a pas besoin d'une représentation plus lisible pour les humains, sauf si quelqu'un doit l'examiner ou la maintenir.

Aucun sélecteur de couleur ne peut déterminer à lui seul si une couleur offre un contraste suffisant, respecte les spécifications d'une marque ou reste perceptible par les personnes ayant une déficience de la vision des couleurs. Vérifie les combinaisons de premier plan et d'arrière-plan avec un outil de contraste dédié, puis examine l'interface dans son contexte.

Questions fréquentes

Puis-je utiliser le résultat dans des variables CSS ?

Oui, à condition que la notation choisie soit valide en CSS pour les navigateurs et les outils de compilation que tu prends en charge. Enregistre la valeur complète dans une propriété personnalisée, puis appelle-la avec la fonction var(). Si le projet manipule les canaux séparément, il peut être plus pratique de les enregistrer selon la convention déjà utilisée dans le projet.

Pourquoi la même couleur paraît-elle différente sur un autre écran ?

Les écrans diffèrent par leur étalonnage, leur luminosité, leur technologie de dalle et leur prise en charge des espaces colorimétriques. La gestion des couleurs du navigateur et le profil d'affichage du système d'exploitation peuvent également modifier le rendu. Une correspondance numérique ne garantit donc pas une apparence physique identique sur tous les appareils.

Les lettres hexadécimales en majuscules et en minuscules changent-elles la couleur ?

Non. Les chiffres hexadécimaux A à F ne sont pas sensibles à la casse. Ainsi, #AABBCC et #aabbcc représentent la même couleur. Respecte la convention de casse du dépôt afin d'éviter les modifications purement liées au formatage.

Une valeur de couleur peut-elle contenir des caractères accentués ou non latins ?

Les notations hexadécimale, RGB et HSL standard utilisent des chiffres, des lettres et des signes de ponctuation ASCII. Les caractères accentués ou non latins ne font pas partie de ces syntaxes numériques de couleur. Ils peuvent apparaître dans les noms de variables ou les métadonnées qui les entourent si le langage et l'encodage du fichier concernés les autorisent.

Une couleur transparente équivaut-elle à une absence de couleur ?

Non. Une couleur entièrement transparente conserve des valeurs de canaux, même si celles-ci ne sont pas visibles en elles-mêmes. Ces canaux masqués peuvent avoir de l'importance lors d'une animation, d'une interpolation, d'une composition ou d'une modification ultérieure de l'opacité. Conserve-les donc lorsque l'application dépend de ce comportement.

Dois-je arrondir les valeurs décimales des canaux ?

Arrondis les valeurs décimales des canaux et du canal alpha uniquement à la précision acceptée à destination et nécessaire pour obtenir un résultat cohérent. Une précision excessive rend les valeurs plus difficiles à relire, tandis qu'un arrondi trop important peut entraîner une légère différence de couleur. Après l'arrondi, vérifie le rendu du composant sur l'arrière-plan prévu et dans ses différents états d'interaction.