Générateur de couleurs monochromatiques
Générez une palette monochromatique à partir d’une couleur de base avec ce générateur de couleurs monochromatiques. Saisissez un code hexadécimal de 3 ou 6 chiffres ; l’outil conserve la teinte et la saturation tout en faisant varier la luminosité de 30 et 15 points dans chaque direction, dans une plage de 10 à 90 pour cent. Il renvoie cinq nuances et tons clairs sous forme de codes hexadécimaux, avec votre couleur de base au milieu. Idéal pour les designers et les développeurs qui créent des échelles et des thèmes UI harmonieux et cohérents.
Foire aux questions
Que renvoie le générateur de couleurs monochromatiques ?
Il renvoie cinq couleurs sous forme de codes hexadécimaux minuscules à six chiffres. La couleur 3 est votre couleur de base ; les couleurs 1 et 2 sont des versions plus foncées, et les couleurs 4 et 5 des versions plus claires de la même teinte.
Comment les nuances sont-elles calculées ?
L’outil convertit votre code hexadécimal en HSL et ne modifie que la luminosité : moins 30, moins 15, plus 15 et plus 30 points de pourcentage. La teinte et la saturation restent identiques, de sorte que les cinq couleurs appartiennent à la même famille.
La luminosité a-t-elle une limite minimale ou maximale ?
Oui. Les étapes plus foncées ne descendent jamais sous 10 pour cent de luminosité, et les étapes plus claires ne dépassent jamais 90 pour cent ; l’échelle évite ainsi le noir pur et le blanc pur.
Pourquoi obtient-on des couleurs identiques ou inattendues avec des couleurs de base très foncées ou très claires ?
En raison des limites de 10 et 90 pour cent, les étapes proches des extrêmes se confondent. Pour #000000, les deux étapes plus foncées deviennent #1a1a1a, une couleur plus claire que la couleur de base ; pour #ffffff, les deux étapes plus claires deviennent #e6e6e6.
Quelle palette obtient-on avec du rouge pur ?
Pour #ff0000, l’outil renvoie #660000, #b30000, #ff0000, #ff4d4d et #ff9999. Le rouge se situe à 50 pour cent de luminosité ; il bénéficie donc de toute la plage, avec deux étapes plus foncées et deux plus claires.
Quels formats de couleur puis-je saisir ?
Saisissez un code hexadécimal de 3 ou 6 chiffres, avec ou sans le #, par exemple #3366cc ou 36c. Les notations RGB et HSL ainsi que les noms de couleurs ne sont pas acceptés ; convertissez-les d’abord en hexadécimal.
Pourquoi ma couleur de base ressort-elle légèrement modifiée ?
La teinte, la saturation et la luminosité sont arrondies à des nombres entiers ; la conversion en HSL puis en retour peut donc décaler un canal d’un cran. #ff5733, par exemple, apparaît sous la forme #ff5833 au milieu de l’échelle.
Est-ce que cela fonctionne avec les gris ?
Oui. Contrairement aux schémas fondés sur la teinte, une échelle monochromatique fait varier la luminosité ; un gris produit donc des gris plus clairs et plus foncés. Le noir et le blanc sont limités par la plage de 10 à 90 pour cent décrite ci-dessus.
Comment utiliser une palette monochromatique dans une interface ?
Utilisez les couleurs les plus foncées pour le texte et les bordures, la couleur de base pour les actions principales et les plus claires pour les arrière-plans et les états au survol. Vérifiez le contraste du texte avec un outil de vérification de contraste WCAG, car les étapes voisines ne diffèrent que de 15 points de luminosité.
Le résultat est-il identique à celui du générateur de palettes de couleurs ?
Oui. Cet outil reproduit exactement l’option monochromatique du générateur de palettes de couleurs ; les deux outils renvoient donc les mêmes cinq codes hexadécimaux pour une même couleur de base.