Générateur de palette tétradique
Saisissez #e74c3c et obtenez quatre couleurs en deux paires opposées : le rouge avec le cyan #3cd7e7, et le vert citron #d7e73c avec son propre opposé, à 0, 60, 180 et 240 degrés sur le cercle chromatique. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Hexadécimal
- #e74c3c
- Hexadécimal d'entrée
- #e74c3c
- Hexadécimaux
- #e74c3c, #d7e73c, #3cd7e7, #4c3ce7
- Teintes
- 5,614035, 65,614035, 185,614035, 245,614035
- Décalages
- 0, 60, 180, 240
Ce générateur de palette tétradique construit une palette rectangulaire de quatre couleurs à partir d'un seul code hexadécimal CSS. Vous saisissez une couleur de base telle que #e74c3c ou sa forme courte #f00 ; le moteur la convertit en HSL, garde la saturation et la luminosité fixes, et fait tourner la teinte en quatre étapes déterministes à zéro, soixante, cent quatre-vingts et deux cent quarante degrés. Ces décalages placent deux paires complémentaires sur la roue chromatique, si bien que les quatre échantillons forment un rectangle tétradique classique, et non une planche d'ambiance aléatoire. Chaque réponse réussie renvoie l'hexadécimal d'entrée normalisé, quatre échantillons détaillés avec hexadécimal, RVB et HSL, ainsi que des tableaux plats hexes et hues pour les tokens de design et les variables CSS.
Ce qu'est un schéma tétradique (rectangle) et ce que contient la réponse
Un schéma de couleurs tétradique, aussi appelé harmonie rectangulaire, utilise quatre teintes disposées comme deux paires complémentaires sur la roue chromatique. En partant de votre teinte de base h, ce générateur place des couleurs à h plus zéro degré, h plus soixante degrés, h plus cent quatre-vingts degrés, et h plus deux cent quarante degrés, puis reconstruit chaque couleur avec la saturation et la luminosité d'origine. Cette séparation de soixante degrés entre les paires crée un rectangle plutôt qu'un carré (qui utiliserait des pas de quatre-vingt-dix degrés).
Les paires complémentaires se situent à l'opposé l'une de l'autre, si bien que la palette équilibre la pression chaude et froide tout en restant liée à la couleur de marque que vous avez saisie.
Comment l'entrée hexadécimale est lue et comment les quatre teintes restent reproductibles
Les valeurs peuvent inclure ou omettre le dièse initial et peuvent utiliser la forme courte à trois chiffres telle que f00, qui se développe chiffre par chiffre en ff0000 avant toute conversion. Les chiffres sont insensibles à la casse et toujours normalisés en sortie à six chiffres en minuscules, afin que les goldens et les variables CSS restent stables d'une exécution à l'autre.
Après l'analyse, les canaux se convertissent en HSL avec les formules sRGB standard ; la teinte est prise en degrés sur le cercle de zéro à trois cent soixante, tandis que la saturation et la luminosité restent des fractions unitaires qui ne changent jamais à travers les quatre étapes. Chaque décalage est appliqué avec un modulo positif, afin que des valeurs intermédiaires négatives ne puissent pas s'infiltrer, puis le HSL se reconvertit en RVB entier avec plafonnement de canal et deux chiffres hexadécimaux en minuscules par canal.
Où les palettes tétradiques interviennent dans le produit, la marque et le travail d'interface
Les concepteurs se tournent vers les schémas tétradiques lorsqu'une marque a besoin de plus d'un seul accent tout en restant harmonieuse : sites marketing, graphiques à séries multiples, couleurs de statut de tableau de bord, et systèmes d'illustration ont souvent besoin de quatre teintes liées qui paraissent tout de même intentionnelles. Les équipes produit utilisent la disposition rectangulaire pour dériver des couleurs de survol, de focus, de graphique et d'appel à l'action à partir d'un seul hexadécimal d'entreprise, sans inventer de codes hexadécimaux ad hoc dans une feuille de calcul.
Les enseignants et étudiants en design l'utilisent pour démontrer les paires complémentaires et la géométrie des teintes sans applications de bureau opaques qui changent d'algorithme entre les versions. Associez-le à des vérificateurs de contraste lorsque l'accessibilité est la prochaine étape, et à des convertisseurs RVB ou HSL lorsque vous avez besoin de formats intermédiaires pour d'autres outils de votre pile.
Cas d’usage
Palettes de marque et de marketing
Développez un hexadécimal d'entreprise en quatre couleurs en harmonie rectangulaire pour des campagnes, des ensembles d'illustration et des pages d'atterrissage multi-accents.
Accents de graphiques et de tableaux de bord
Dérivez quatre couleurs de série liées à partir d'une teinte de marque de base, afin que les graphiques multi-lignes restent équilibrés sans bruit hexadécimal choisi à la main.
Questions fréquentes
Combien coûte le générateur de palette de couleurs tétradique ?
Il est gratuit dans votre navigateur sur cette page.
Comment les quatre teintes sont-elles choisies ?
À partir de la teinte de base h, les couleurs sont placées à h+0°, h+60°, h+180° et h+240° avec la même saturation et luminosité. C'est la disposition rectangulaire (tétradique) classique : deux paires complémentaires séparées de 60°.
Quels formats hexadécimaux sont acceptés ?
Les codes hexadécimaux CSS à trois et six chiffres, avec ou sans dièse initial (par exemple #e74c3c, e74c3c, #f00, ou f00).
Est-ce la même chose qu'un schéma de couleurs carré ?
Non. Un schéma carré utilise des pas de 90°. Ce générateur utilise les décalages rectangulaires 0/60/180/240, afin que les paires forment un rectangle non carré sur la roue.
L'outil choisit-il des couleurs à partir d'une image ?
Non. Il ne fait que faire tourner la teinte de l'hexadécimal que vous fournissez. Pour les couleurs dominantes de photos, utilisez plutôt un extracteur de palette d'image.
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/tetradic \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#e74c3c"}'const res = await fetch("https://api.kit.forhosting.com/color/tetradic", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#e74c3c"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/tetradic",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#e74c3c"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/tetradic", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#e74c3c"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#e74c3c"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/tetradic", 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
{
"hex": "#e74c3c"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.tetradic",
"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.
Limites
hex_max_len | 7 |
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
Utilisez-le gratuitement sur cette page pour l'exploration de marque et les maquettes d'interface, ou appelez l'API à $0.002 par requête réussie lorsque vous avez besoin de données de référence tétradiques reproductibles dans des systèmes de design, des générateurs de thème, ou des pipelines de style automatisés.
Ce qu'est un schéma tétradique (rectangle) et ce que contient la réponse
La réponse inclut input_hex comme forme normalisée à six chiffres, un objet base pour le premier échantillon, un tableau colors de quatre objets, chacun avec hex, r, g, b, h, s, l, hue_offset, et des chaînes rgb et hsl, ainsi que des tableaux pratiques hexes et hues, la liste offsets, scheme fixé à tetradic, method hue_rotate_rectangle, et un bref rappel de la formule. Il n'existe aucun modèle génératif ni échantillonnage d'image : le moteur construit soit quatre échantillons exacts à partir d'un hexadécimal valide, soit rejette la requête avec invalid_input. Les cas rejetés incluent l'absence d'hexadécimal, des valeurs non-chaîne, des jetons de plus de sept caractères, et toute chaîne qui n'est pas composée de trois ou six chiffres hexadécimaux avec un dièse initial optionnel. Si vous avez besoin de paires complémentaires seules, de palettes extraites d'images, ou de vérifications de contraste WCAG, utilisez ces outils dédiés ; cette page ne répond qu'à l'expansion tétradique rectangulaire, avec une sortie numérique stable adaptée aux tokens de design, aux tests unitaires et aux clients de l'API qui ne doivent pas inventer de couleurs.
Comment l'entrée hexadécimale est lue et comment les quatre teintes restent reproductibles
Le champ privilégié est hex, mais les alias color, base et input sont acceptés, afin que les formulaires, les chaînes de requête et les exports d'outils de design puissent réutiliser le même contrat sans renommer de colonnes. Les champs optionnels en virgule flottante tels que h, s et l sont arrondis à un nombre fixe de décimales, afin que les comparaisons JSON ne dérivent pas entre différents moteurs JavaScript. Associez l'exécution gratuite dans le navigateur sur cette page à l'API payante lorsque vous avez besoin de la même palette au sein d'un pipeline automatisé, d'une étape de publication de package de thème, ou d'un configurateur multi-locataire en marque blanche qui ne doit pas changer silencieusement de teintes entre les déploiements.
Où les palettes tétradiques interviennent dans le produit, la marque et le travail d'interface
Les ingénieurs appellent le même contrat depuis des scripts pour amorcer des propriétés personnalisées CSS, des cartes de thème Tailwind, du JSON de tokens de design, et des données de référence Storybook, afin que chaque environnement partage les mêmes quatre échantillons. Sur cette page, le travail s'exécute entièrement dans votre navigateur ; via l'API, chaque recherche réussie coûte $0.002, la validation échouée n'est pas facturée, et rien n'est conservé après le renvoi de la réponse. Cette séparation — exploration interactive gratuite et API payante identique — correspond au reste du catalogue de niveau A de KIT, et vous permet de passer d'une exploration Figma à un fichier de thème de production sans changer le résultat mathématique.
Cas d'intégration
Tokens de design et thèmes CSS
Générez des tableaux hexadécimaux et de teintes reproductibles pour des variables CSS, des cartes Tailwind, et du JSON de tokens de design versionné dans git.