Generi una palette di colori triadica da un colore esadecimale
Inserisca #336699 e ottenga le sue due compagne triadiche, #993366 e #669933, ruotate di 120 e 240 gradi sulla ruota dei colori. Saturazione e luminosità non cambiano, quindi i tre colori sembrano una sola famiglia. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Colore
- #336699
- Colore di base
- #336699
- Colori triadici
- #993366, #669933
- Tavolozza
- #336699, #993366, #669933
- Scostamenti di tinta
- 120, 240
Questo generatore di palette triadiche parte da un colore esadecimale e calcola le due tonalità poste esattamente a 120 e 240 gradi sulla ruota cromatica. Mantiene saturazione e luminosità del colore di base, creando una famiglia equilibrata di tre colori senza scelte casuali o calcoli manuali. Inserisca un valore esadecimale standard di tre o sei cifre, con o senza cancelletto iniziale. Il risultato comprende la base normalizzata, entrambi i colori generati, la palette completa e gli spostamenti di tonalità. I formati non validi restituiscono un chiaro errore di input, rendendo lo strumento adatto sia al lavoro di design interattivo sia ai flussi automatizzati.
Come viene generata una palette triadica
Una palette triadica contiene tre tonalità distribuite uniformemente in un modello cromatico circolare. Immagini i vertici di un triangolo equilatero sulla ruota cromatica: ogni passaggio copre 120 gradi. Il generatore prima convalida e normalizza il colore esadecimale.
La notazione di tre caratteri viene estesa a sei, quindi #369 diventa #336699, e le lettere vengono convertite in minuscolo per produrre risultati prevedibili. I canali rosso, verde e blu vengono poi trasformati in tonalità, saturazione e luminosità. Ruota soltanto la tonalità: un colore riceve 120 gradi e l’altro 240, tornando correttamente all’inizio dopo 360.
Saturazione e luminosità restano invariate, conservando intensità e brillantezza generali. Infine, i due colori HSL vengono riconvertiti nella notazione esadecimale a sei cifre. La risposta separa i due valori calcolati dalla palette completa.
Non utilizza casualità, rete, data corrente o stato memorizzato; pertanto, input identici producono sempre output identici.
Come scegliere e usare i colori generati
Parta da un colore di base che abbia già uno scopo definito, come il primario di un marchio, il colore guida di un’illustrazione o un accento dell’interfaccia. Sebbene i tre colori siano matematicamente equilibrati, non devono occupare la stessa area visiva. Una composizione pratica lascia spesso dominare la base, usa un compagno per gli elementi di supporto e riserva il terzo ai piccoli richiami.
Verifichi separatamente il contrasto del testo, perché l’armonia cromatica non garantisce leggibilità. Poiché tutti mantengono la stessa luminosità HSL, la brillantezza percepita può cambiare molto, specialmente tra giallo e blu. Conviene quindi usare la triade come punto di partenza e creare varianti più chiare o scure per stati e superfici.
Se la base è grigia, anche i compagni restano grigi: con saturazione zero non esiste una tonalità visibile da ruotare.
Formati accettati, errori e automazione
Sono accettate esattamente tre o sei cifre esadecimali con cancelletto iniziale facoltativo, per esempio #f06, f06, #ff0066 o FF0066. Gli spazi esterni vengono rimossi prima della convalida. Nomi CSS, funzioni RGB o HSL, valori esadecimali con alfa, prefissi 0x, stringhe vuote, numeri e caratteri non esadecimali vengono rifiutati.
Regole così rigorose impediscono interpretazioni ambigue. Dopo la generazione, verifichi contrasto, significati culturali e gerarchia del marchio nel sistema definitivo.
Casi d'uso
Creare accenti per un marchio
Trasformi un colore esadecimale consolidato in due accenti equilibrati per campagne, illustrazioni ed elementi di identità.
Costruire token colore per interfacce
Generi candidati deterministici per token secondari e terziari da un colore principale durante la creazione del tema.
Preparare colori per serie di grafici
Crei una palette iniziale di tre tonalità per dashboard, quindi verifichi contrasto e accessibilità della visualizzazione.
Domande frequenti
Che cos’è una palette di colori triadica?
È un insieme di tre tonalità separate da 120 gradi sulla ruota cromatica, quindi distribuite uniformemente.
Quali formati di colore sono accettati?
Usi la notazione esadecimale di tre o sei cifre, con o senza cancelletto iniziale, come #369 o 336699.
Perché una base grigia produce altri grigi?
Il grigio ha saturazione zero, quindi la rotazione della sua tonalità matematica non crea differenze visibili.
Posso scrivere il nome di un colore, come rosso, invece del codice?
No. Sono accettati solo codici esadecimali di tre o sei cifre, con o senza cancelletto, come #f06 o #ff0066. Nomi di colore, notazioni RGB o HSL e codici con trasparenza vengono rifiutati con un messaggio chiaro.
Perché la tavolozza inizia con il mio colore?
Il colore di base viene per primo, normalizzato, seguito dalle due compagne a 120 e 240 gradi. Per #336699 la tavolozza completa è #336699, #993366 e #669933, così il suo colore attuale resta intatto.
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/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)Esempio di richiesta
{
"color": "#336699"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.triadic_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
Come scegliere e usare i colori generati
Gli sviluppatori possono copiare palette oppure leggere triadic_colors quando il token di base deve restare invariato.
Formati accettati, errori e automazione
Fornisca la base nel campo color come stringa JSON. Una risposta corretta restituisce base_color, triadic_colors, palette e hue_offsets. La base è estesa e normalizzata; triadic_colors contiene esattamente i due colori generati; palette elenca la base e poi le rotazioni di 120 e 240 gradi. Gli input errati ricevono il codice invalid_input invece di una palette ipotizzata. Il browser è comodo per esplorare, mentre ogni elemento API completato costa $0.002 e impiega lo stesso algoritmo deterministico.
Domande tecniche
Il risultato include il colore di base?
Sì. palette contiene la base normalizzata e i due compagni; triadic_colors contiene soltanto i due colori generati.
Quanto costa una chiamata API?
Ogni elemento elaborato correttamente costa $0.002. La versione browser esegue localmente lo stesso calcolo deterministico.