ForHosting KIT · Images

Palette de teintes équidistantes

Cinq couleurs issues de la teinte 200° sont espacées de 72° : la première est #269dd9, la dernière #26d93e. Saturation et luminosité restent fixes, aucune zone de la roue ne domine votre graphique. Gratuit dans votre navigateur.

Gratuit
Fonctionne dans votre navigateur
Sans inscription
Vos données restent sur votre appareil

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Exemple résolu

Si vous saisissez

Hue: 200
Quantité: 5
Saturation: 70
Luminosité: 50

Vous obtenez

Pas (°): 72
Schéma: #269dd9, #8526d9, #d92656, #d9cd26, #26d93e
Teintes: 200, 272, 344, 56, 128

Un générateur de palette de teintes équidistantes place N couleurs à pas angulaires égaux autour de la roue des couleurs, à partir de la teinte de base que vous choisissez, tout en maintenant saturation et luminosité constantes. Saisissez une teinte de départ en degrés, un effectif de deux à trente-six, et les pourcentages de saturation et de luminosité qui doivent rester identiques pour chaque pastille ; l'outil calcule le pas comme trois cent soixante divisé par N, replie chaque teinte successive dans l'intervalle semi-ouvert de zéro à trois cent soixante, convertit chaque triplet HSL en sRGB et hexadécimal minuscule, et renvoie un tableau scheme, une liste de teintes et des objets riches par couleur avec décompositions RGB, CSS et HSL. Les équipes de marque qui montent des séries de graphiques multi-niveaux, les développeurs front-end qui construisent des jetons de thème pour tableaux de bord et les étudiants en design qui étudient l'espacement égal des teintes ont besoin de cette même carte déterministe sans ouvrir une suite de conception complète.

Qu'est-ce qu'une palette de teintes équidistantes et pourquoi les pas égaux comptent

L'espacement angulaire égal sur le cercle des teintes est la façon classique de construire une série multicolore qui ne favorise aucun secteur de la roue. Les schémas complémentaires utilisent cent quatre-vingts degrés, les triadiques cent vingt et les tétradiques quatre-vingt-dix ; cette capacité généralise cette idée à tout entier N de deux à trente-six en fixant le pas à trois cent soixante divisé par N et en avançant depuis votre teinte de base.

Saturation et luminosité restent fixes à dessein : l'intention de recherche d'une palette de teintes équidistantes porte sur une rotation de teinte équilibrée, non sur l'invention de rampes de valeur ou de chroma, de sorte qu'un départ vif en luminosité moyenne produit des compagnons vifs de luminosité moyenne et un départ pastel des compagnons pastel. Lorsque la saturation est nulle, chaque membre s'effondre vers le gris car les couleurs achromatiques n'ont pas de teinte significative à faire tourner ; c'est de la physique des couleurs correcte, pas un bogue.

Les enseignants associent souvent cet outil à des générateurs de schémas fixes pour que les élèves voient comment changer N modifie la tension visuelle et comment la même teinte de base peut alimenter une série de graphiques à cinq arrêts ou une carte qualitative à douze. Les systèmes de design utilisent cette structure lorsqu'un produit a besoin d'une palette catégorielle qui s'adapte au nombre de séries plutôt que de coder en dur trois ou quatre accents de marque.

Conseils pratiques, limites et recherches associées

Partez de la teinte de marque ou d'interface en laquelle vous avez déjà confiance plutôt que d'un choix arbitraire sur la roue ; le premier membre est toujours la teinte de base à l'offset zéro après repli, de sorte que l'index zéro est votre couleur d'identité en termes HSL. Préférez des effectifs entiers qui correspondent à la taille de votre série de graphiques ou de légende ; cinq arrêts donnent des pas de soixante-douze degrés, six en donnent soixante, huit quarante-cinq et douze trente.

Gardez saturation et luminosité dans les plages que votre pipeline d'accessibilité valide déjà—l'espacement égal des teintes ne garantit pas le contraste WCAG contre un fond fixe, associez donc cette palette à un vérificateur de contraste lorsque le texte repose sur des aplats. N'attendez pas une sortie uniquement complémentaire ou uniquement triadique sur cette page : ces schémas fixes sont des outils distincts avec leur propre intention SEO ; utilisez cette capacité lorsque N est un paramètre que vous contrôlez.

Les couleurs CSS nommées et les chaînes hex sont hors périmètre ici ; convertissez-les d'abord en teinte, saturation et luminosité si vous partez d'un hex de jeton. Cette page vise les personnes qui recherchent une palette de teintes équidistantes, un générateur de roue de teintes égales ou un outil gratuit de N couleurs sur la roue en ligne ; ce n'est pas un extracteur de palette d'image ni un convertisseur multi-espaces complet.

Cas d’usage

Séries catégorielles de graphiques et tableaux de bord

Les équipes data choisissent une teinte de marque et un effectif N de séries, puis placent la liste hex du scheme dans des bibliothèques de graphiques pour des couleurs catégorielles équidistantes.

Échafaudage de jetons de design pour thèmes

Les développeurs front-end génèrent N propriétés CSS personnalisées depuis une teinte de base avec saturation et luminosité fixes pour des kits d'interface multi-accents.

Questions fréquentes

Qu'est-ce qu'une palette de teintes équidistantes ?

N couleurs placées à pas angulaires égaux sur le cercle des teintes.

Est-ce la même chose que les schémas triadiques ou complémentaires ?

Cette capacité se généralise à tout N autorisé que vous choisissez.

L'outil de palette de teintes équidistantes est-il gratuit ?

L'outil navigateur est gratuit et s'exécute en local.

Combien de degrés séparent chaque couleur de la palette ?

Le pas vaut 360 degrés divisés par le nombre de couleurs. Avec cinq couleurs, le pas est de 72° : une teinte de base de 200° se poursuit à 272°, 344°, 56° et 128°, en faisant le tour de la roue.

Pourquoi toutes mes couleurs sortent-elles grises ?

Parce que la saturation est à 0. Une couleur sans saturation n'a aucune teinte à faire tourner, donc chaque pastille devient le même gris. Montez la saturation, par exemple à 70 %, et les teintes se séparent à nouveau.

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

POSThttps://api.kit.forhosting.com/color/hue-wheel

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/hue-wheel \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hue":200,"count":5,"saturation":70,"lightness":50}'

const res = await fetch("https://api.kit.forhosting.com/color/hue-wheel", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "hue": 200,
    "count": 5,
    "saturation": 70,
    "lightness": 50
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/hue-wheel",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "hue": 200,
    "count": 5,
    "saturation": 70,
    "lightness": 50
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hue-wheel", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"hue":200,"count":5,"saturation":70,"lightness":50}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"hue":200,"count":5,"saturation":70,"lightness":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hue-wheel", 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

{
  "hue": 200,
  "count": 5,
  "saturation": 70,
  "lightness": 50
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hue_wheel",
  "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

par requête$0.002

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

Une entrée invalide—champs manquants, effectif non entier, effectif hors plage autorisée, saturation ou luminosité hors de zéro à cent—échoue avec une erreur invalid_input claire au lieu d'inventer une palette. Le chemin est de l'arithmétique pure—pas de réseau, pas de graines aléatoires, pas de dépendance à l'horloge—si bien que l'exécuteur gratuit du navigateur et l'API prépayée renvoient le même JSON à chaque appel.

Qu'est-ce qu'une palette de teintes équidistantes et pourquoi les pas égaux comptent

La réponse indexe toujours les membres à partir de zéro et signale offset_deg et hue afin que documentation, jetons de design et tests automatisés puissent affirmer des positions exactes sur la roue sans réordonner à la main.

Comment appeler l'API et ce qui revient

Préférez figer les tableaux scheme et hues dans les tests unitaires afin qu'un changement futur d'arrondi ou de conversion HSL apparaisse immédiatement. Envoyez un corps JSON avec quatre nombres finis obligatoires : hue comme angle de base en degrés (toute valeur finie est acceptée et repliée dans l'intervalle semi-ouvert de zéro à trois cent soixante), count comme entier de deux à trente-six, saturation comme pourcent de zéro à cent, et lightness comme pourcent de zéro à cent. Les chaînes numériques sont acceptées comme les nombres JSON. En cas de succès la réponse renvoie la teinte normalisée, le count renvoyé en écho, saturation et luminosité arrondies, step_deg égal à trois cent soixante divisé par count avec arrondi décimal fixe, un tableau scheme de chaînes #rrggbb minuscules dans l'ordre de parcours, un tableau hues des angles des membres, un tableau colors d'objets riches chacun avec index, offset_deg, hue, hex, hex6, r, g, b, rgb, css et hsl, plus un court message en anglais et un tableau steps documentant la normalisation, la taille du pas et chaque conversion. Une validation échouée—champ manquant, valeur non finie, count non entier, count hors de deux à trente-six, ou saturation ou luminosité hors de zéro à cent—renvoie invalid_input et n'est jamais facturée. Le tarif est un forfait de $0.002 par requête réussie avec unité item.

Conseils pratiques, limites et recherches associées

En écrivant des tests, couvrez au moins un cas multi-arrêts vif, un count de deux (division à cent quatre-vingts degrés), une saturation quasi grise et un count invalide délibéré afin de verrouiller à la fois la mathématique d'espacement et la validation. Les tâches en échec qui renvoient invalid_input ne consomment pas de solde prépayé, ce qui maintient peu coûteux les scripts de design exploratoires et la validation de formulaires lorsque des valeurs imparfaites sont collées.

Cas d'intégration

Exercices de roue des couleurs en classe

Les élèves comparent des secteurs égaux dessinés à la main avec step_deg déterministe et affirment les tableaux hues dans les devoirs ou katas de programmation.

Questions techniques

Quelles entrées sont obligatoires ?

Quatre nombres : hue (degrés, replié dans [0, 360)), count (entier 2–36), saturation (0–100%) et lightness (0–100%). Les valeurs invalides renvoient invalid_input.

Comment la taille du pas est-elle calculée ?

step_deg = 360 / count avec arrondi décimal stable. Le membre i utilise hue wrap(base + i × step_deg).

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Qu'est-ce qu'une palette de teintes équidistantes et pourquoi les pas égaux comptent

Conseils pratiques, limites et recherches associées

Cas d’usage

Séries catégorielles de graphiques et tableaux de bord

Échafaudage de jetons de design pour thèmes

Questions fréquentes

Outils associés

Pour les développeurs — accès API

Endpoint

Appeler depuis votre stack

Exemple de requête

Exemple de réponse

Tarifs

Erreurs

Notes techniques

Qu'est-ce qu'une palette de teintes équidistantes et pourquoi les pas égaux comptent

Comment appeler l'API et ce qui revient

Conseils pratiques, limites et recherches associées

Cas d'intégration

Exercices de roue des couleurs en classe

Questions techniques

merci