Generi una palette analoga da un colore esadecimale
Scelga un colore di base e quanti campioni Le servono: verranno distribuiti in modo uniforme su una finestra di 60 gradi di tinta. Cinque colori partendo da #3366cc vanno da #33b2cc a #4c33cc a passi di 15 gradi. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Colore
- #3366cc
- Quantità
- 5
- Colore di base
- #3366cc
- Ampiezza della tinta (gradi)
- 60
Crei una palette analoga prevedibile partendo da un colore esadecimale e dal numero esatto di campioni che Le occorrono. Il generatore converte la base in HSL, distribuisce i colori in modo uniforme entro una finestra di sessanta gradi centrata sulla tonalità originale e normalizza ogni risultato in formato esadecimale. Una richiesta di un colore restituisce la base, mentre le palette più ampie includono entrambi i limiti di trenta gradi. Il calcolo deterministico è adatto a token di design, grafici, illustrazioni e pipeline ripetibili.
Scelga il colore di base e la dimensione
Inizi con un colore CSS esadecimale di tre o sei cifre, con cancelletto iniziale facoltativo. La notazione breve viene espansa prima della conversione, quindi #36c e #3366cc indicano lo stesso colore e generano la medesima uscita normalizzata. Scelga poi count, che stabilisce il numero esatto di campioni restituiti.
Deve essere un intero almeno pari a uno; zero e valori negativi vengono rifiutati perché non descrivono una palette. Quando count vale uno, il generatore conserva la tonalità base. Quando vale due, restituisce i limiti a meno trenta e più trenta gradi.
Con tre colori, la base si trova tra tali estremi. Valori maggiori aggiungono intervalli uguali nella stessa finestra senza ampliare l'armonia. Saturazione e luminosità restano quelle della base, quindi varia soltanto la tonalità.
La risposta riporta il colore normalizzato, il conteggio e ogni campione con indice, scostamento con segno, angolo riportato nel cerchio e codice esadecimale minuscolo a sei cifre.
Comprenda la spaziatura uniforme sulla ruota cromatica
I colori analoghi occupano posizioni vicine su una ruota circolare delle tonalità. Questa capacità usa una finestra fissa da trenta gradi sotto la tonalità base a trenta gradi sopra, per un'ampiezza totale di sessanta gradi. Con count superiore a uno, l'intervallo si ottiene dividendo l'ampiezza per count meno uno.
Cinque colori usano -30, -15, 0, 15 e 30 gradi; quattro usano -30, -10, 10 e 30. Poiché la tonalità è circolare, uno spostamento oltre lo zero prosegue vicino a trecentosessanta invece di produrre un angolo negativo non valido. L'algoritmo legge i canali RGB, li converte in HSL, applica ogni spostamento e riconverte il risultato in RGB intero ed esadecimale.
Anche i colori neutri sono validi: il grigio ha saturazione zero, quindi modificarne la tonalità matematica non cambia il RGB visibile e può produrre codici esadecimali ripetuti.
Applichi la palette nei flussi di produzione
Usi l'array generato quando una famiglia ripetibile di colori affini conta più di un contrasto marcato. Un design system può associare gli indici a proprietà come accent-1 fino ad accent-5 e rigenerarle quando cambia il colore principale del marchio. Uno strumento per grafici può richiedere tanti campioni quante sono le serie del rapporto e assegnarli in ordine per preservare la coesione.
Un'applicazione di illustrazione può trasformare un colore scelto artisticamente in riempimenti e dettagli controllati, mentre le variazioni di luminosità vanno eseguite separatamente. Il risultato è utile anche nei test snapshot perché non contiene casualità, date, risposte di rete o variazioni di modello. Conservi colore base e count come fonte ufficiale.
Prima di applicare un campione a testo, icone o controlli, ne verifichi il contrasto sullo sfondo reale: l'armonia analoga non garantisce la conformità WCAG. Convalidi count nell'interfaccia e mostri l'errore se è inferiore a uno o non è intero.
Casi d'uso
Crei token di accento per design system
Trasformi un colore approvato in un numero esatto di tonalità vicine e stabili per componenti e temi.
Colori serie di grafici correlate
Adegui il conteggio alle serie e assegni colori uniformi nell'ordine deterministico dell'array.
Costruisca famiglie cromatiche per illustrazioni
Ricavi riempimenti e dettagli coerenti da un colore scelto senza casualità né calcoli manuali.
Domande frequenti
Che cosa accade quando count vale uno?
L'unico colore restituito usa la tonalità base con uno spostamento di zero gradi.
Gli estremi sono inclusi?
Sì. Per conteggi superiori a uno, il primo colore è a -30 gradi e l'ultimo a 30 gradi.
Quali formati di colore sono accettati?
Sono accettati colori CSS esadecimali di tre o sei cifre, con o senza cancelletto iniziale.
Perché il grigio può produrre valori ripetuti?
Il grigio ha saturazione zero, quindi cambiare la tonalità matematica non modifica i canali RGB visibili.
Come vengono distanziati i colori nella finestra?
I 60 gradi vengono divisi in passi uguali. Con cinque colori gli spostamenti sono −30, −15, 0, +15 e +30 gradi; con quattro, −30, −10, +10 e +30. Chiedere più colori riduce il passo, senza allargare l’intervallo.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
curl -X POST https://api.kit.forhosting.com/color/analogous-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","count":5}'const res = await fetch("https://api.kit.forhosting.com/color/analogous-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"count": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/analogous-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"count": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/analogous-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","count":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","count":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/analogous-palette", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Esempio di richiesta
{
"color": "#3366cc",
"count": 5
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.analogous_palette",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Comprenda la spaziatura uniforme sulla ruota cromatica
L'arrotondamento deterministico garantisce lo stesso JSON per input identici.
Applichi la palette nei flussi di produzione
Ogni elemento API riuscito costa $0.002.
Domande tecniche
Quanto costa una richiesta API?
Ogni elemento elaborato correttamente costa $0.002. Lo strumento nel browser è disponibile per l'uso interattivo.