À quoi sert un sélecteur de couleurs
Un sélecteur de couleurs lit la couleur du pixel à un emplacement donné d'une image et renvoie sa valeur. Quand vous repérez une belle couleur dans une image et que vous voulez connaître sa valeur exacte, il suffit d'un clic avec le sélecteur.
Usages courants :
- Extraire la couleur de marque (couleur principale d'un logo)
- Référence de palette (extraire une palette d'une belle photo)
- Reproduire une couleur (prélever une couleur sur une maquette de design, la répliquer dans le code)
- Débogage (vérifier la couleur réelle d'une zone d'une image)
Les différents formats de couleur
Le sélecteur de couleurs produit différents formats, adaptés à différents usages :
HEX (hexadécimal)
Par exemple #FF5733. Le plus courant, universel en CSS et dans les logiciels de design. Les 6 chiffres représentent les composantes rouge, vert et bleu.
RGB
Par exemple rgb(255, 87, 51). Rouge, vert et bleu, chacun de 0 à 255. Couramment utilisé en CSS.
HSL
Par exemple hsl(11, 100%, 60%). Teinte, saturation, luminosité. Plus intuitif pour ajuster les couleurs : changer la teinte change la couleur, changer la saturation modifie l'intensité.
HSV/HSB
Similaire à HSL, utilisé par certains logiciels de design.
CMYK
Pour l'impression, proportions des quatre encres. L'échantillonnage à l'écran ne donne généralement pas directement de CMYK.
Le frontend utilise surtout HEX ou RGB, le réglage des couleurs en design est plus intuitif avec HSL.
Étapes d'utilisation du sélecteur de couleurs
- Importez une image avec l'outil sélecteur de couleurs d'image
- Déplacez la souris sur l'emplacement dont vous voulez prélever la couleur
- La valeur de couleur du pixel s'affiche en temps réel
- Cliquez pour verrouiller la couleur et copier la valeur
- Prélevez plusieurs couleurs pour composer une palette
Astuces de prélèvement de couleurs
Prélever la couleur dominante
Couleur principale de toute l'image, à prélever sur la zone de plus grande surface. C'est la base de la palette.
Prélever la couleur d'accent
Trouvez la couleur la plus vive et la plus saillante de l'image, souvent utilisée comme couleur d'accent (boutons, liens).
Prélever plusieurs couleurs pour composer une palette
Une image harmonieuse permet d'extraire 4 à 6 couleurs pour composer une palette : couleur principale, couleur secondaire, couleur d'accent, couleur de fond, couleur de texte.
Éviter de prélever le bruit
En agrandissant l'image, on voit les grains de pixels ; un pixel isolé peut être affecté par le bruit de compression. Pour un échantillonnage plus précis, prenez la moyenne d'une zone un peu plus large, ou prélevez plusieurs pixels voisins pour vérifier la cohérence.
Dégradé : prélever aux deux extrémités
Pour un dégradé, prélevez les couleurs de début et de fin, les couleurs intermédiaires s'obtiennent par interpolation.
Applications de l'extraction de palette
Prélever la couleur d'un logo de marque
Le logo d'une entreprise contient généralement la couleur principale de marque. Après échantillonnage, appliquez-la au site web, aux présentations, aux affiches pour maintenir une cohérence visuelle.
Extraire une palette d'une photo
Quand vous voyez une photo avec de belles teintes (par exemple un paysage), extrayez les couleurs principales pour composer une palette à utiliser dans vos propres créations afin de reproduire cette atmosphère.
Reproduire une maquette de design
Une maquette de design est une image, le frontend doit en reproduire les couleurs. Utilisez le sélecteur de couleurs pour prélever les couleurs de la maquette et les reporter dans le CSS.
Pièges courants
Incohérence d'affichage des couleurs
Les gamuts et températures de couleur diffèrent d'un écran à l'autre, une même couleur peut s'afficher différemment. Pour l'échantillonnage, fiez-vous à la valeur de couleur, pas à l'œil nu.
Prélèvement d'artefacts de compression
La compression JPEG produit du bruit de couleur, en particulier sur les bords. Évitez de prélever aux bords et zones de transition, prélevez plutôt au centre des aplats de couleur unie.
Échantillonnage des pixels transparents
La valeur de couleur des zones transparentes d'un PNG peut être inexacte (les pixels transparents ont une couleur mais sont invisibles). Vérifiez que l'emplacement est opaque avant de prélever.
Écart de couleur à l'impression
Échantillonnage en RGB à l'écran, impression en CMYK : les couleurs changent. Pour un design destiné à l'impression, n'utilisez pas directement les couleurs prélevées à l'écran, effectuez une conversion de gestion des couleurs.
Recommandations de palette
- 1 couleur principale : 60 % de la surface
- 1 à 2 couleurs secondaires : 30 %
- 1 couleur d'accent : 10 %
- Couleurs neutres (noir, gris, blanc) : texte, fond
Après échantillonnage, répartissez les couleurs selon ces proportions pour une palette harmonieuse et sans confusion.
Résumé
Le sélecteur de couleurs est un petit outil pour extraire des couleurs d'une image. Prélevez la couleur principale, secondaire et d'accent pour composer une palette, puis appliquez-la à vos designs pour garder une cohérence. Veillez à éviter le bruit et les artefacts de compression, prélevez au centre des aplats de couleur. Le frontend utilise HEX/RGB, le réglage des couleurs utilise HSL. Le sélecteur DocsAll traite côté navigateur, les images ne sont pas téléchargées, l'échantillonnage des maquettes de design ne fuit pas.