Aller au contenu

Artisanat Web Studio & Magazine

Explorer le Studio

Color Lab

Choisir une teinte, construire une harmonie, vérifier les contrastes et exporter la palette, directement dans votre navigateur.

L’outil interactif (cercle chromatique, harmonies, contrastes, exports) fonctionne dans votre navigateur et nécessite JavaScript. Les repères ci-dessous restent valables sans lui.

À quoi sert le Color Lab

Le Color Lab part d’une couleur de base et calcule une harmonie de 3 à 6 couleurs sur le cercle chromatique. Pour chaque couleur, il donne les codes HEX, RGB et HSL, le nom de la teinte, la teinte de référence d’Artisanat Web la plus proche et le contraste sur fond blanc et sur fond anthracite. La palette se copie (codes HEX ou variables CSS), s’exporte en planche SVG ou PNG et se partage par un lien.

Comment s’en servir

  • Choisissez la couleur de base : sur le cercle (teinte autour, saturation du centre vers le bord), avec le curseur de clarté, ou en saisissant un code HEX ou des valeurs RGB.
  • Choisissez une harmonie et le nombre de couleurs.
  • Verrouillez une couleur qui vous plaît : elle ne bougera plus quand la base change. Une couleur peut aussi devenir la nouvelle base.
  • Vérifiez les contrastes avant d’associer un texte et un fond.

Les harmonies en une phrase

  • Monochrome : une seule teinte déclinée en plusieurs clartés, l’accord le plus calme.
  • Analogues : des teintes voisines, à ±30° et ±60° sur le cercle, pour un accord doux et naturel.
  • Complémentaire : la teinte opposée, à 180°, le contraste le plus franc.
  • Complémentaires adjacentes : les deux voisines de la complémentaire, à ±150°, du contraste avec plus de nuance.
  • Triade : trois teintes réparties tous les 120°, un équilibre vif.
  • Tétrade (rectangle) : deux paires complémentaires (0°, 60°, 180°, 240°), riche mais à doser.
  • Carré : quatre teintes tous les 90°, très contrasté, à réserver aux touches.

Les teintes d’une harmonie sont calculées en HSL : la saturation et la clarté de la base sont conservées, seule la teinte tourne. Quand l’harmonie compte moins de teintes que de couleurs demandées, la palette est complétée par des nuances (variations de clarté).

Lire un contraste WCAG

Le rapport de contraste compare la luminance relative de deux couleurs : (L1 + 0,05) / (L2 + 0,05), de 1:1 (aucun contraste) à 21:1 (noir sur blanc). Les seuils des règles d’accessibilité WCAG 2.2 :

  • Texte courant : 4,5:1 minimum pour le niveau AA, 7:1 pour le niveau AAA.
  • Grand texte (24 px, ou 18,7 px en gras) : 3:1 pour AA, 4,5:1 pour AAA.
  • Icônes, contours de champs et de boutons : 3:1.

Le rapport affiché est tronqué au centième et n’est jamais arrondi vers la réussite : 4,49:1 n’atteint pas AA.

Teintes de référence

Les codes des fiches couleur d’Artisanat Web, pour démarrer une palette :

Couleurs d’écran (sRGB). Un code HEX n’est pas une recette de peinture : pour approcher une teinte au pinceau, voyez les pistes de mélange en peinture.

Tout est calculé dans votre navigateur : rien de ce que vous saisissez ou chargez ici n’est envoyé sur nos serveurs.

Le Color Lab sert à choisir une couleur avec précision, à construire autour d’elle une harmonie de trois à six teintes, puis à vérifier que ces teintes restent lisibles lorsqu’elles portent du texte. Chaque couleur est donnée en HEX, RGB et HSL, prête à être copiée, exportée ou transmise par un lien.

Ce que fait le Color Lab

  • Choisir une teinte : sur le cercle chromatique (à la souris, au doigt ou au clavier), en collant un code HEX, en saisissant des valeurs RGB, ou avec les curseurs de teinte, de saturation et de luminosité.
  • Construire une harmonie : l’outil calcule les couleurs associées selon la règle choisie, en tournant autour du cercle à partir de votre teinte.
  • Contrôler les contrastes : pour chaque couleur, le rapport de contraste avec le blanc et avec le noir est calculé selon la méthode des WCAG 2.2, avec un verdict AA ou AAA et un aperçu en situation, fond et texte.
  • Garder et partager : copie des codes, export en SVG ou en PNG, lien de partage qui contient la palette.
Harmonie Construction sur le cercle Effet recherché
Monochrome une seule teinte, plusieurs clartés unité, calme
Analogues teintes voisines, à ±30° douceur, continuité
Complémentaire teinte opposée, à 180° contraste franc, accent
Complémentaires adjacentes les deux voisines de l’opposée, à ±150° contraste plus souple
Triade trois teintes espacées de 120° équilibre vif
Tétrade deux paires de complémentaires richesse, à doser

Composer une palette en six étapes

  1. Partez d’une teinte. Faites glisser le repère sur le cercle, ou collez un code au format #RRGGBB. Depuis une fiche couleur du site, le lien « Ouvrir dans le Color Lab » charge directement la valeur de référence.
  2. Réglez saturation et luminosité. Une teinte claire et peu saturée fait un fond plus calme.
  3. Choisissez l’harmonie et le nombre de couleurs, de trois à six.
  4. Verrouillez ce qui doit rester. Une couleur verrouillée ne bouge plus quand vous modifiez les autres réglages.
  5. Lisez les contrastes. Repérez les couples fond et texte qui atteignent le seuil AA ; les autres serviront plutôt d’aplats ou d’accents.
  6. Exportez. Copiez les codes, téléchargez la palette en SVG ou en PNG, ou copiez le lien de partage. Le bouton « En faire un nuancier » envoie la palette au Générateur de nuanciers.

« Annuler » et « Rétablir » permettent de revenir sur un essai ; « Réinitialiser » ramène l’outil à son état de départ.

Trois façons de s’en servir

Préparer les couleurs d’une pièce. Vous partez du vert jade prévu pour un mur. Une harmonie analogue propose des verts et des bleus-verts voisins pour les textiles ; une complémentaire suggère un accent pour un objet ou une porte. Voyez ensuite la couleur sur un mur dans le Simulateur d’ambiance, puis approchez-la en peinture avec le Mélangeur.

Définir les couleurs d’un atelier ou d’une boutique. Pour un site, une enseigne ou des étiquettes, le contrôle de contraste indique quelles couleurs peuvent porter du texte et lesquelles doivent rester décoratives.

Transmettre une palette. Le lien de partage reproduit la palette à l’identique chez la personne qui l’ouvre ; l’export PNG s’insère dans un devis ou un dossier.

Ce que le Color Lab ne fait pas

  • Il ne donne pas de formule de peinture. Un code HEX décrit une couleur d’écran dans l’espace sRGB, l’espace par défaut du web. Il ne dit rien des pigments à employer : pour approcher une teinte avec de vraies peintures, passez par le Mélangeur et faites un essai sur échantillon.
  • Il ne garantit pas la couleur affichée. Le même code n’apparaît pas identique sur deux écrans réglés différemment, et l’espace sRGB ne couvre qu’une partie des couleurs que l’œil distingue.
  • Son cercle n’est pas celui des peintres. C’est un cercle de teintes d’écran : les complémentaires y suivent la logique de la lumière, le jaune fait face au bleu et le rouge au cyan. Le cercle traditionnel des peintres, bâti sur le rouge, le jaune et le bleu, n’oppose pas toujours les mêmes couleurs.
  • Il ne remplace pas un audit d’accessibilité. Le rapport de contraste ne concerne que la lisibilité du texte ; un document ou un site accessible répond à bien d’autres critères.

Questions fréquentes

Le code HEX suffit-il pour acheter la bonne peinture ?

Non. Il peut servir d’indication, mais une peinture se choisit sur un échantillon physique, observé dans la lumière de la pièce. Les fabricants ont leurs propres nuanciers ; leur correspondance avec un code d’écran n’est jamais qu’approximative.

Pourquoi un contraste de 4,49 : 1 est-il refusé ?

Les WCAG fixent un minimum de 4,5 : 1 pour le texte courant (niveau AA) et de 3 : 1 pour le grand texte, c’est-à-dire au moins 18 points, ou 14 points en gras. Le niveau AAA demande 7 : 1 et 4,5 : 1. Le W3C précise que le rapport calculé ne doit pas être arrondi : le Color Lab applique cette règle et n’arrondit jamais en votre faveur.

Mes palettes sont-elles enregistrées quelque part ?

Pas sur nos serveurs. La palette vit dans votre navigateur et dans le lien de partage. Si vous activez les favoris, ils sont conservés dans le stockage local de votre navigateur, sur cet appareil uniquement.

Pour aller plus loin

Sources