Color Picker

Color Picker Web est le meilleur sélecteur de couleurs en ligne gratuit en 2026. Il prend en charge plus de 20 formats de couleurs, notamment HEX, RVB, HSL, CMJN, HSB, LAB, XYZ, HWB et plus encore. Il comprend une roue chromatique en direct, un contraste WCAG vérificateur, simulateur de daltonisme, générateur de palette, couleur de l'image sélecteur et 6 types d’harmonies – le tout entièrement gratuit et sans inscription requis.

Pour trouver un code couleur HEX à partir d'une image, utilisez le sélecteur de couleurs d'image. sur le sélecteur de couleurs Web. Téléchargez n'importe quelle photo, survolez la zone souhaitée pour échantillonner, puis cliquez pour extraire les codes HEX, RVB et HSL exacts à partir de n’importe quel pixel. Vous pouvez également générer automatiquement une palette de couleurs complète à partir de l'image en un clic.

Un outil de sélection de couleurs vous permet de sélectionner, convertir et analyser les couleurs. Il affiche les valeurs de couleur dans plusieurs formats (HEX, RVB, HSL, CMJN), génère des palettes de couleurs complémentaires, vérifie l'accessibilité aux WCAG rapports de contraste, simule le daltonisme et extrait les couleurs de images téléchargées. Il est essentiel pour les concepteurs de sites Web, les développeurs et créateurs de marque.

Pour convertir HEX en RVB, utilisez l'outil de conversion ci-dessus. Entrez n'importe quel HEX code (par exemple #9333ea) et obtenez une sortie RVB instantanée (147, 51, 234). Manuellement : divisez le HEX en 3 paires (93, 33, chacune), convertissez chacune de hexadécimal à décimal. R=147, V=51, B=234. Le sélecteur de couleurs Web le fait ceci instantanément pour tous les 20+ formats.

Selon WCAG 2.2, le rapport de contraste de couleur minimum pour une le texte est 4,5:1 (niveau AA) et 7:1 (niveau AAA). Pour les textes volumineux (18pt+ ou 14pt+ bold), le minimum est de 3:1 pour AA et de 4,5:1 pour AAA. Interface utilisateur les composants et les icônes nécessitent un contraste d'au moins 3:1 par rapport aux éléments adjacents. couleurs. Utilisez le vérificateur de contraste WCAG ci-dessus pour tester vos couleurs.

Pour choisir une couleur sur un site Web : (1) Utilisez les DevTools du navigateur – cliquez avec le bouton droit sur n'importe quel élément, inspectez-le et cliquez sur l'échantillon de couleur dans Panneau CSS. (2) Utilisez une extension de navigateur comme ColorZilla. (3) Prenez un capture d'écran et téléchargez-la sur le sélecteur de couleurs d'image de Color Picker Web pour échantillonnez n’importe quel pixel. Chrome DevTools dispose également d'une pipette intégrée dans le panneau de sélection de couleurs.

HSL signifie Teinte, Saturation et Légèreté. La teinte (0°–360°) est la type de couleur sur la roue chromatique. La saturation (0 % à 100 %) correspond à la vivacité ou à la la couleur est grise. La luminosité (0 % à 100 %) correspond à l'obscurité ou à la luminosité du la couleur apparaît. Exemple : hsl(270, 81%, 56%) est un violet moyen. LGV est le meilleur format pour les animations CSS et les thèmes de couleurs dynamiques car chaque propriété peut être ajustée indépendamment.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Un outil de sélection de couleurs est un utilitaire numérique qui permet aux utilisateurs de sélectionner n'importe quelle couleur et récupérez son code exact dans plusieurs formats - HEX, RVB, HSL, CMJN et plus encore. Il est utilisé quotidiennement par les concepteurs UI/UX pour choisir les couleurs de l'interface, les développeurs Web codent les valeurs de couleur CSS, les créateurs de marque pour maintenir la cohérence des couleurs, les photographes pour extraire les couleurs des images et des artistes numériques pour la palette création. Color Picker Web est la couleur gratuite la plus complète sélecteur disponible en 2026, prenant en charge plus de 20 formats de couleurs, WCAG vérification de l'accessibilité, simulation du daltonisme et 18 langues.

Un code couleur HEX est une représentation hexadécimale à 6 caractères d'un couleur utilisée dans la conception Web et CSS. Il commence par un symbole # suivi par trois paires de caractères (00–FF), chacun représentant le l'intensité des canaux Rouge, Vert et Bleu. Par exemple : #FF0000 est rouge pur (R=255, G=0, B=0), #FFFFFF est blanc (tous les canaux à maximum), et #000000 est noir (tous les canaux à zéro). Sténographie Les codes HEX à 3 chiffres comme #F00 se transforment en #FF0000. HEX est le plus format de couleur universellement pris en charge dans HTML, CSS, SVG et design des outils comme Figma.

Pour choisir les couleurs d'un site Web : (1) Commencez par la couleur principale de votre marque coloriez et construisez une échelle de couleurs complète à 9 niveaux (50-900) en utilisant HSL ajustements. (2) Appliquer la règle 60-30-10 — 60 % de fond neutre, 30 % de couleur secondaire, 10 % d'accent pour les CTA. (3) Vérifiez tout les combinaisons texte/arrière-plan passent le contraste WCAG AA (4,5:1 minimum pour un texte normal). (4) Générez des couleurs d'accent harmonieuses à l'aide du Outil Harmonie des couleurs : les schémas triadiques ou complémentaires fonctionnent idéal pour les sites Web. (5) Testez chaque combinaison de couleurs avec une couleur simulateur de cécité pour garantir l’accessibilité à tous les utilisateurs.

Pour choisir les couleurs de la marque : (1) Faites des recherches sur la psychologie des couleurs – constructions bleues confiance, le vert signale la croissance, le rouge crée l'urgence, le violet suggère luxe et créativité. (2) Analysez votre secteur – marques technologiques privilégient les bleus et les gris, les marques de santé utilisent les verts, les marques de luxe utilisent or, noir ou violet foncé. (3) Choisissez une couleur de marque principale qui reflète l'émotion fondamentale de votre marque. (4) Construisez une échelle de couleurs complète à partir de votre primaire en utilisant la méthode HSL. (5) Choisissez un secondaire et accentuer la couleur en utilisant la théorie de l'harmonie. (6) Vérifiez que toutes les combinaisons sont réussies Normes d’accessibilité WCAG. Documenter en tant que jetons de conception pour cohérence sur toutes les plateformes.

HEX, RVB et HSL sont trois manières de représenter la même couleur : HEXAMEN (#9333ea) est un format hexadécimal compact à 6 chiffres idéal pour CSS et HTML – le plus largement pris en charge. RVB (rvb(147, 51, 234)) définit la couleur selon les valeurs des canaux Rouge, Vert et Bleu comprises entre 0 et 255 – meilleur pour le canevas JavaScript, SVG et le rendu d'écran. HSL (hsl(270, 81%, 56%)) définit la couleur par angle de teinte (0–360°), saturation (0 à 100 %) et Légèreté (0 à 100 %) — les plus intuitifs pour les concepteurs car chaque propriété est réglable indépendamment, ce qui la rend idéale pour les animations CSS et une thématique dynamique. Tous les trois décrivent des couleurs identiques mais servent des flux de travail.

RVB et CMJN sont des modèles de couleurs fondamentalement différents pour différents types de sortie. RVB (Rouge, Vert, Bleu) est une couleur additive modèle utilisé pour les écrans numériques — la combinaison des couleurs ajoute de la lumière et le mélange tous les canaux au maximum produisent du blanc. CMJN (Cyan, Magenta, Jaune, Clé/Noir) est un modèle de couleur soustractif utilisé dans l'impression physique — Le mélange des encres absorbe la lumière et la combinaison de toutes produit du noir. Toujours design en RVB pour sortie numérique/écran. Convertir en CMJN avant d'envoyer fichiers aux imprimeurs commerciaux. La conversion n'est jamais parfaite - du RVB les couleurs (en particulier les couleurs vives et saturées) ne peuvent pas être reproduites dans Impression CMJN.

HSB (Teinte, Saturation, Luminosité) et HSV (Teinte, Saturation, Valeur) sont le même modèle de couleur avec des noms différents. Teinte (0°–360°) identifie la famille de couleurs. La saturation (0 à 100 %) contrôle le dynamisme du gris au vif. Luminosité/Valeur (0–100 %) contrôle la manière dont beaucoup de lumière que la couleur semble émettre, du noir (0%) à complètement lumineux (100%). HSB est le modèle par défaut dans Adobe Photoshop, Illustrator et le sélecteur de couleurs de Figma, ce qui le rend essentiel pour designers utilisant ces outils. Il diffère du HSL par la légèreté et la luminosité sont calculés — en HSL, 50 % de luminosité est la pure couleur, tandis qu'en HSB, 100 % de luminosité est la couleur pure.

LAB (CIELAB) et XYZ (CIEXYZ) sont indépendants du périphérique, perceptuellement espaces colorimétriques uniformes basés sur la science de la vision humaine. XYZ est le fondement de toute science moderne des couleurs : il mappe les couleurs à la façon dont l'œil humain les perçoit à l'aide de trois cônes (X, Y, Z correspondant à une sensibilité à peu près au rouge, au vert et au bleu). LABO est dérivé de XYZ et conçu de telle sorte que des distances numériques égales représentent des distances égales différences de couleur perçues, ce qui le rend idéal pour la comparaison des couleurs, l'image traitement, apprentissage automatique et contrôle de la qualité d’impression. Les deux sont utilisés en gestion professionnelle des couleurs, profils de couleurs ICC et image avancée modifier les flux de travail. CSS prend désormais en charge la syntaxe via color(xyz …) et lab(…) dans les navigateurs modernes.

Le sélecteur de couleurs d'image sur Color Picker Web vous permet d'extraire exactement couleurs de n’importe quelle photographie, capture d’écran, logo ou œuvre d’art. Téléchargez n'importe quel fichier image, puis cliquez sur n'importe quel pixel pour extraire instantanément son HEX, Valeurs RVB et HSL. L'outil génère également automatiquement un palette de couleurs complète à partir des couleurs dominantes de votre image. Ceci est utile pour faire correspondre les couleurs de la marque à partir de matériaux existants, créer des palettes à partir de moodboards, extraire les couleurs du produit photos et schémas de couleurs de rétro-ingénierie de concurrents sites Web. Aucun compte ou installation de logiciel requis - fonctionne entièrement dans le navigateur.

Color Picker Web prend en charge les six principaux types d'harmonie de couleurs basés sur théorie de la roue chromatique : Complémentaire — deux couleurs directement opposés (espacés de 180°), contraste maximum. Complémentaire Divisé — une couleur de base plus deux couleurs adjacentes à son complément (150° et 210°). Triadique — trois couleurs équidistantes (espacées de 120°), équilibré et dynamique. Analogue — trois couleurs adjacentes (30° d'écart), harmonieux et naturel. Monochromatique — variations d'une seule teinte à différents niveaux de saturation et de luminosité. Tétradique — quatre couleurs équidistantes (90° l'une de l'autre), complexe et riche. Toutes les harmonies sont calculées mathématiquement en temps réel lorsque vous choisissez les couleurs.

Oui, Color Picker Web est totalement gratuit – toutes les fonctionnalités y compris le sélecteur de couleurs, le générateur de palette, le sélecteur de couleurs d'image, Vérificateur de contraste WCAG, simulateur de daltonisme, harmonies de couleurs, générateur de teintes et de nuances, et toutes les 20+ conversions de format de couleur sont disponible sans frais. Aucun compte, adresse e-mail ou inscription n'est requis. Il n'y a pas de publicité, pas de limite d'utilisation et pas de niveau premium — toutes les fonctionnalités sont gratuites en permanence. L'outil est également disponible en 18 langues : anglais, hindi, espagnol, russe, français, allemand, Italien, portugais, bengali, japonais, coréen, malais, polonais, Indonésien, arabe, bulgare, turc et suédois.

Contraste des couleurs WCAG (Web Content Accessibility Guidelines) les exigences garantissent que le texte est lisible par les utilisateurs malvoyants, le daltonisme ou le vieillissement des yeux. Le rapport de contraste mesure le différence de luminance entre la couleur du texte et son arrière-plan — allant de 1:1 (pas de contraste) à 21:1 (maximum, noir sur blanc). WCAG 2.2 Le niveau AA nécessite un ratio minimum de 4,5 : 1 pour le texte normal et de 3 : 1 pour gros texte. Le niveau AAA nécessite 7:1 pour un texte normal. Non-conformité peut entraîner une responsabilité légale en vertu de l'ADA (États-Unis), de l'EAA (Europe) et Article 508. Plus de 4 600 poursuites en matière d'accessibilité ont été déposées aux États-Unis rien qu’en 2023, avec des échecs de contraste parmi les plus fréquemment cités problèmes.

Color Picker Web simule 8 types de déficience de vision des couleurs : Protanopie — cécité rouge (1,3 % des hommes). Protanomalie — réduit sensibilité au rouge (1,3% des hommes). Deutéranopie — cécité verte (1,2% des hommes). Deutéranomalie — sensibilité verte réduite (5% des hommes, type le plus courant). Tritanopie — bleu cécité (0,001% de la population). Tritanomalie — réduit sensibilité au bleu (rare). Achromatopsie — couleur complète cécité, ne voit que des niveaux de gris (0,003 % de la population). Achromatomalie — perception des couleurs réduite sur tous les canaux (très rare). Chaque simulation utilise une matrice de transformation de couleur clinique appliquée à la couleur sélectionnée en temps réel.

La psychologie des couleurs dans la conception de l'interface utilisateur étudie comment les couleurs influencent l'utilisateur émotions, perceptions et comportements. Associations clés : Bleu — confiance, fiabilité, calme (utilisé par Facebook, Twitter, PayPal, LinkedIn). Vert — croissance, santé, nature, succès (utilisé par Spotify, WhatsApp, marques d'aliments complets). Rouge — urgence, passion, énergie, appétit (utilisé pour les bannières de vente, les marques alimentaires, les CTA). Violet — luxe, créativité, sagesse (utilisé par Cadbury, Hallmark, les marques de beauté). Jaune — optimisme, chaleur, attention (utilisé pour les avertissements, points forts de la vente). Orange — enthousiasme, convivialité (utilisé par Amazon, Fanta, Harley-Davidson). La psychologie des couleurs influence la conversion tarifs, perception de la marque et fidélisation des utilisateurs.

La création d'une palette de couleurs pour un système de conception implique 5 étapes : (1) Définir la couleur principale de votre marque et convertissez-la en HSL. (2) Générer un Échelle de couleurs à 9 niveaux (50-900) en ajustant systématiquement la luminosité — arrêts plus clairs (50-300) pour les arrière-plans et les teintes, arrêts plus foncés (600-900) pour le texte et le mode sombre. (3) Répétez l'opération pour le secondaire, l'accent, succès, avertissement, erreur et couleurs neutres. (4) Créer une sémantique jetons (--color-primary, --color-primary-hover, --color-surface) qui font référence aux arrêts de votre balance. (5) Vérifiez chaque texte/arrière-plan la combinaison réussit les WCAG AA. Utilisez Color Picker Web pour générer votre met à l'échelle, vérifie le contraste et exporte les valeurs HEX/HSL en tant que jetons de conception pour Figma ou CSS.

La règle 60-30-10 est un principe de conception classique pour créer des couleurs équilibrées et visuellement attrayantes. 60% — dominant/neutre couleur (fonds, murs, grandes surfaces) – généralement un neutre clair qui donne le ton général. 30% — couleur secondaire (meubles, en-têtes, barres latérales) — complète la dominante et ajoute de la profondeur. 10% — couleur d'accent (CTA, boutons, surlignages, liens importants) — crée intérêt visuel et attire l’attention sur les actions clés. Dans la conception Web, ceci se traduit par : 60 % de surfaces d’arrière-plan et de base, 30 % de zones de contenu et éléments secondaires de l'interface utilisateur, 10 % des boutons principaux, états actifs et importants faits saillants. Ce ratio évite la surcharge visuelle tout en maintenant la hiérarchie.

La luminance relative mesure la luminosité perçue d'une couleur sur un échelle de 0 (noir) à 1 (blanc). Le calcul : (1) Convertissez chaque canal RVB (0-255) en décimal (0-1) en divisant par 255. (2) Supprimer la correction gamma : si valeur ≤ 0,04045, diviser par 12,92 ; sinon appliquer (valeur + 0,055) / 1,055 élevé à la puissance 2,4. (3) Appliquer la formule pondérée : L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Les poids reflètent la sensibilité de l'œil humain — la plupart sensible au vert, moins au rouge, moins au bleu. (4) Rapport de contraste = (L_plus clair + 0,05) / (L_plus foncé + 0,05). Le décalage de 0,05 représente lumière ambiante sur un écran typique. Color Picker Web effectue cette opération calcul instantanément.

HSL (Teinte, Saturation, Luminosité) et HSB/HSV (Teinte, Saturation, Luminosité/Valeur) utilisent tous deux la teinte et la saturation, mais diffèrent par la troisième canal. Dans HSL, Une légèreté de 50% est la couleur pure et entièrement saturée; 0% est noir et 100% est blanc. C'est symétrique. Dans HSB/HSV, la luminosité/valeur de 100 % est la couleur pure ; 0 % est toujours noir quelles que soient les autres valeurs. HSB est plus intuitif pour sélectionner les couleurs car vous pouvez d'abord choisir la couleur vive à 100 % de luminosité, puis assombrissez-la, ce qui la rend la valeur par défaut dans Photoshop, Figma et Illustrator. HSL est plus intuitif pour CSS car vous pouvez interpoler en douceur entre l'obscurité et des versions claires de la même teinte.

Le mélange additif de couleurs (RVB) et le mélange soustractif de couleurs (CMJN) sont les deux modèles de couleurs fondamentaux. Additif (RVB) — utilisé par des dispositifs électroluminescents (écrans, projecteurs, LED). Les couleurs sont créées en ajoutant de la lumière. En combinant les trois canaux au maximum (R=255, G=255, B=255) produit du blanc. Aucune lumière (R=0, G=0, B=0) ne produit du noir. Soustractif (CMJN) — utilisé dans l'impression. Les encres absorbent (soustraient) les longueurs d’onde de la lumière. Combinaison toutes les encres au maximum absorbent toute la lumière, produisant du noir (en théorie — en En pratique, une encre Key/noire est ajoutée car le mélange des encres est imparfait). Le implication pratique : concevoir une œuvre numérique en RVB, puis convertir en CMJN pour l'impression - en notant que certaines couleurs RVB vives ne peuvent pas être reproduites dans CMJN.

La température de couleur décrit la chaleur ou la fraîcheur d'une couleur, mesuré en Kelvin (K) pour les sources lumineuses et perçu perceptuellement pour les couleurs de conception. Couleurs chaudes (rouges, oranges, jaunes — teintes 0°-60° et 300°-360°) semblent énergiques, urgentes et invitantes. Ils avancez visuellement – les éléments aux couleurs chaudes apparaissent plus proches. Couleurs froides (bleus, verts, violets — teintes 120°–240°) se sentent calmes, dignes de confiance et professionnel. Ils reculent visuellement — les éléments aux couleurs froides apparaissent plus loin loin. Neutre (blancs, gris, beiges, turquoises proches de 90°–120°) sont équilibrés et polyvalents. Dans la conception de l'interface utilisateur, les couleurs chaudes stimulent l'action (CTA), les couleurs froides renforcent la confiance (en-têtes, arrière-plans) et les tons neutres fournissent une structure. La section À propos de la couleur de Color Picker Web affiche la température perçue de n’importe quelle couleur sélectionnée.