Catégories

Décaleur de Teinte de Couleur

Ajustez la teinte des couleurs et créez des variations avec des contrôles de rotation horaire/antihoraire

Points clés

Catégorie: Design
Types d’entrée: color, select, range, number, checkbox
Type de sortie: html
Couverture des échantillons: 2
API disponible: Yes

Vue d’ensemble

Le Décaleur de Teinte de Couleur est un outil de précision conçu pour manipuler la roue chromatique, vous permettant d'ajuster facilement la teinte de vos couleurs de base et de générer des palettes harmonieuses en quelques clics.

Quand l’utiliser

•Pour créer des variations de couleurs cohérentes à partir d'une teinte principale pour vos interfaces utilisateur.
•Pour générer rapidement des schémas de couleurs complémentaires ou des dégradés basés sur une rotation de teinte spécifique.
•Pour ajuster précisément la tonalité d'une couleur tout en conservant sa luminosité et son intensité d'origine.

Comment ça marche

•Sélectionnez votre couleur de base via le sélecteur intégré.
•Choisissez le type d'ajustement souhaité, comme une rotation horaire, antihoraire ou la création d'un dégradé complet.
•Ajustez la valeur du décalage en degrés ou définissez le nombre d'étapes pour générer une séquence de couleurs.
•Appliquez des options supplémentaires comme la préservation de la luminosité pour garantir une uniformité visuelle.

Cas d’usage

Création de systèmes de design (Design Systems) avec des variations de teintes pour les états de survol ou les boutons.

Génération automatique de palettes de couleurs pour des graphiques ou des visualisations de données.

Expérimentation rapide de thèmes chromatiques pour des projets graphiques sans modifier la saturation ou la luminosité.

Exemples

1. Création d'une palette de boutons

Designer UI

Contexte: Un designer doit créer des variantes de couleurs pour les états 'actif' et 'survol' d'un bouton bleu.
Problème: Trouver des teintes harmonieuses qui conservent la même luminosité que la couleur de marque.
Comment l’utiliser: Sélectionner la couleur de base, choisir une rotation horaire de 30° et activer la préservation de la luminosité.
Configuration d’exemple: baseColor: #4A90E2, adjustmentType: clockwise, adjustmentValue: 30, preserveValue: true
Résultat: Une nouvelle teinte harmonieuse est générée, parfaite pour un état de survol cohérent avec l'identité visuelle.

2. Génération d'un dégradé de données

Data Analyst

Contexte: Besoin de générer 10 couleurs distinctes pour un graphique à secteurs afin de représenter différentes catégories.
Problème: Créer une séquence de couleurs équilibrée qui couvre tout le spectre chromatique.
Comment l’utiliser: Utiliser le mode 'Dégradé (Roue complète)' avec 10 étapes pour obtenir une répartition uniforme.
Configuration d’exemple: adjustmentType: gradient, steps: 10
Résultat: Une série de 10 couleurs réparties uniformément sur la roue chromatique, assurant une lisibilité optimale du graphique.

Tester avec des échantillons

design

Exemples de codes couleur

Collection de codes de couleur dans différents formats (Hex, RGB, HSL, couleurs nommées) pour les tests de validation

title token color

sample

Exemples PDF

Exemples PDF generes par les outils du 2026-02-01 au 2026-02-10

task generate

sample

Hubs associés

Outils Design pour Generate

Découvrez 19 outils design pour des workflows de generate et comparez rapidement des utilitaires proches.

Outils Design pour Convert

Découvrez 98 outils design pour des workflows de convert et comparez rapidement des utilitaires proches.

Outils Json pour Generate

Découvrez 33 outils json pour des workflows de generate et comparez rapidement des utilitaires proches.

Outils Pdf pour Generate

Découvrez 10 outils pdf pour des workflows de generate et comparez rapidement des utilitaires proches.

FAQ

Puis-je conserver la luminosité de ma couleur d'origine ?

Oui, en activant l'option 'Préserver la Valeur de Luminosité', l'outil ajuste uniquement la teinte tout en maintenant la valeur de luminosité constante.

Quelle est la différence entre une rotation horaire et antihoraire ?

La rotation horaire déplace la teinte vers la droite sur la roue chromatique (vers les tons chauds ou froids selon la position), tandis que l'antihoraire déplace la teinte vers la gauche.

Comment générer un dégradé complet ?

Sélectionnez l'option 'Dégradé (Roue complète)' et définissez le nombre d'étapes souhaité entre 2 et 20 pour obtenir une séquence de couleurs répartie sur 360 degrés.

L'outil inclut-il automatiquement les couleurs complémentaires ?

Oui, vous pouvez activer l'option 'Inclure Couleurs Complémentaires' pour générer automatiquement la couleur opposée sur la roue chromatique.

Le décalage de teinte est-il précis ?

Absolument, vous pouvez définir le décalage exact en degrés (de 0° à 360°) avec un pas de 5° pour un contrôle total sur le résultat final.

Documentation de l'API

Point de terminaison de la requête

POST /fr/api/tools/color-hue-shifter

Paramètres de la requête

Nom du paramètre	Type	Requis	Description
baseColor	color	Oui	-
adjustmentType	select	Oui	-
adjustmentValue	range	Non	Quantité de décalage de teinte pour la rotation des couleurs (0° à 360°)
steps	number	Non	Ne s'applique que lorsque "Dégradé (roue complète)" est sélectionné. Contrôle le nombre de couleurs à générer dans la séquence de dégradé de teinte (2-20 étapes)
includeComplementary	checkbox	Non	-
preserveValue	checkbox	Non	-

Format de réponse

{
  "result": "Processed HTML content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

HTML: HTML

Documentation de MCP

Ajoutez cet outil à votre configuration de serveur MCP:

{
  "mcpServers": {
    "elysiatools-color-hue-shifter": {
      "name": "color-hue-shifter",
      "description": "Ajustez la teinte des couleurs et créez des variations avec des contrôles de rotation horaire/antihoraire",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-hue-shifter",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Vous pouvez chaîner plusieurs outils, par ex.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 outils.

Si vous rencontrez des problèmes, veuillez nous contacter à [email protected]