Trova Colore Complementare
Inserisci un colore di base
Accetta #RGB, #RRGGBB, rgb() con interi e hsl() con percentuali. Il calcolo resta nel browser; il colore è incluso nell’URL inviato con ogni richiesta di pagina.
I colori complementari occupano posizioni opposte su una ruota cromatica digitale. Inserisci un valore HEX, RGB o HSL rigoroso per calcolare il complemento HSL, i complementi divisi, i colori tetradici e gli esatti rapporti di contrasto WCAG. Tutti i calcoli restano nel browser.
Come viene calcolato il complemento
-
1
Inserisci qualsiasi colore
Usa #RGB, #RRGGBB, rgb() con numeri interi o hsl() con percentuali. Il valore completo viene convalidato prima del calcolo.
-
2
Ruota la tonalità di 180°
Complemento HSL: aggiungi 180° alla tonalità, mantieni la saturazione e la luminosità invariate.
-
3
Derivato dal complemento diviso
Due colori a 150° e 210° dalla base: un'alternativa più morbida al complemento diretto quando il contrasto è troppo alto.
-
4
Appaiono suggerimenti di accessibilità
Rapporto di contrasto della coppia contro il bianco e il nero, più un avviso se la coppia è probabile che fallisca il WCAG AA se usata come fg/bg.
Esempi
| Colore base | Esadecimale | Complemento (HSL) | Esadecimale |
|---|---|---|---|
| Rosso puro | #FF0000 | Ciano | #00FFFF |
| Corallo | #FF7F50 | Turchese acqua | #50D0FF |
| Verde foresta | #228B22 | Viola | #8B228B |
| Blu reale | #4169E1 | Oro-arancio | #E1B941 |
| Lavanda | #E6E6FA | Giallo pallido | #FAFAE6 |
I valori HEX, RGB e HSL mostrati descrivono lo stesso colore sRGB. Copia un risultato per usarlo nel CSS o in un altro strumento di progettazione.
Complemento HSL vs complemento RYB
- HSL (schermo): rosso ↔ ciano, verde ↔ magenta, blu ↔ giallo. È la geometria dell’angolo HSL derivato da sRGB usato nei CSS, non una simulazione della miscela di luci.
- RYB (artista): rosso ↔ verde, blu ↔ arancio, giallo ↔ viola. È una convenzione didattica tradizionale, non una previsione della miscela di pigmenti specifici.
Questo strumento usa esclusivamente il modello HSL digitale. Non converte alla ruota RYB dei pittori, perché il complemento di un pigmento dipende dai materiali e dalla miscela.
Dove i complementi funzionano bene
- Pulsanti CTA contro sfondi di marca. Abbina il primario con il suo complemento per far risaltare il pulsante.
- Visualizzazione dati grafici a doppia serie (profitto vs perdita, prima vs dopo).
- Ombre di illustrazione: l’ombra di una zucca arancione appare più convincente in blu che in un arancione più scuro.
- Branding sportivo: molte squadre usano palette complementari o a complemento diviso (blu/arancio, rosso/verde, giallo/viola).
Dove falliscono
- Testo del corpo su sfondo: i complementi diretti (rosso su verde, blu su arancio) sono scomodi da leggere. L’aberrazione cromatica elevata causa affaticamento visivo.
- Uso su tutta la superficie: uno schermo che è 50% rosso e 50% verde è estenuante. Usa il complemento per accenti (5-10% dell’area superficiale), non come principale.
- Coerenza del marchio: i complementi sembrano affollati. La maggior parte dei marchi moderni utilizza monocromatico o analogico + un accento, non doppio complemento.
Complemento diviso
Il complemento diviso (base + 150° + 210°) è spesso una scelta pratica migliore:
- Mantiene un alto contrasto con la regione del complemento.
- Evita la vibrazione del complemento diretto.
- Fornisce due accenti per un design stratificato.
Esempio: base = blu → complemento = arancio (duro) → complemento diviso = rosso-arancio + giallo-arancio (più ricco).
Complementi desaturati
I complementi puri raramente appaiono bene a piena saturazione. Riduci la saturazione del 20-40% su uno o entrambi per una palette più calma:
- Rosso (S=100%) + Ciano (S=100%) = vibrante.
- Rosso (S=60%) + Ciano (S=60%) = palette classica da poster.
- Mattone di marca (S=45%) + Teal polveroso (S=30%) = moderno, utilizzabile.
Controllo di sanità prima di usare
- Rapporto di contrasto della coppia: il trovatore lo riporta. Sotto 4.5:1 fallisce AA per il testo.
- Test su sfondo neutro: i complementi appaiono diversi su bianco, grigio, nero.
- Test di stampa se quella è la destinazione, CMYK può spostare saturazione e relazioni di complemento rispetto a RGB.
Domande frequenti
Dispongono le tonalità secondo convenzioni diverse. HSL usa un angolo numerico derivato da sRGB; la ruota RYB tradizionale colloca le primarie degli artisti su un cerchio concettuale. Nessuna delle due prevede il risultato della miscela di luci o vernici reali.
Sì, sono sinonimi nella teoria dei colori. “Opposto sulla ruota dei colori” e “complementare” si riferiscono alla stessa relazione.
Raramente. I complementi diretti di solito falliscono il contrasto WCAG quando usati come fg/bg perché hanno una luminosità simile. Aumenta la differenza di luminosità (testo scuro su sfondo chiaro) per superare il test.
Sì, il pannello dei risultati include il complemento diretto, il complemento diviso (due colori ai lati) e il quadruplo tetradico. Scegli quello che meglio si adatta al tuo obiettivo di design.
Strumenti correlati
Generatore di lettere casuali
Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.
Convertitore BBCode in HTML
Converti BBCode (markup per forum) in HTML pulito. Gestisce tag di formattazione, elenchi, citazioni, codice, immagini, link e tabelle.
Generatore di Palette di Colori
Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.
Generatore di palette colori casuali
Genera palette casuali da 2 a 15 campioni, scegli uno stile vivace, pastello, tenue o scuro e copia codici HEX o variabili CSS.
Semplificatore di Algebra Booleana
Semplifica le espressioni booleane utilizzando le mappe di Karnaugh e l'algoritmo di Quine-McCluskey. Mostra ogni passo di minimizzazione e una forma finale SOP/POS.
Convertitore da Base64 a Hex
Converti una stringa Base64 nei suoi byte sottostanti espressi in esadecimale. Utile per ispezionare token, chiavi, certificati e JWT.