Pour extraire une palette de couleurs d’une image, ouvrez Pipette et palette et ajoutez l’image — un logo, une photo de produit, une vue de votre vitrine. L’outil trouve les couleurs dominantes de l’image (entre trois et seize, six par défaut), donne chacune en HEX, RGB, HSL, HSV, OKLCH et CMJN approximatif, et exporte la palette en variables CSS, en JSON, en fichier de nuancier .ase pour les logiciels de graphisme et en image de nuancier.
La palette n’est qu’un début. Cet article montre comment l’extraire, quelle notation de couleur utiliser où, comment garder un texte lisible dans vos couleurs, pourquoi une même couleur diffère à l’écran et sur papier, et comment exploiter la palette dans d’autres outils.
Comment extraire une palette de couleurs d’une image
- 1
Choisir une bonne image de départ
Une image par traitement. Un logo ou un graphisme aux aplats de couleur donne des valeurs exactes ; une photo donne les couleurs qui la dominent, souvent ce qu’il faut pour une ambiance ou le thème d’une présentation. Pour une image animée, la première image est utilisée.
- 2
Régler le nombre de couleurs et l’ordre
Choisissez combien de couleurs extraire et comment les trier : Les plus fréquentes d’abord, Du clair au foncé ou Par teinte. Moins de couleurs donnent une palette plus calme ; davantage montrent les nuances.
- 3
Prélever des couleurs exactes là où c’est important
La palette regroupe les pixels semblables : ses couleurs sont représentatives, pas prises à un endroit précis. Avec la pipette, vous lisez au contraire la valeur exacte de n’importe quel pixel — utile pour le bleu précis d’un logo.
- 4
Choisir les fichiers à créer
Sous Fichiers à créer : variables CSS (.css), JSON (.json), un fichier d’échange de nuancier (.ase) et une image de nuancier (.png). Avec un préfixe pour les noms de variables CSS, par exemple
marque, vous obtenez--marque-1,--marque-2, etc. - 5
Copier ou télécharger
Copiez une valeur, ou téléchargez les fichiers et transmettez-les à la personne qui réalise votre site, vos diapositives ou vos imprimés.
HEX, RGB, HSL et autres : quelle valeur de couleur utiliser où
| Notation | À quoi elle sert |
|---|---|
| HEX | Sites web, CSS, la plupart des champs de couleur des applications et des logiciels de présentation — y compris ceux des outils de SchweizerIMG |
| RGB | Conception pour l’écran et logiciels qui demandent rouge, vert et bleu séparément |
| HSL | Créer des nuances plus claires et plus foncées d’une couleur, car la luminosité est une valeur à part |
| HSV | Sélecteurs de couleur qui travaillent avec teinte, saturation et valeur |
| OKLCH | CSS moderne ; sa luminosité suit la perception de l’œil, ce qui aide à obtenir des dégradés réguliers |
| CMJN (approximatif) | Une première idée des pourcentages d’encre — pas une valeur prête pour l’impression (voir plus bas) |
Toutes les valeurs se rapportent à l’espace colorimétrique sRGB, l’espace courant du web. Si une photo utilise un profil plus étendu, elle est d’abord convertie en sRGB et les couleurs très saturées sont écrêtées ; le rapport de l’outil le signale.
Vérifier le contraste avant d’utiliser la palette pour du texte
Une palette tirée d’une belle photo contient souvent plusieurs tons moyens qui vont bien ensemble mais se lisent mal l’un sur l’autre. Les Règles pour l’accessibilité des contenus web (WCAG) 2.2 fixent au niveau AA des rapports de contraste minimaux : 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille (au moins 18 points, ou 14 points en gras). Les composants d’interface et les graphiques nécessaires à la compréhension demandent 3:1 par rapport aux couleurs adjacentes. Le texte qui fait partie d’un logo n’a pas d’exigence de contraste.
Pipette et palette fournit des valeurs exactes, mais ne calcule pas de rapports de contraste. Saisissez les valeurs HEX d’une couleur de texte et de son fond dans un vérificateur de contraste avant de retenir une paire. Quelques règles pratiques :
- Associer les extrêmes pour le texte courant. La couleur la plus foncée de la palette sur la plus claire est en général le choix le plus sûr.
- Garder les tons moyens vifs pour les accents — grands titres, boutons (après vérification du contraste), lignes et icônes.
- Trier du clair au foncé pour voir d’un coup d’œil quelles couleurs peuvent porter du texte et lesquelles vont en arrière-plan.
- Vérifier dans les deux sens si votre site ou vos diapositives ont une version sombre : un texte clair sur une couleur foncée est une paire à part.
Écran et impression : pourquoi une même couleur diffère
Les écrans mélangent de la lumière rouge, verte et bleue ; les imprimantes déposent des encres cyan, magenta, jaune et noire sur du papier. Les deux ne peuvent pas reproduire exactement la même gamme de couleurs, et toutes deux varient — d’un écran à l’autre, d’un papier couché à un papier non couché. Un bleu de marque lumineux à l’écran peut paraître plus terne à l’impression. Combien de pixels il faut pour imprimer est une autre question, traitée dans pixels, DPI et taille d’impression.
- Les valeurs CMJN sont approximatives. Elles viennent d’une formule simple, sans profil d’encre ni de papier. Utilisez-les comme point de départ, pas comme consigne d’impression ; SchweizerIMG ne crée pas de fichiers CMJN.
- Définir les couleurs de marque une fois par support. Fixez une valeur HEX pour l’écran et faites déterminer les valeurs d’impression correspondantes par votre imprimerie ou votre graphiste, avec une épreuve.
- Noter les valeurs. Rangez le fichier CSS ou JSON exporté avec vos documents de marque, pour que chaque nouvelle présentation et chaque page web utilisent les mêmes couleurs.
Utiliser la palette dans Agrandir le canevas, Ajouter une bordure et Filigrane
Les champs de couleur des outils de SchweizerIMG acceptent les valeurs HEX ; une palette passe donc directement dans vos images :
- *Agrandir le canevas* — couleur de remplissage : placer des photos de produits ou d’équipe sur un carré ou un rapport fixe dans votre couleur de marque plutôt qu’en blanc. Le déroulement pour toute une boutique est décrit dans préparer les photos de produits pour votre boutique en ligne.
- *Ajouter une bordure* — couleur de la bordure, couleur entre les lignes d’un cadre double et couleur de la légende d’un cadre polaroïd : un cadre uniforme pour les publications sur les réseaux sociaux ou une présentation.
- *Filigrane* — couleur du texte, du contour et de l’ombre : une marque dans votre couleur de marque, lisible sur les photos claires comme sombres. Ce qu’un filigrane protège ou non est expliqué dans ce que protège un filigrane.
Ce sont des outils de transformation et d’édition ; la palette elle-même figure parmi les outils d’analyse. Un résultat peut passer d’un outil au suivant sans téléchargement intermédiaire — voir enchaîner les outils.
Les agences extraient souvent des palettes de contenus pas encore publics : le nouveau logo d’une cliente, le visuel clé d’une campagne, des photos de produits avant le lancement. SchweizerIMG lit l’image dans votre navigateur ; elle n’est jamais envoyée ni stockée chez nous, et à chaque traitement notre serveur ne reçoit que l’outil et le résultat. Plus d’informations sur la page sécurité et sur outils d’image pour les agences marketing et web.
Questions fréquentes
Combien de couleurs une palette de marque doit-elle compter ?
Il n’y a pas de nombre fixe. Beaucoup de marques travaillent avec une ou deux couleurs principales, une couleur d’accent et quelques tons neutres. Extrayez plus de couleurs que nécessaire — jusqu’à seize — et gardez celles qui portent la marque ; les autres servent aux fonds et aux graphiques.
Pourquoi une couleur de la palette diffère-t-elle du pixel que j’ai choisi ?
La palette regroupe les pixels semblables et donne une couleur représentative pour chaque groupe, pondérée selon la part de l’image qu’il couvre. La pipette lit un seul pixel exactement. Si une image n’a pas plus de couleurs distinctes que vous n’en avez demandé — un logo en aplats, par exemple –, la palette contient exactement ces couleurs.
Puis-je importer la palette dans un logiciel de graphisme ou de présentation ?
Beaucoup de logiciels de graphisme importent les fichiers de nuancier .ase. Pour des diapositives, l’image de nuancier (.png) est la référence la plus rapide, et la valeur HEX de chaque couleur peut être saisie dans le champ de couleur du logiciel. Le fichier CSS sert aux sites web, le fichier JSON aux développeurs.
Les valeurs CMJN sont-elles prêtes pour l’impression ?
Non. Ce sont des approximations non calibrées, sans profil d’encre ni de papier. Pour l’impression, demandez à votre imprimerie ou à votre graphiste les valeurs adaptées au papier et au procédé d’impression.
Essayez avec votre logo : commencez par votre premier outil, voyez sur la page des tarifs quels plans incluent Pipette et palette, ou créez un compte.
Information générale
Cette page est une information générale et un contenu marketing. Elle simplifie les critères de contraste des WCAG 2.2 et les différences entre couleurs d’écran et d’impression, qui dépendent des appareils, du papier et du procédé d’impression. Pour un audit d’accessibilité de votre site ou des couleurs de marque prêtes pour l’impression, veuillez consulter un ou une spécialiste qualifié·e.