Générez une palette triadique depuis une couleur hexadécimale
Saisissez #336699 et obtenez ses deux compagnes triadiques, #993366 et #669933, tournées de 120 et 240 degrés sur le cercle chromatique. Saturation et luminosité restent identiques, et les trois couleurs forment une seule famille. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Couleur
- #336699
- Couleur de base
- #336699
- Couleurs triadiques
- #993366, #669933
- Palette
- #336699, #993366, #669933
- Décalages de teinte
- 120, 240
Ce générateur de palette triadique part d’une couleur hexadécimale et calcule les deux teintes situées exactement à 120 et 240 degrés sur le cercle chromatique. Il conserve la saturation et la luminosité de la couleur de base afin de produire une famille équilibrée de trois couleurs, sans choix aléatoire ni calcul manuel. Saisissez une valeur hexadécimale standard de trois ou six chiffres, avec ou sans dièse initial. Le résultat comprend la base normalisée, les deux couleurs générées, la palette complète et les décalages de teinte. Un format incorrect déclenche une erreur de saisie claire, ce qui convient aussi bien au travail de conception interactif qu’aux traitements automatisés.
Fonctionnement de la génération triadique
Une palette triadique réunit trois teintes régulièrement réparties dans un modèle chromatique circulaire. Imaginez les sommets d’un triangle équilatéral placés sur un cercle chromatique : chaque déplacement couvre 120 degrés. Le générateur commence par valider et normaliser la couleur hexadécimale.
La notation à trois caractères est développée sur six, de sorte que #369 devient #336699, et les lettres passent en minuscules pour garantir une sortie prévisible. Les canaux rouge, vert et bleu sont ensuite convertis en teinte, saturation et luminosité. Seule la teinte tourne : une couleur reçoit 120 degrés et l’autre 240, avec un retour correct après 360.
La saturation et la luminosité restent identiques, ce qui préserve l’intensité générale. Enfin, les deux couleurs HSL sont reconverties en notation hexadécimale à six chiffres. La réponse distingue les deux valeurs calculées de la palette complète.
Aucun hasard, réseau, horloge ni état enregistré n’intervient ; une même entrée produit donc toujours la même sortie.
Choisir et employer les couleurs générées
Partez d’une couleur de base qui possède déjà un rôle, par exemple la couleur principale d’une marque, l’ancrage d’une illustration ou un accent d’interface. Les trois couleurs sont équilibrées mathématiquement, mais elles ne doivent pas nécessairement occuper la même surface visuelle. Une composition efficace laisse souvent la base dominer, utilise une couleur associée pour les éléments secondaires et réserve la troisième aux petites mises en évidence.
Vérifiez séparément le contraste du texte, car l’harmonie des teintes ne garantit pas la lisibilité. Les trois couleurs conservant la même luminosité HSL, leur clarté perçue peut varier fortement, notamment entre le jaune et le bleu. Considérez donc la triade comme un point de départ et créez des variantes plus claires ou plus sombres pour les états et les surfaces.
Avec un gris, les couleurs associées restent grises, car une saturation nulle ne possède aucune teinte visible à faire tourner.
Formats acceptés, erreurs et automatisation
Seuls trois ou six chiffres hexadécimaux sont acceptés, avec un dièse initial facultatif, par exemple #f06, f06, #ff0066 ou FF0066. Les espaces extérieurs sont supprimés avant la validation. Les noms CSS, fonctions RGB ou HSL, valeurs hexadécimales avec canal alpha, préfixes 0x, chaînes vides, nombres et caractères non hexadécimaux sont refusés.
Ces règles strictes empêchent toute interprétation ambiguë. Après génération, contrôlez le contraste, les significations culturelles et la hiérarchie de marque selon le contexte final.
Cas d’usage
Créer des accents de marque
Transformez une couleur hexadécimale de marque en deux accents équilibrés pour les campagnes, illustrations et éléments d’identité.
Construire des jetons de couleur
Générez des candidats déterministes pour les jetons secondaires et tertiaires à partir d’une couleur principale d’interface.
Préparer les couleurs de graphiques
Créez une palette initiale de trois teintes pour les tableaux de bord, puis contrôlez le contraste et l’accessibilité.
Questions fréquentes
Qu’est-ce qu’une palette triadique ?
Il s’agit de trois teintes séparées de 120 degrés sur le cercle chromatique, créant une relation régulièrement répartie.
Quels formats de couleur sont acceptés ?
Utilisez une notation hexadécimale à trois ou six chiffres, avec ou sans dièse initial, comme #369 ou 336699.
Pourquoi une base grise produit-elle des gris ?
Le gris possède une saturation nulle ; la rotation de sa teinte mathématique ne crée donc aucune différence visible.
Puis-je saisir un nom de couleur comme rouge au lieu d'un code ?
Non. Seuls les codes hexadécimaux à trois ou six chiffres sont acceptés, avec ou sans dièse, comme #f06 ou #ff0066. Les noms de couleur, les notations RVB ou TSL et les codes avec transparence sont refusés avec un message clair.
Pourquoi la palette commence-t-elle par ma propre couleur ?
La couleur de base vient d'abord, normalisée, suivie des deux compagnes à 120 et 240 degrés. Pour #336699, la palette complète est #336699, #993366 et #669933 : votre couleur actuelle reste intacte.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/color/triadic-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#336699"}'const res = await fetch("https://api.kit.forhosting.com/color/triadic-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#336699"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/triadic-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#336699"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/triadic-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#336699"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#336699"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/triadic-palette", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"color": "#336699"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.triadic_palette",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Choisir et employer les couleurs générées
Les développeurs peuvent reprendre directement palette ou lire triadic_colors lorsque le jeton de base doit rester inchangé.
Formats acceptés, erreurs et automatisation
Fournissez la base dans le champ color sous forme de chaîne JSON. Une réponse valide renvoie base_color, triadic_colors, palette et hue_offsets. La base est développée et normalisée ; triadic_colors contient exactement les deux couleurs générées ; palette place la base avant les rotations de 120 et 240 degrés. Une valeur incorrecte reçoit le code invalid_input au lieu d’une palette supposée. Le navigateur facilite l’exploration, tandis que chaque élément API réussi coûte $0.002 et utilise le même algorithme déterministe.
Questions techniques
Le résultat comprend-il la couleur de base ?
Oui. palette contient la base normalisée et les deux couleurs associées ; triadic_colors ne contient que les deux couleurs générées.
Quel est le prix d’un appel API ?
Chaque élément traité avec succès coûte $0.002. La version navigateur exécute localement le même calcul déterministe.