Studio de couleurs réunit cinq outils. Utilisez « Sélecteur de couleur » pour choisir une couleur, « Couleurs d’image » pour en prélever dans une image, « Créateur de palettes » pour composer une collection, « Générateur de dégradés » pour créer des fonds dégradés et « Vérificateur de contraste » pour comparer un texte à son arrière-plan. Chaque onglet ouvre sa propre page. Enregistrez ou exportez ce que vous souhaitez conserver avant de changer d’outil.
Choisir une couleur et copier son code
Ouvrez « Sélecteur de couleur ». Déplacez la poignée sur la bande de couleurs pour choisir une teinte, par exemple du bleu ou du vert.
Déplacez la poignée dans le grand carré pour éclaircir, assombrir ou désaturer cette couleur.
Dans « Formats de couleur », trouvez le format voulu et appuyez sur son bouton de copie.
Collez la valeur copiée dans l’application ou le document souhaité.
Les champs de format affichent le résultat et ne sont pas modifiables. « Copier tous les formats » copie les cinq valeurs avec leurs libellés. HEX, RGB, HSL, HSV et CMYK représentent la même couleur de différentes façons.
HEX, RGB et HSL servent à définir les styles d’un site. Les valeurs HSV et CMYK sont des conversions numériques, pas des déclarations CSS prêtes à coller. Le CMYK ne tient compte d’aucun profil d’imprimante ou de papier et ne peut donc pas prédire la couleur exacte à l’impression.
« Prélever à l’écran » ouvre la pipette du navigateur lorsqu’elle est prise en charge. Choisissez un pixel visible pour utiliser sa couleur, ou annulez avec Escape. Cette commande n’est pas disponible sur les appareils tactiles et certains navigateurs de bureau ne la prennent pas en charge.
Trouver des couleurs assorties
Les choix de « Harmonie des couleurs » proposent des associations à partir de la couleur actuelle. Sélectionnez une suggestion pour en faire la couleur actuelle et actualiser les valeurs de format.
| Choix | Couleurs proposées |
|---|---|
| Complémentaire | La couleur actuelle et celle qui lui fait face sur le cercle chromatique. |
| Triade | Trois couleurs régulièrement espacées sur le cercle chromatique. |
| Analogue | La couleur actuelle et ses deux voisines sur le cercle chromatique. |
| Complémentaire divisée | La couleur actuelle et deux couleurs proches de sa couleur opposée. |
| Tétrade | Quatre couleurs réparties sur le cercle chromatique. |
| Monochromatique | Des variantes plus claires et plus sombres de la teinte actuelle. |
Ces suggestions ne vérifient pas la lisibilité du texte. Avant de les utiliser pour un texte et son fond, vérifiez leur association dans « Vérificateur de contraste ». « Enregistrer un préréglage » enregistre la couleur actuelle et son harmonie pour plus tard.
Prélever des couleurs dans une image
Ouvrez « Couleurs d’image » et ajoutez une image depuis votre appareil.
Attendez que les couleurs proposées apparaissent. Modifiez « Nombre de couleurs » pour obtenir plus ou moins de suggestions.
Cliquez sur une nuance pour la sélectionner et copier sa valeur HEX. Le panneau de la couleur sélectionnée fournit aussi les valeurs RGB, HSL, HSV et CMYK.
Cliquez ailleurs dans l’image pour ajouter la couleur de cet endroit.
« Nombre de couleurs » accepte de 1 à 20 suggestions automatiques. Les couleurs prélevées manuellement s’y ajoutent, la liste finale peut donc être plus longue. Les suggestions proviennent de pixels échantillonnés et de groupes de couleurs. Elles ne recensent pas toutes les couleurs distinctes de l’image d’origine.
« Filtrer les teintes extrêmes » exclut les pixels très sombres et très clairs de la recherche de suggestions. Désactivez cette option si ces couleurs sont importantes ou si l’image est surtout en noir et blanc. Modifier cette option ou « Nombre de couleurs » recalcule les suggestions. Sur une image fixe, cela remplace aussi les prélèvements manuels.
« Afficher les points » affiche les repères d’échantillonnage sur l’image. Désactiver cette option masque les repères sans supprimer les couleurs. Déplacez un repère visible pour prélever la couleur d’un autre endroit. À la souris, l’aperçu agrandi aide à viser le point voulu.
Retirez une nuance avec sa commande de suppression. « Retirer l’image et recommencer » demande confirmation avant de retirer l’image actuelle et ses couleurs. Les préréglages enregistrés sont conservés.
Les grandes images peuvent être réduites pour l’échantillonnage. Une valeur sélectionnée peut donc provenir de l’image affichée et redimensionnée, plutôt que d’un pixel intact à la résolution d’origine. La transparence n’est pas traitée comme un canal de couleur distinct.
Choisir des couleurs dans un GIF animé
Un GIF animé s’ouvre avec une chronologie des images. Utilisez les boutons précédent et suivant, le curseur ou une miniature pour choisir une image. Vous pouvez aussi lancer et mettre en pause l’animation.
Cliquez dans l’image pour recueillir une couleur de l’image actuelle. La liste combine les sélections enregistrées dans les images déjà utilisées. Passer à une autre image n’extrait pas automatiquement une nouvelle palette pour chaque image du GIF.
Pour recalculer les couleurs automatiques de l’image actuelle, modifiez « Nombre de couleurs » ou « Filtrer les teintes extrêmes ». Les sélections sont conservées séparément pour chaque image du GIF. Les couleurs recueillies dans d’autres images peuvent donc rester dans la liste commune. Enregistrez un préréglage d’image pour garder l’image, les sélections et les positions d’échantillonnage.
Créer et modifier une palette
Ouvrez « Créateur de palettes » pour partir des couleurs Material, ou choisissez un autre préréglage rapide. Si vous avez modifié la configuration actuelle, l’application d’un préréglage peut demander confirmation avant de la remplacer.
« Palette aléatoire » change les couleurs non verrouillées. Verrouillez celles que vous souhaitez garder, puis générez une nouvelle palette. Le verrou protège une couleur lors de la génération aléatoire. Il n’empêche ni sa modification, ni sa suppression, ni son remplacement par un préréglage.
« Ajouter une couleur » ajoute une nuance. Chaque nuance possède des commandes de modification et de suppression ainsi qu’une poignée pour changer sa place. Il doit rester au moins une couleur. Cliquez sur la valeur affichée pour la copier et choisissez HEX ou RGB pour changer le format copié.
Sur ordinateur, « Modifier la couleur » ouvre le sélecteur de couleurs du navigateur. Sur un appareil tactile, cette commande ouvre un dialogue avec des réglages de couleur et des champs HEX et RGB. Appuyez sur « Appliquer » pour conserver la modification ou sur « Annuler » pour l’abandonner.
« Annuler » et « Rétablir » parcourent les dernières modifications de la palette. Leur historique conserve jusqu’à 50 états pendant la session actuelle de la page. « Réinitialiser » demande confirmation avant de rétablir la palette par défaut.
« Mode concentration » affiche la palette et ses commandes sur une plus grande surface. Appuyez sur Escape ou utilisez « Quitter le mode concentration » pour revenir. La palette de travail repart de zéro au rechargement de la page. Utilisez « Enregistrer un préréglage » ou « Télécharger la palette » avant de partir.
Télécharger ou copier une collection de couleurs
Ouvrez le dialogue d’export avec « Télécharger les couleurs » dans « Couleurs d’image », ou « Télécharger la palette » dans « Créateur de palettes ». PNG, JPG et SVG créent une bande de nuances. « Inclure les codes HEX » et « Inclure les codes RGB » ajoutent les libellés correspondants à l’image.
JSON télécharge les valeurs de couleur sous forme de données structurées. « Copier CSS » copie des propriétés personnalisées numérotées, comme --color-1, utilisables dans la feuille de style d’un site. Pour PNG et JPG, réglez « Largeur (px) » entre 120 et 7680 pixels. La hauteur correspond au sixième de la largeur, arrondi au pixel entier. SVG utilise un espace de coordonnées de 1200 × 200.
L’image exportée contient les couleurs recueillies, pas la photo importée. Exportez avant de vider l’espace de travail si vous voulez un fichier distinct à conserver ou à partager.
Créer un dégradé
Ouvrez « Générateur de dégradés » et choisissez un type de dégradé. Un arrêt de couleur place une couleur à un endroit précis de la transition. Le déplacer change l’endroit où cette couleur apparaît.
| Type | Réglages |
|---|---|
| Linéaire | Déplacez les extrémités pour changer la direction. Faites glisser un point intermédiaire le long de la ligne pour déplacer sa couleur dans le dégradé. |
| Radial | Déplacez le centre dans la zone de direction, puis placez les couleurs sur la barre « Arrêts de couleur ». |
| Conique | Déplacez le centre et la poignée d’angle initial, ou saisissez un angle. Réglez les couleurs sur la barre des arrêts. |
| Multipoint | Placez des points de couleur distincts dans la zone et déplacez-les pour modifier le chevauchement des régions colorées. |
Cliquez dans une partie vide de la zone linéaire ou multipoint pour ajouter une couleur. Pour les dégradés radiaux et coniques, cliquez sur la barre des arrêts. Les types linéaire, radial et conique acceptent jusqu’à six arrêts. Le multipoint accepte jusqu’à dix points. Au moins deux sont conservés.
Cliquez sur un point pour modifier sa couleur. Un double-clic le supprime là où ce geste est pris en charge. Sur les appareils tactiles, les points linéaires et multipoints acceptent aussi un double appui. Pour supprimer un arrêt radial ou conique, maintenez sa poignée sans bouger. Vous pouvez aussi lui donner le focus avec Tab et appuyer sur Delete.
Ajouter une couleur linéaire redistribue les arrêts sur la ligne existante. « Inverser le dégradé » inverse leur ordre, tandis que « Réinitialiser la direction » rétablit la direction ou le centre du type actuel. L’aperçu s’actualise au fil des modifications.
« Dégradés prédéfinis » propose des compositions de départ. « Parcourir la bibliothèque » affiche une collection plus large avec un champ de recherche. Un préréglage remplace les réglages actuels du dégradé, après confirmation si nécessaire. Agrandissez l’aperçu avec sa commande dédiée pour mieux l’examiner, puis revenez avec Escape.
Utiliser le dégradé ailleurs
CSS fournit le dégradé utilisé dans l’aperçu. Copiez-le dans une déclaration background de votre feuille de style. SCSS fournit une variable contenant le dégradé, avec un exemple d’utilisation.
La sortie Tailwind simplifie le résultat en une direction linéaire et trois couleurs au maximum. Elle peut omettre les arrêts intermédiaires, les positions exactes et la forme d’un dégradé radial, conique ou multipoint. Utilisez CSS lorsque ces détails comptent.
SVG produit du balisage vectoriel pour un dégradé linéaire ou radial. Les dégradés coniques et multipoints sont remplacés par une approximation linéaire en SVG et auront donc un aspect différent. Le commentaire généré signale cette substitution.
« Télécharger le dégradé » exporte un PNG ou JPG de 1200 × 600 pixels. Le dialogue d’export permet aussi de copier du code CSS, Tailwind, SCSS ou SVG. Examinez l’image exportée à sa taille finale, car ses proportions peuvent différer de l’aperçu. Enregistrez l’image ou le code avant de partir, car le dégradé de travail n’est pas un préréglage enregistré.
Vérifier la lisibilité du texte
Ouvrez « Vérificateur de contraste ».
Saisissez les couleurs du texte et du fond sous forme de valeurs HEX à six chiffres, avec le #, ou choisissez chacune avec son sélecteur.
Lisez le rapport de contraste et les quatre résultats AA et AAA.
Si la paire ne satisfait pas au seuil, ajustez une couleur ou essayez « Ajuster à AA » ou « Ajuster à AAA », puis vérifiez à nouveau le résultat.
Par exemple, du texte noir sur blanc a un rapport de 21:1. Le blanc sur blanc donne 1:1. Plus le nombre est élevé, plus la différence de luminance est grande.
| Catégorie de texte | Minimum AA | Minimum AAA |
|---|---|---|
| Texte courant | 4.5:1 | 7:1 |
| Grand texte | 3:1 | 4.5:1 |
Les WCAG considèrent le texte comme grand à partir de 18 points, soit environ 24 pixels CSS, ou de 14 points en gras, soit environ 18,7 pixels CSS. Les quatre indicateurs montrent les deux catégories à la fois. Modifier la taille du texte dans l’aperçu ne change pas le rapport entre les couleurs.
Ces seuils viennent des recommandations WCAG sur le contraste minimal et des recommandations sur le contraste amélioré. Une paire conforme ne prouve pas qu’une page entière est accessible.
« Ajuster à AA » et « Ajuster à AAA » tentent d’éclaircir ou d’assombrir le texte sans changer le fond. Ces commandes visent les seuils du texte courant. Certaines paires ne peuvent pas être corrigées ainsi. Choisissez alors vous-même une autre couleur de texte ou de fond.
Utilisez une valeur complète comme #336699. Une valeur incomplète ou invalide laisse la dernière couleur acceptée en place. Le rapport est affiché avec deux décimales, mais le verdict utilise le calcul non arrondi.
Les filtres de couleur approximatifs changent seulement l’aperçu. Ce sont de simples effets visuels, pas une simulation fiable de la vision des couleurs d’une personne donnée. Ils ne changent pas le calcul du contraste.
Conserver des préréglages et les dernières couleurs
« Enregistrer un préréglage » enregistre une configuration nommée depuis « Sélecteur de couleur », « Couleurs d’image », « Créateur de palettes » ou « Vérificateur de contraste ». Saisissez un nom et appuyez sur « Enregistrer le préréglage ». « Préréglages » ouvre la liste enregistrée. Sur téléphone, utilisez le bouton en forme de signet. Sélectionnez un préréglage pour le rétablir dans l’outil correspondant.
Les préréglages sont stockés dans ce navigateur. Les préréglages d’image peuvent contenir l’image importée, ses couleurs et les positions d’échantillonnage. Ils ne sont pas partagés automatiquement avec un autre appareil et peuvent disparaître si vous effacez les données du navigateur. Téléchargez des copies des travaux importants.
« Supprimer » supprime un préréglage après confirmation. « Tout effacer » supprime la collection enregistrée après confirmation. Aucune de ces actions ne supprime les fichiers d’origine de votre appareil.
« Historique des couleurs » conserve jusqu’à 20 entrées récentes. Sélectionner une entrée copie sa valeur HEX et, dans « Sélecteur de couleur », applique aussi sa couleur. Vider l’historique des couleurs est indépendant de la suppression des préréglages.
Si le résultat semble incorrect
Si une image ne s’ouvre pas, essayez un JPG ou PNG plus petit. HEIC et HEIF disposent d’un décodeur supplémentaire. La prise en charge des autres variantes dépend du navigateur. Une seule image peut être ouverte à la fois.
Si les couleurs extraites ne représentent pas le détail recherché, cliquez dessus manuellement. Désactivez « Filtrer les teintes extrêmes » pour obtenir les couleurs proches du noir ou du blanc. Les suggestions automatiques représentent des groupes de couleurs échantillonnées. Leur moyenne peut donc ne correspondre à aucun pixel exact de l’image.
Si le dégradé copié diffère de l’aperçu, vérifiez le format de code choisi. Tailwind et certaines sorties SVG sont des approximations. CSS préserve le type de dégradé et les positions.
Si la copie est bloquée dans « Sélecteur de couleur » ou « Couleurs d’image », sélectionnez la valeur dans son champ de sortie et utilisez votre commande habituelle de copie. Pour une palette, exportez plutôt du JSON ou une image. Le traitement et les collections enregistrées restent dans le navigateur, mais son stockage ne remplace pas une sauvegarde.
Utiliser le clavier
| Action | Touches |
|---|---|
| Passer d’une commande à l’autre | Tab |
| Activer le bouton ayant le focus | Enter |
| Copier le texte sélectionné dans un champ de sortie |
MacCommand + C
Windows / LinuxCtrl + C
|
| Fermer l’historique, les préréglages, l’export ou l’aperçu du dégradéEscape quitte aussi le mode concentration de la palette. | Escape |
| Modifier l’arrêt radial ou conique ayant le focusDonnez d’abord le focus à la poignée avec Tab. | Enter ou Espace |
| Supprimer l’arrêt radial ou conique ayant le focusAu moins deux arrêts restent en place. Cela ne concerne pas les points de la zone linéaire. | Delete ou Backspace |
| Valider un nombre de couleurs ou une taille de texte saisisLorsque le champ numérique correspondant a le focus. | Enter |
La palette utilise les boutons « Annuler » et « Rétablir ». L’outil n’affecte pas Cmd + Z ou Ctrl + Z aux modifications de palette. Ces raccourcis fonctionnent toujours normalement pour modifier du texte.