Décalage de teinte
Décalez la teinte d'une couleur ou d'une image sur le cercle chromatique. Copiez les valeurs HEX, RVB ou TSL, ou téléchargez le résultat.
HEX, rgb(59, 130, 246) ou hsl(217, 91%, 60%)
#3B82F6 · Teinte 217°#513BF6 · Teinte 247°Faites glisser le point sur la roue pour définir le décalage.
Au-delà de 180°, la valeur repart au début de la roue : 270° équivaut à −90°.
+30° donne une couleur analogue, voisine de l'original sur la roue.
Fait tourner la teinte en HSL. La saturation et la luminosité restent identiques.
#513BF6rgb(81, 59, 246)hsl(247, 91%, 60%)Déposez une image ici ou choisissez un fichier
PNG, JPG, WebP, AVIF ou BMP, jusqu'à 30 Mo. L'image reste dans votre navigateur.
Vous pouvez aussi coller une image avec Ctrl+V ou Cmd+V.
Noter Décalage de teinte
Dans quelle mesure cet outil vous a-t-il été utile ? Votre note aide d'autres personnes à le trouver.
Décaler la teinte sans modifier la saturation ni la luminosité
La teinte est la part d'une couleur qui la nomme : rouge, orange, jaune, vert, bleu, violet. Un décalage de teinte fait tourner une couleur autour de la roue chromatique d'un nombre de degrés donné. Ce décaleur agit sur une couleur seule ou sur une image entière, et le résultat se met à jour quand vous déplacez le curseur.
Modifier la teinte d'une couleur
Saisissez ou collez une valeur HEX, RGB ou HSL, ou choisissez-en une avec le sélecteur de couleur. Déplacez ensuite le curseur, faites glisser le point sur la roue chromatique ou choisissez un angle rapide. L'outil affiche côte à côte la couleur d'origine et la couleur décalée, avec leurs angles de teinte, et vous copiez le résultat en HEX, RGB ou HSL.
- Les décalages vont de −180° à +180°. Une valeur plus grande revient au début de la roue.
- Avec la méthode HSL, la saturation et la luminosité restent identiques : la nouvelle couleur a la même intensité et la même clarté.
- Le gris, le noir et le blanc n'ont pas de teinte : ils ne changent pas.
Modifier la teinte d'une image
Passez en mode Image, puis déposez un fichier ou choisissez-en un. Chaque pixel tourne du même angle : un ciel bleu peut devenir vert ou orange tout en conservant ses détails. Les zones transparentes d'un PNG restent transparentes.
- Fonctionne avec les fichiers PNG, JPG, WebP, AVIF et BMP.
- L'image entière change. Pour recolorer un seul objet, sélectionnez-le d'abord dans un éditeur d'images.
- Aucun envoi : le traitement se fait dans votre navigateur.
Choisir un angle selon la relation de couleurs souhaitée
Certains angles donnent des paires de couleurs classiques. Utilisez-les comme point de départ, puis ajustez de quelques degrés jusqu'à ce que le résultat convienne à votre création.
| Décalage | Relation | Résultat |
|---|---|---|
| 30° | Analogue | Une voisine de l'original |
| 90° | Carré | Une partenaire à angle droit |
| 120° | Triadique | L'une des deux partenaires réparties régulièrement |
| 150° | Complémentaire scindée | Une couleur voisine de la complémentaire |
| 180° | Complémentaire | La couleur opposée |
Décalage HSL ou hue-rotate() CSS
La méthode par défaut fait tourner la teinte en HSL, la luminosité est donc conservée. Le filtre CSS hue-rotate() fonctionne différemment : il multiplie les valeurs RGB par une matrice fixe, et une couleur peut devenir beaucoup plus sombre ou plus claire après la rotation. Une rotation de 60° appliquée au rouge pur donne du jaune avec la méthode HSL, et un brun foncé avec la méthode CSS. Choisissez la méthode CSS lorsque le résultat doit correspondre à un filtre de feuille de style, et la méthode HSL lorsque vous voulez conserver la luminosité.
- Avec la méthode CSS activée, copiez filter: hue-rotate(30deg); directement dans votre CSS.
- Comparez les deux méthodes sur la même couleur avant de décider.
Quand un petit décalage de teinte est utile
Les designers et les artistes utilisent les décalages de teinte pour bien plus que le recoloriage. Un décalage de 5 à 15 degrés garde une couleur dans sa famille tout en ajoutant de la variété.
- Les peintres et les pixel artistes déplacent les ombres vers une teinte et les lumières vers une autre pour que l'ombrage paraisse moins plat.
- Les designers d'interface testent des couleurs d'accent en faisant tourner une couleur de marque de 30 degrés.
- Les artistes de jeux vidéo et de produits recolorent un sprite ou une photo sans le redessiner.
Comment fonctionne le décaleur de teinte
Comment le décalage de teinte est calculé
L'outil convertit la couleur en HSL (teinte, saturation, luminosité), ajoute votre angle à la teinte, puis reconvertit le résultat en RGB. La saturation et la luminosité ne sont pas modifiées. Un décalage de 0° ou de 360° renvoie exactement la couleur saisie.
Comment les images sont traitées
L'image est dessinée sur un canevas dans votre navigateur, et le même calcul s'applique à chaque pixel. Le canal alpha n'est pas modifié : les zones transparentes restent transparentes. L'aperçu est une copie plus petite pour que le curseur reste fluide. Le téléchargement est construit à partir de l'image complète.
Deux méthodes
- HSL : fait tourner la teinte et conserve la saturation et la luminosité. C'est la méthode par défaut.
- hue-rotate() CSS : applique la matrice de couleurs du filtre CSS du même nom. Utilisez-la lorsque le résultat doit correspondre à une feuille de style.
Tout fonctionne en local. Aucune couleur ni aucune image n'est envoyée.
Comment décaler la teinte d'une couleur ou d'une image
Ajoutez une couleur ou une image
Saisissez ou collez une valeur HEX, RGB ou HSL, ou passez en mode Image et déposez un fichier.
Réglez le décalage
Déplacez le curseur, faites glisser le point sur la roue ou choisissez un angle rapide.
Copiez ou téléchargez
Copiez le HEX, le RGB ou le HSL, ou téléchargez l'image décalée en PNG ou JPG.
Exemple d'utilisation
Un décalage de 180° transforme ce bleu en orange complémentaire.
Questions fréquentes
Qu'est-ce qu'un décalage de teinte ?
Comment modifier la teinte d'une une couleur ?
Comment modifier la teinte d'une image en ligne ?
Que fait une rotation de teinte de 180 degrés ?
Quelle différence avec hue-rotate() CSS ?
Un décalage de teinte modifie-t-il la saturation ou la luminosité ?
Pourquoi ma couleur noire, blanche ou grise ne change-t-elle pas ?
Puis-je modifier la teinte d'un seul objet dans une photo ?
Puis-je modifier la teinte d'un GIF ?
Quel angle dois-je utiliser ?
Ma couleur ou mon image est-elle envoyée ?
Pourquoi l'image téléchargée est-elle plus petite que l'original ?
Outils associés
Modifier la saturation d'une couleur
Modifiez la saturation d'une couleur.
Harmonie de couleurs triadique
Obtenez les couleurs de l'harmonie triadique.
Couleur complémentaire
Obtenez la couleur complémentaire.
Couleurs complémentaires divisées
Obtenez les couleurs complémentaires divisées.
Harmonie de couleurs analogues
Obtenez les couleurs de l'harmonie analogue.
Palette à partir d'une image
Importez une image pour en extraire la palette de couleurs dominante. Obtenez les codes HEX, RGB et HSL.
Commentaires
Les commentaires sont fournis par Disqus. Les charger vous connecte à Disqus, qui dépose des cookies et traite des données selon sa propre politique de confidentialité.
Décalage de teinte est maintenu par CodeItBro. Notre objectif est de proposer les meilleurs outils gratuits pour développeurs sur le web. Si vous avez des remarques ou des suggestions, rendez-vous sur notre page de contact.
