Trova colore complementare
Trovi in un passaggio il colore opposto al Suo sul cerchio cromatico: il rosso puro #FF0000 dà il ciano #00FFFF, con la stessa saturazione e luminosità, in esadecimale, RGB e HSL. Utile per ricavare un accento dal colore di un marchio. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Colore sorgente come hex
- #FF0000
- Esadecimale
- #00FFFF
- Cifre hex
- 00FFFF
- Resistenza (Ω)
- 0
- G
- 255
Designer, sviluppatori front-end e team di brand spesso necessitano del colore che si trova esattamente opposto a un campione sulla ruota delle tinte—abbinamenti per pulsanti e sfondi, token di accento da un primario di marca, o dimostrazioni didattiche della teoria classica del colore. Questo strumento per il colore complementare accetta un codice hex come #FF0000 o la forma breve #f00, una stringa rgb(r,g,b) oppure i canali rosso, verde e blu separati da zero a duecentocinquantacinque; converte la sorgente in tinta, saturazione e luminosità, ruota la tinta di esattamente centottanta gradi mantenendo fisse saturazione e luminosità, e restituisce il colore complementare come hex, canali RGB, componenti HSL e stringhe CSS pronte da incollare.
Inserire un colore e calcolare la tinta opposta
L’ingresso hex accetta tre o sei cifre esadecimali con o senza cancelletto iniziale, quindi funzionano sia #FF0000 sia FF0000, così come le forme brevi #f00 e f00. La maiuscola è ignorata. Può anche inviare una stringa rgb(...) o rgba(...), oppure una tripla separata da virgole come 255,0,0; se è presente alpha, viene ignorata per il calcolo del complemento.
Dopo che il motore risolve la sorgente in canali sRGB interi, converte in HSL con lo stesso percorso max-min-chroma usato in CSS e nelle stack grafiche: la luminosità è la metà della somma dei canali normalizzati massimo e minimo, la saturazione è zero per i grigi e altrimenti il chroma scalato dalla formula HSL standard, e la tinta è l’angolo di settore in gradi da zero a trecentosessanta.
Il complemento si forma aggiungendo centottanta gradi alla tinta modulo trecentosessanta, lasciando saturazione e luminosità invariate, poi riconvertendo quella tripla HSL in interi RGB e in un codice hex a sei cifre maiuscole.
Leggere originale, complemento e campi di comodità di primo livello
In caso di successo la risposta include un oggetto original che descrive il colore sorgente analizzato e un oggetto complement che descrive il colore opposto. Il campo source registra se l’analisi ha usato hex, una stringa rgb o canali separati. Il rosso puro #FF0000 produce ciano #00FFFF; il verde puro complementa verso il magenta; il blu puro complementa verso il giallo.
I grigi acromatici mantengono lo stesso RGB dopo la rotazione perché la saturazione è zero—avanza solo l’angolo di tinta riportato di centottanta gradi.
Casi d'uso
Accenti di brand da un hex primario
Trasformi un primario di brand in un accento opposto affidabile per pulsanti, grafici e blocchi marketing senza scegliere campioni a mano ogni volta.
Domande frequenti
Come trovo il colore complementare di un codice hex?
La risposta include complement.hex (e hex di primo livello) più RGB e HSL della tinta opposta.
Posso inviare canali RGB invece di hex?
Sì. Fornisca r, g e b ciascuno tra 0 e 255, oppure una stringa come rgb(255,0,0). Tutti e tre i canali sono obbligatori con l’ingresso a canali.
Cosa succede se il valore di colore non è valido?
Hex malformato, lunghezza errata, caratteri non hex, campi mancanti e canali fuori da 0–255 vengono rifiutati e non addebitati.
Il trova colore complementare è gratis?
Lo strumento browser gira gratis sul Suo dispositivo.
Qual è il complementare del grigio?
Il grigio non ha saturazione, quindi il suo complementare mantiene esattamente gli stessi valori RGB. Solo l’angolo di tonalità indicato avanza di 180 gradi; ciò che si vede a schermo non cambia.
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/complementary \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#FF0000","hex":"valor-ejemplo"}'const res = await fetch("https://api.kit.forhosting.com/color/complementary", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#FF0000",
"hex": "valor-ejemplo"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/complementary",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#FF0000",
"hex": "valor-ejemplo"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/complementary", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#FF0000","hex":"valor-ejemplo"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#FF0000","hex":"valor-ejemplo"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/complementary", 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": "#FF0000",
"hex": "valor-ejemplo"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.complementary",
"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
I valori di colore non validi—hex malformato, canali fuori intervallo o campo mancante—falliscono con un errore chiaro invalid_input così che i dati errati non vengano mai clampati in silenzio.
Inserire un colore e calcolare la tinta opposta
Fornisca un campo stringa denominato color (alias hex, value, colour e input) oppure i tre canali numerici r, g e b (alias red, green e blue). L’ingresso a canali richiede tutte e tre le componenti nell’intervallo inclusivo da zero a duecentocinquantacinque; i numeri possono arrivare come numeri JSON o stringhe numeriche. Input identici producono sempre JSON identico perché il percorso è aritmetica pura senza rete, senza seme casuale e senza orologio di sistema.
Leggere originale, complemento e campi di comodità di primo livello
Ogni pacchetto porta hex con cancelletto e sei cifre maiuscole, hex_digits senza cancelletto, canali r, g e b, h, s e l per tinta in gradi e saturazione e luminosità in percentuale, i nomi lunghi hue, saturation e lightness, un oggetto hsl annidato e una stringa rgb_css come rgb(0, 255, 255). Per concatenare rapidamente, gli stessi valori del complemento si ripetono al livello superiore come hex, r, g, b, h, s, l, hsl e rgb_css così che il codice UI e i valutatori leggano una forma piatta senza annidamento. Il campo hue_rotation_deg è sempre centottanta, e method è sempre hue_rotate_180 così i router possono ramificare senza ispezionare le forme. Dati colore mancanti, spazzatura non hex, lunghezza hex errata e canali fuori da zero a duecentocinquantacinque falliscono con invalid_input e non vengono addebitati dopo il rifiuto del motore.
Uso dell’API, prezzi, flussi di design e limiti pratici
Chiami il trova colore complementare gratuito nel browser per controlli di palette, demo di lezione ed esperimenti di accento di brand senza installare una libreria di colore. Abbini i complementi a verificatori di contrasto quando costruisce temi accessibili, oppure alimenti accenti opposti in pipeline di token che mantengono fissa la luminosità invertendo i primari di brand. Invii un corpo JSON con color impostato su una stringa hex o rgb, oppure r, g e b impostati sui valori di canale. Usi l’API prepagata quando un design system, un generatore di temi, uno strumento di varianti e-commerce o una pipeline di accessibilità necessita di un contratto stabile sotto saldo KIT a $0.002 per elemento riuscito; i fallimenti di validazione non consumano mai saldo dopo il rifiuto del motore. Preferisca questo endpoint quando l’intento di ricerca è specificamente colore complementare o opposto sulla ruota delle tinte; per solo hex a HSL usi il convertitore dedicato, per RGB a HSL il convertitore RGB a HSL, e per la conversione multi-formato tra HEX, RGB, HSL, LAB e CMYK il convertitore di colore più ampio del catalogo. Gli autori di SDK possono mappare hex e RGB di primo livello direttamente in controlli di form o proprietà personalizzate CSS senza reimplementare l’analisi del colore e la rotazione HSL in ogni linguaggio.
Casi di integrazione
Temi e pipeline di token di design
L’automazione che memorizza i colori come hex o RGB deriva token complementari con JSON deterministico per varianti di tema chiaro e scuro.
Insegnamento della teoria del colore e valutazione
Corsi e prove di codice confrontano le risposte complementari degli studenti con fixture stabili, con invalid_input quando il valore di colore è malformato.
Domande tecniche
Come si calcola il complemento?
Il motore converte il colore in HSL, aggiunge 180 gradi alla tinta (modulo 360), mantiene saturazione e luminosità, poi riconverte in RGB e hex. method è sempre hue_rotate_180.