Générateur de Nuances de Couleur
FreeGénérez des nuances, teintes, tons, schémas de couleurs, et tous les formats de valeur (RGB, HSL, HSV, CMYK) pour n'importe quelle couleur, avec du code CSS prêt à copier.
Fonctionne entièrement dans votre navigateur.
Cliquez sur n'importe quel code hex ci-dessous pour le copier.
Valeurs de couleur
Nuances
mélangé vers le noirTeintes
mélangé vers le blancTons
mélangé vers le grisRépartition RVB
Répartition CMJN
Schémas de couleurs
Complémentaire
Triadique
Analogue
Monochrome
Inversé
Aperçu sur fond noir
Aperçu sur fond blanc
Code CSS
Activité récente
Visible par tous. Les 20 dernières utilisations de tous les visiteurs, les plus récentes en premier.
#3498DB
il y a 1 jour
#3498DB
il y a 1 jour
#3498DB
il y a 1 jour
#3498DB
il y a 3 semaines
Ce que fait cet outil
Prend une seule couleur et construit une page de référence complète autour d'elle : chaque format de valeur (HEX, RVB, TSL, TSV, CMJN, sûr pour le web), des bandes de nuance, teinte, et ton à 11 étapes, des répartitions en pourcentage RVB et CMJN, des schémas de couleurs complémentaire, triadique, analogue, monochrome, et inversé, un aperçu en direct sur noir et blanc, et des extraits CSS prêts à l'emploi, le tout généré instantanément et copiable en un clic.
Comment ça marche
Les nuances, teintes, et tons sont construits en mélangeant linéairement les canaux rouge, vert, et bleu de votre couleur vers le noir, le blanc, ou le gris moyen par paliers de 10%. Les schémas de couleurs fonctionnent plutôt dans le modèle TSL : complémentaire ajoute 180° à la teinte, triadique ajoute 120° et 240°, analogue décale la teinte de ±30°, et monochrome garde la teinte et la saturation fixes tout en balayant la luminosité, le tout s'enroulant correctement autour de la roue chromatique à 360°. TSV et CMJN sont calculés avec leurs propres formules standard directement à partir des valeurs RVB, et l'équivalent sûr pour le web arrondit chaque canal au plus proche des six paliers sûrs pour le web (0, 51, 102, 153, 204, 255).
Problèmes résolus
- Construire une palette complète de nuances/teintes à partir d'une seule couleur de marque pour les boutons, états de survol, et arrière-plans.
- Convertir une couleur entre HEX, RVB, TSL, TSV, et CMJN sans ouvrir une application de design.
- Trouver un schéma de couleurs complémentaire, triadique, ou analogue pour un design sans deviner sur la roue chromatique.
- Vérifier comment une couleur se lit en tant que texte sur un fond noir ou blanc uni avant de s'y engager.
- Récupérer du CSS tout prêt pour une couleur de fond, de texte, de bordure, ou d'ombre sans le taper à la main.
Questions fréquentes
›Quelle est la différence entre une nuance, une teinte, et un ton ?
Ce sont les trois façons classiques de modifier une couleur tout en gardant sa teinte reconnaissable. Une nuance mélange la couleur avec du noir, la rendant plus sombre. Une teinte la mélange avec du blanc, la rendant plus claire et douce. Un ton la mélange avec du gris, l'atténuant sans la pousser vers le noir ou le blanc pur. Cet outil génère les trois sous forme de bande à 11 étapes, de la couleur d'origine jusqu'à 0%.
›Comment les nuances et teintes sont-elles réellement calculées ?
Chaque étape mélange les canaux rouge, vert, et bleu de votre couleur vers la cible (noir, blanc, ou gris) selon un pourcentage fixe, la même approche simple d'interpolation linéaire utilisée par la plupart des outils de référence de couleur, plutôt que d'ajuster la luminosité en HSL. Cela maintient la progression visuellement régulière et correspond à ce que vous obtiendriez en mélangeant de la peinture ou de l'encre vers le noir, le blanc, ou le gris.
›Quelle est la différence entre Complémentaire et Inversé ?
Complémentaire fait tourner uniquement la teinte de 180° sur le cercle chromatique tout en gardant la même saturation et luminosité, donc un rouge vif devient un cyan tout aussi vif, c'est la « couleur opposée » utilisée en théorie des couleurs et en design. Inversé inverse plutôt chaque valeur rouge, verte et bleue (255 moins l'original), ce qui change aussi la luminosité, le blanc devient noir par inversion, mais reste blanc avec l'opération complémentaire puisqu'il n'y a pas de teinte à faire tourner.
›Que sont les schémas triadique, analogue, et monochrome ?
Triadique choisit deux autres couleurs espacées uniformément de 120° sur la roue chromatique, donnant trois couleurs à fort contraste qui restent équilibrées ensemble. Analogue choisit des couleurs à 30° de chaque côté de votre teinte, des couleurs qui se trouvent l'une à côté de l'autre sur la roue et paraissent naturellement harmonieuses. Monochrome conserve la teinte et la saturation exactes de votre couleur mais ne fait varier que la luminosité, donnant un ensemble de couleurs garanties assorties puisqu'il s'agit en réalité de la même couleur à différents niveaux de luminosité.
›Que signifie « Sûr pour le web » ?
Les 216 couleurs sûres pour le web sont la palette qui s'affichait de manière identique sur les anciens écrans 256 couleurs, chaque canal rouge, vert, et bleu limité à l'une des six valeurs (0, 51, 102, 153, 204, 255). Les écrans modernes n'ont pas besoin de cette restriction, mais l'équivalent sûr pour le web reste utile comme référence pour un style rétro ou une sortie couleur extrêmement limitée.
›Pourquoi les valeurs TSV et CMJN semblent-elles différentes de TSL ?
TSL, TSV, et CMJN décrivent tous la même couleur à travers différents modèles conçus pour différents usages. TSL et TSV décrivent tous deux la teinte, et la différence entre la « valeur » de TSV et la « luminosité » de TSL signifie que la même couleur peut rapporter un pourcentage de saturation différent entre les deux. CMJN décrit la quantité d'encre cyan, magenta, jaune, et noire qu'une imprimante mélangerait, ce qui suit des règles de couleur soustractive au lieu des règles de lumière additive rouge, verte, et bleue qu'utilisent RVB et TSL/TSV, ce n'est donc pas une simple conversion directe.
›Puis-je copier les couleurs générées et le CSS ?
Oui. Cliquez sur n'importe quel code hex dans la ligne Valeurs de couleur, dans n'importe quel échantillon de nuance, teinte, ton, ou schéma de couleur, pour le copier dans votre presse-papiers. La section Code CSS en bas a des règles background-color, color, border-color, et box-shadow toutes prêtes avec leurs propres boutons de copie.
Outils similaires
Image
Schéma de Couleurs Analogues
Générez une palette de couleurs analogues harmonieuse à partir de n'importe quelle couleur de base, directement dans votre navigateur.
FreeImage
Mélanger les Couleurs
Mélangez deux couleurs avec un équilibre ajustable, en utilisant un mélange RVB simple, corrigé en gamma, ou HSL.
FreeImage
Flouter une Image
Floutez une image dans votre navigateur en utilisant un flou de boîte, gaussien, de mouvement, ou radial, puis téléchargez le résultat.
FreeImage
Générateur d'Images à Cadre Flou
Adaptez votre photo à un carré ou un autre rapport d'aspect sans recadrage, en remplissant l'espace supplémentaire avec une copie floutée et zoomée de l'image.
Commentaires (0)
Cet outil vous a-t-il été utile ? Laissez un commentaire, partagez une astuce, ou dites-nous comment nous pourrions l'améliorer.
Pas encore de commentaires. Soyez le premier à partager votre avis !