Qu'est-ce que Sélecteur de couleur ?
Le Sélecteur de Couleur vous permet de choisir visuellement n’importe quelle couleur via une entrée de couleur interactive et de voir instantanément sa valeur dans tous les principaux formats de couleur : HEX (standard web), RVB (affichage à l’écran), TSL (pratique pour le design) et CMJN (impression). Une bande de teintes affiche des variantes plus claires et plus foncées générées automatiquement de la couleur choisie, et le panneau d’accessibilité affiche les rapports de contraste sur fond blanc et noir.
La conversion entre formats de couleur est une tâche constante en design et développement. Les designers travaillent en HEX et TSL pour les écrans ; les designers d’impression ont besoin du CMJN ; les développeurs CSS utilisent le RVB pour les opérations d’opacité ; les systèmes back-end peuvent stocker les couleurs sous forme d’entiers ou de chaînes TSL. Notre outil supprime le besoin de calculatrices distinctes en fournissant tous les formats simultanément.
Les données d’accessibilité — le rapport de contraste sur blanc et noir — fournissent des informations immédiates sur la conformité WCAG au moment du choix de la couleur. Vérifier l’accessibilité pendant le choix des couleurs évite que les infractions ne soient découvertes tard dans le développement, lorsqu’elles sont plus coûteuses à corriger.
Cas d'utilisation
Voici les façons les plus courantes d'utiliser Sélecteur de couleur au quotidien.
Conversion de format des couleurs de marque
Une charte de marque spécifie une couleur primaire CMJN pour l’impression. Vous avez besoin du code HEX pour le site web et du RVB pour la publicité numérique. Saisissez la couleur visuellement et obtenez tous les formats simultanément pour une représentation cohérente sur tous les supports.
Génération de teintes pour les systèmes de design
Un système de design a besoin d’une gamme tonale : variantes de fond, de bordure, de texte atténué, de texte courant et de titre de la couleur primaire. La bande de teintes affiche des variantes plus claires et plus foncées sur toute la plage de luminosité. Cliquez sur n’importe quelle teinte pour copier son code hex et l’utiliser dans des variables CSS ou des jetons de design.
Pré-vérification de l’accessibilité
À mesure que vous choisissez les couleurs du texte et des éléments d’interface, l’affichage du rapport de contraste indique immédiatement si la couleur atteint le rapport WCAG AA requis de 4,5:1 sur votre fond. Vérifier pendant la sélection est plus rapide que de vérifier ensuite avec un outil séparé.
Développement CSS
Lors de l’implémentation d’un design, copiez le HEX pour les propriétés de couleur CSS standard, le RVB pour rgba() avec opacité et le TSL pour les ajustements programmatiques. Les trois sont fournis simultanément sans conversion manuelle.
Gestion des jetons de couleur pour les systèmes de design
Les systèmes de design définissent une palette de jetons : --color-primary-500, --color-primary-600, --color-neutral-100, etc. Le sélecteur de couleur génère la bande de teintes pour n’importe quelle couleur de base, fournissant la gamme tonale complète nécessaire pour définir les variantes claire, par défaut, foncée et au survol. Copiez la valeur HEX de chaque teinte directement dans votre fichier de jetons de design ou le panneau de styles de Figma. Cela garantit que la palette de jetons est mathématiquement cohérente : les teintes sont générées à partir de la même teinte de base avec des pas de luminosité prévisibles.
Pré-vérification de l’accessibilité pendant le choix des couleurs
L’affichage du rapport de contraste indique immédiatement si une couleur choisie atteint le rapport WCAG AA requis de 4,5:1 sur fond blanc ou noir. Vérifier pendant la sélection de la couleur — avant de s’engager dans une direction de design — est bien plus rapide et économique que de découvrir des échecs d’accessibilité après la remise du design ou pendant le développement. Pour les couleurs de texte en particulier, choisir une couleur de premier plan tout en observant la mise à jour du rapport de contraste en temps réel évite que les infractions d’accessibilité ne soient intégrées au design dès le départ.
Exemples
Conversion d’un bleu primaire
Convertissez un bleu primaire en toutes les valeurs de format pour une utilisation web et impression.
#0070F3 HEX : #0070F3 | RVB : rgb(0, 112, 243) | TSL : hsl(211, 100%, 48%) | CMJN : cmyk(100%, 54%, 0%, 5%) Générer une gamme de teintes pour une couleur de marque
Visualisez la gamme tonale complète d’un vert de marque pour définir les jetons d’un système de design.
#16A34A (vert) Teintes : 50 → #f0fdf4 | 100 → #dcfce7 | ... | 600 → #16a34a | ... | 900 → #14532d Couleur TSL en CSS pour un thème programmatique
Copiez la valeur TSL pour construire une propriété personnalisée CSS permettant un calcul de teintes facile.
#7C3AED (violet) TSL : hsl(263, 70%, 58%) — défini comme --color-primary-h: 263; --color-primary-s: 70%; --color-primary-l: 58%; Sélecteur de couleur vs Sélecteur de couleur Figma
Notre sélecteur de couleur autonome face à l’outil de couleur intégré de Figma pour les développeurs et les designers.
| Caractéristique | Toolorah | Sélecteur de couleur Figma |
|---|---|---|
| Affichage HEX, RVB, TSL | Tous simultanément | Un format à la fois |
| Conversion CMJN | Oui | Non |
| Génération de gamme de teintes | Oui — bande automatique | Manuel avec les styles |
| Rapport de contraste WCAG | Oui — sur blanc et noir | Nécessite un plugin séparé |
| Pipette d’écran | Via le sélecteur du système | Oui — intégrée |
| Fonctionne sans compte Figma | Oui | Compte requis |
| Copier des valeurs prêtes pour CSS | Oui — formatées pour CSS | Oui |
Conseils d'utilisation de Sélecteur de couleur
- Le TSL est le plus utile pour les ajustements de couleur programmatiques : changez la L pour des teintes plus claires/foncées, la S pour des couleurs atténuées/vives, la T pour des teintes apparentées.
- Les couleurs RVB à l’écran peuvent paraître plus vives que leur équivalent CMJN d’impression — le gamut CMJN est plus petit que le sRGB.
- Le sélecteur de couleur du navigateur active le sélecteur de couleur du système d’exploitation au clic — sur macOS, cela inclut une pipette pour échantillonner n’importe quelle couleur à l’écran.
- Les couleurs HEX avec des paires répétées peuvent être abrégées en CSS : #AABBCC → #ABC.
- Un contraste de 4,5:1 est requis pour le texte normal (WCAG AA). Le grand texte (18 pt ou plus) ne requiert que 3:1.
Foire aux questions
Quelle est la différence entre RVB et TSL ?
Le RVB définit les couleurs comme des intensités des canaux de lumière rouge, vert et bleu — correspondant à la façon dont les écrans produisent physiquement la couleur, mais pas à la façon dont les humains perçoivent intuitivement les relations chromatiques. Le TSL (teinte, saturation, luminosité) correspond davantage à l’intuition chromatique humaine : la teinte tourne autour de la roue chromatique (0°=rouge, 120°=vert, 240°=bleu), la saturation contrôle l’intensité de la couleur du gris à la couleur pleine, et la luminosité contrôle la clarté du noir au blanc. Créer une variante plus claire ou plus foncée d’une couleur en TSL revient à ajuster la L ; en RVB, il faut recalculer les trois canaux.
Comment convertir le HEX en RVB ?
Une couleur HEX est composée de trois paires de chiffres hexadécimaux représentant le rouge, le vert et le bleu : #RRGGBB. Convertissez chaque paire d’hexadécimal en décimal. #0070F3 → R : 00 = 0, V : 70 = 112, B : F3 = 243 → rgb(0, 112, 243). Pour convertir en sens inverse : exprimez chaque décimale en deux chiffres hexadécimaux (0-255 correspond à 00-FF). La plupart des développeurs utilisent un outil pour cela plutôt que de calculer à la main. Notre sélecteur de couleur affiche toutes les conversions simultanément.
Pourquoi les valeurs CMJN sont-elles des approximations des couleurs à l’écran ?
Le RVB est additif (lumière) : rouge + vert + bleu au maximum = blanc. Le CMJN est soustractif (encre) : cyan + magenta + jaune + noir au maximum = presque noir. Ces modèles ont des gamuts de couleur différents — la plage de couleurs qu’ils peuvent représenter. De nombreuses couleurs RVB vives à l’écran sont hors du gamut CMJN et ne peuvent pas être reproduites précisément en impression. Les valeurs CMJN converties depuis le RVB sont l’approximation d’impression la plus proche possible. Pour les couleurs critiques de marque, travaillez avec un spécialiste de la production d’impression pour vous assurer que les valeurs CMJN se reproduisent correctement sur votre papier et votre presse spécifiques.
Que sont les couleurs nommées CSS ?
CSS prend en charge 147 couleurs nommées, de « aliceblue » à « yellowgreen », définies dans la spécification CSS Color. Elles correspondent à des valeurs HEX : « cornflowerblue » est #6495ED, « tomato » est #FF6347. Les couleurs nommées sont pratiques pour la lisibilité en CSS et prises en charge par tous les navigateurs. Notre sélecteur de couleur affiche la valeur HEX — vous pouvez utiliser le HEX ou la couleur nommée équivalente en CSS s’il en existe une pour la couleur choisie.
Comment prélever une couleur sur mon écran ?
Cliquer sur l’entrée de couleur de notre outil active le sélecteur de couleur natif de votre système d’exploitation. Sur macOS Ventura et versions ultérieures, cela inclut une pipette avec loupe permettant d’échantillonner n’importe quel pixel de votre écran. Sur Windows 11, le sélecteur de couleur de certaines applis inclut une pipette. Pour une pipette dans le navigateur fonctionnant sous Chrome et Edge, l’API web EyeDropper (window.EyeDropper) peut être utilisée. Pour un échantillonnage de couleur multiplateforme, l’appli Digital Color Meter de macOS et le Color Picker de Windows PowerToys sont des outils autonomes fiables.
Qu’est-ce qu’un gamut de couleur et pourquoi est-il important en design ?
Un gamut de couleur est la plage de couleurs qu’un appareil peut afficher ou qu’un support peut reproduire. Le sRGB est le gamut standard de la plupart des moniteurs et du web — il couvre environ 35 % des couleurs visibles. Display P3 (utilisé sur les écrans Apple modernes et bien d’autres) couvre environ 50 % des couleurs visibles, produisant des verts, rouges et cyans plus vifs. Le CMJN d’impression couvre un sous-ensemble différent, dépourvu de nombreux bleus et verts saturés. Concevoir en sRGB garantit que vos couleurs paraissent cohérentes sur tous les appareils. Si vous concevez en P3 et qu’un utilisateur regarde sur un moniteur sRGB, les couleurs paraîtront moins vives que prévu.
Quelle est la différence entre sRGB et Display P3 ?
Le sRGB est l’espace colorimétrique standard du web, défini en 1996 pour les moniteurs grand public. Display P3 est un espace colorimétrique plus large conçu à l’origine pour le cinéma numérique, désormais utilisé sur les écrans Apple, les écrans OLED de Samsung et les téléphones modernes. Le P3 a environ 25 % de volume colorimétrique de plus que le sRGB, avec des verts et des rouges nettement plus larges. CSS Color Level 4 prend en charge les couleurs P3 avec la syntaxe color(display-p3 r g b). Pour le design web, le sRGB reste la valeur par défaut sûre. N’utilisez les couleurs P3 que pour des expériences où vous savez que votre public dispose d’écrans compatibles P3 et où vous avez testé des solutions de repli pour les écrans sRGB uniquement.