Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.
Points clés
Catégorie
Design
Types d’entrée
color, select, range, textarea, checkbox, text
Type de sortie
html
Exemples associés
4
API disponible
Oui
Aperçu
Le convertisseur de niveaux de gris est un outil de design précis permettant de transformer instantanément n'importe quelle couleur en une nuance de gris adaptée, grâce à une variété d'algorithmes de conversion et de réglages d'intensité personnalisables.
Quand l’utiliser
Vérifier le contraste et la lisibilité d'une palette de couleurs pour l'accessibilité.
Créer des variantes monochromes cohérentes pour des interfaces utilisateur ou des logos.
Tester l'impact visuel d'un design en supprimant les distractions liées aux couleurs.
Fonctionnement
1Saisissez votre couleur de base ou importez une liste de couleurs par lot.
2Sélectionnez une méthode de conversion, comme la luminosité pondérée ou la désaturation.
3Ajustez l'intensité du gris et les pondérations RVB si nécessaire pour affiner le rendu.
4Visualisez le résultat final avec l'option de comparaison côte à côte.
Cas d’usage
Optimisation de l'accessibilité web en testant le contraste des éléments UI.
Préparation de maquettes graphiques en noir et blanc pour valider les hiérarchies visuelles.
Génération rapide de palettes de nuances de gris pour des systèmes de design (Design Systems).
Exemples
1. Vérification de contraste UI
Designer UI/UX
Contexte
Un designer travaille sur une application mobile et doit s'assurer que les boutons d'action sont lisibles par les utilisateurs daltoniens.
Problème
Savoir si la couleur de fond et la couleur du texte conservent un contraste suffisant une fois converties en niveaux de gris.
Utilisation
Saisir les codes hexadécimaux des couleurs du bouton et du texte, puis utiliser la méthode 'Luminosité (Pondérée)'.
Résultat
Le designer obtient une version monochrome permettant de valider visuellement si le contraste est suffisant pour une lecture claire.
2. Création d'une gamme de gris pour une marque
Directeur Artistique
Contexte
Une marque souhaite décliner son identité visuelle en une série de nuances de gris pour ses supports imprimés.
Problème
Obtenir des gris qui respectent la luminance originale de la couleur de marque principale.
Utilisation
Utiliser le convertisseur avec la méthode 'Désaturation (TSL)' et ajuster l'intensité à 100%.
Résultat
FAQ
Quelles méthodes de conversion sont disponibles ?
L'outil propose plusieurs méthodes dont la moyenne simple, la luminosité pondérée, la désaturation TSL, ainsi que des options de décomposition par canal ou personnalisées.
Puis-je convertir plusieurs couleurs en une seule fois ?
Oui, utilisez le champ 'Couleurs par lot' pour saisir plusieurs codes hexadécimaux séparés par des virgules.
À quoi sert l'option de pondération personnalisée ?
Elle permet de définir manuellement l'importance des canaux rouge, vert et bleu dans le calcul final du gris, idéal pour des besoins graphiques spécifiques.
L'outil permet-il de comparer l'original et le résultat ?
Oui, en activant l'option 'Afficher la comparaison côte à côte', vous pouvez voir la couleur source et sa conversion en niveaux de gris simultanément.
Le résultat est-il exportable ?
Le résultat est généré sous forme HTML, vous permettant de visualiser et de copier facilement les valeurs hexadécimales converties.