Outils de couleurs gratuits

À propos de nos outils de couleur

Absolutool inclut 7 outils de couleur spécialisés pour les designers, développeurs et professionnels de l’accessibilité. Convertissez entre les formats HEX, RGB, HSL et HSB. Générez des palettes harmonieuses grâce à la théorie des couleurs. Vérifiez les rapports de contraste WCAG pour vous assurer que vos designs sont accessibles à tous.

Le simulateur de daltonisme utilise les matrices de recherche Brettel/Viénot pour modéliser avec précision 8 types de déficience de vision des couleurs · importez une image ou testez des couleurs individuelles. Utilisez le générateur de nuances de couleurs pour les tokens de design system, le mélangeur de couleurs pour des mélanges précis et le sélecteur de couleurs d’image pour extraire des couleurs de n’importe quelle photo. Tous les outils fonctionnent entièrement dans votre navigateur.

Les modèles de couleur sur le web

Chaque pixel d'une page web moderne est décrit par une valeur de couleur que le navigateur interprète et demande au GPU d'afficher. Les deux formats que vous rencontrerez le plus souvent sont le HEX (un triplet hexadécimal à six chiffres comme #3b82f6) et le RGB (des valeurs décimales comme rgb(59 130 246)). Les deux décrivent la même chose : la quantité de lumière rouge, verte et bleue à mélanger sur un écran qui utilise la couleur additive. Un écran 24 bits standard offre 256 niveaux par canal, soit 16,78 millions de couleurs adressables. Le HEX est plus court, le RGB est plus facile à manipuler en calcul, et les deux sont interchangeables.

Le HSL (teinte, saturation, luminosité) et le HSB (teinte, saturation, clarté) décrivent la même couleur d'écran, mais dans des coordonnées plus proches de la perception humaine. La teinte est la position de la couleur sur le cercle chromatique, de 0° (rouge) à 360°. La saturation indique la vivacité de la couleur, du gris au pur. La luminosité contrôle la quantité de blanc ou de noir mélangée. Le HSL est le format que les designers choisissent le plus souvent pour construire des systèmes de design, car ajuster un seul canal produit un changement prévisible, comme assombrir un bouton de 10 % pour l'état survolé. CSS prend en charge nativement les formats HEX, RGB, HSL, ainsi que les plus récents LCH et OKLCH.

Derrière tous ces formats se trouve un espace colorimétrique, qui définit exactement ce que « rouge 255 » signifie en termes physiques. La valeur par défaut du web est le sRGB, normalisé par la CEI en 1996 et le gamut que couvre presque tous les écrans d'ordinateur et de téléphone. Les appareils Apple récents, OLED et haut de gamme prennent en charge le Display P3, un gamut plus large qui ajoute environ 25 % de rouges et de verts plus saturés. CSS vous permet désormais d'écrire color(display-p3 1 0 0) pour en profiter. La plupart des outils de couleur de ce site travaillent en sRGB et atteignent tous les navigateurs ; le P3 élargit le possible sans changer la méthode de travail.

Comprendre le contraste des couleurs WCAG

Les Règles pour l'accessibilité des contenus web (WCAG 2.1) fixent des seuils numériques pour le contraste entre le texte et son arrière-plan. Le niveau AA, celui que visent la plupart des audits d'accessibilité, exige un rapport d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt normal ou 14 pt gras et au-delà). Le niveau AAA resserre ces valeurs à 7:1 et 4,5:1. Le rapport se calcule à partir de la luminance relative de chaque couleur, une valeur de luminosité perceptuelle dérivée des primaires sRGB par la formule IEC 61966-2-1. Deux couleurs qui semblent « presque identiques » peuvent réussir, et deux couleurs très différentes peuvent échouer si l'une est grise sur gris.

Ces chiffres comptent parce qu'environ 5 % de la population adulte mondiale présente une sensibilité au contraste mesurablement réduite à cause de cataractes, de glaucome, de rétinopathie diabétique ou de changements maculaires liés à l'âge. La lumière vive du soleil réduit le contraste effectif pour tout le monde. Les écrans mobiles vus de biais le réduisent encore. Les seuils des WCAG sont conçus pour garder le texte lisible dans ces conditions réelles, pas sur un moniteur calibré dans un bureau tamisé. Un algorithme plus récent appelé APCA (le candidat au remplacement prévu dans les WCAG 3.0) prend en compte des éléments que les WCAG 2.x ignorent, comme la graisse et la polarité du texte. Pour l'instant, le 4,5:1 AA reste la norme à laquelle se réfèrent la plupart des régulateurs.

Le daltonisme et la conception inclusive

Environ 8 % des hommes et 0,5 % des femmes d'origine nord-européenne présentent une forme de déficience de la vision des couleurs rouge-vert, et les chiffres mondiaux sont d'une ampleur comparable. Les trois types les plus courants affectent la façon dont les cônes de la rétine répondent à des longueurs d'onde précises. La deutéranomalie (la plus fréquente, environ 5 % des hommes) réduit la sensibilité à la lumière verte de longueur d'onde moyenne. La protanomalie réduit la sensibilité à la lumière rouge de grande longueur d'onde. La tritanomalie touche la perception bleu-jaune et est bien plus rare. Les simulateurs de ce site utilisent la dérivation par matrice de couleur de Brettel, Viénot et Mollon (1997), la référence standard pour ces transformations en science des couleurs.

La règle de conception pratique est « ne vous reposez pas sur la couleur seule ». Une icône d'erreur rouge et une icône de succès verte paraissent identiques à de nombreux utilisateurs atteints de deutéranomalie. Ajouter une forme différente (une croix plutôt qu'une coche), une étiquette (« Erreur » ou « Succès ») ou un motif corrige cela sans aucun coût pour les autres utilisateurs. Les graphiques et tableaux de bord sont les fautifs les plus fréquents, car les légendes reposent généralement sur une pastille de couleur. Le simulateur de daltonisme de ce site vous permet de prévisualiser une vraie capture d'écran à travers chaque déficience courante avant publication, afin de repérer les éléments qui auraient échoué en production.

La théorie des couleurs pour les palettes

Le cercle chromatique dispose les teintes selon leur angle autour du cercle : rouge à 0°, jaune à 60°, vert à 120°, cyan à 180°, bleu à 240°, magenta à 300°. Les couleurs complémentaires se situent directement à l'opposé l'une de l'autre (rouge et cyan, bleu et orange) et produisent le contraste le plus fort. Les palettes analogues utilisent deux à quatre teintes voisines sur le cercle et donnent une impression calme et unifiée, bien adaptées aux arrière-plans et aux dégradés. Les palettes triadiques utilisent trois teintes régulièrement espacées de 120°, offrant équilibre et variété. Les palettes tétradiques utilisent quatre teintes formant un rectangle. Ces règles sont issues des manuels d'artistes du XIXe siècle mais correspondent à ce que la recherche perceptuelle a depuis confirmé.

Un système de marque type a besoin d'environ cinq couleurs : une couleur de marque principale, une couleur d'accent (souvent complémentaire), un gris neutre, plus un vert de succès et un rouge d'erreur. Le générateur de palettes de ce site choisit d'abord l'harmonie, puis propose des échelles de teintes et de nuances en 10 paliers pour chaque couleur retenue, la même structure qu'utilisent des systèmes de design comme Tailwind, Material et Carbon. L'outil de palette accessible limite la génération aux combinaisons qui respectent le contraste WCAG AA sur fond blanc ou foncé. Les deux outils fonctionnent entièrement dans votre navigateur : les couleurs que vous choisissez pour une marque non encore lancée ne sont jamais transmises où que ce soit.

Questions fréquentes