Qu'est-ce qu'un générateur de nuances de couleur ?
Un générateur de nuances de couleur prend une couleur de base et construit une échelle monochromatique de versions plus claires et plus foncées de celle-ci À partir d'une seule entrée telle que #4466EE, il produit une rangée de teintes qui se dirigent vers le blanc, une rangée de nuances qui se dirigent vers le noir et une rangée de tons qui se dirigent vers le gris Chaque swatch est une vraie couleur que vous pouvez copier en HEX, RVB ou HSL et passer directement dans CSS, un fichier de conception ou une configuration de thème.
Les trois échelles proviennent des définitions classiques utilisées dans la théorie des couleurs Une teinte est la couleur de base mélangée au blanc, qui élève sa légèreté tout en gardant la même teinte Une teinte est la base mélangée au noir, qui l'assombrit Un ton est la base mélangée au gris, qui réduit son intensité et donne une version muette, plus sophistiquée, de la couleur Avoir les trois à partir d'une seule entrée est ce qui vous permet de construire une palette cohérente : un bouton et son état de vol stationnaire, un ensemble de séries de graphiques, ou les surfaces claires et sombres d'une interface, toutes dérivées d'une seule couleur de marque.
Le générateur fonctionne entièrement dans votre navigateur La couleur que vous saisissez est analysée et les échelles sont calculées avec JavaScript côté client, donc rien n'est téléchargé, il n'y a pas de compte et votre travail n'est jamais suivi. Il accepte les noms de couleurs HEX, rgb (), hsl () et CSS courants, vous permet de définir le nombre d'étapes que contient chaque échelle et met à jour chaque échantillon instantanément. Une fois que la page est chargée, elle fonctionne hors ligne.
Comment utiliser le générateur de nuances de couleur ?
Entrez une couleur de base
Tapez ou collez une couleur dans n'importe quelle syntaxe courante : un code HEX comme #4466EE, une valeur rgb () ou hsl (), ou un nom de couleur CSS comme teal.
Définissez le nombre d'étapes
Choisissez le nombre de variations que chaque échelle doit contenir Plus d'étapes donnent un dégradé plus fin de la base vers le blanc, le noir ou le gris.
Passez en revue les teintes, les nuances et les tons
L'outil montre trois échelles côte à côte, chaque échantillon étant étiqueté avec sa valeur HEX et le pourcentage mélangé à la couleur cible.
Copiez la couleur dont vous avez besoin
Cliquez sur n'importe quel swatch pour copier sa valeur Changez le format de copie entre HEX, RVB et HSL pour correspondre à la syntaxe attendue par votre projet.
Principales caractéristiques
Teintes, nuances et tons
Une couleur de base produit trois écailles complètes à la fois : des teintes plus claires, des nuances plus foncées et des tons sourds vers le gris.
Chaque valeur copiable
Chaque swatch est disponible sous forme HEX, RVB et HSL, vous pouvez donc le coller directement dans CSS, un outil de conception ou un fichier thématique.
Étapes réglables
Réglez de 2 à 20 étapes par échelle pour contrôler la finesse du dégradé entre la couleur de base et le blanc, le noir ou le gris.
Entrée pardonnante
Accepte les valeurs HEX, rgb () et hsl () à 3 et 6 chiffres, et les noms de couleurs CSS courants, tous normalisés aux mêmes échantillons.
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Comments
0 comments
No comments yet. Be the first to share your thoughts!