Generatore Palette Colori

Genera palette complementari, analoghe, triadiche e tetradiche da qualsiasi colore base

Prova un esempio

Colore base

Schema colori

Palette generata

Cos'è una palette di colori?

Una palette di colori è un insieme fisso di colori scelti per funzionare insieme in un progetto grafico. Quando scegli un singolo colore base per un brand, un sito web o un'illustrazione, hai bisogno di colori complementari che si abbinino bene. La generazione automatica di palette applica le regole della teoria del colore, in particolare le relazioni geometriche sulla ruota dei colori HSL standard.

La ruota dei colori HSL (Tonalità, Saturazione, Luminosità) dispone le tonalità in un cerchio di 360 gradi. Il rosso si trova a 0 gradi, il verde a 120 gradi e il blu a 240 gradi. Ogni schema di armonia cromatica funziona selezionando tonalità a specifiche distanze angolari dal colore base. Una coppia complementare, ad esempio, utilizza due colori a 180 gradi di distanza. Un insieme analogo sceglie colori entro 30 gradi su ciascun lato. Queste regole geometriche producono combinazioni equilibrate perché le tonalità selezionate si distribuiscono intorno alla ruota anziché concentrarsi in una sola area.

Questo strumento accetta qualsiasi colore hex come input, lo converte in HSL, ruota la tonalità degli angoli definiti dallo schema selezionato e riconverte i risultati in hex. Supporta sei schemi: complementare, analogo, triadico, split-complementare, tetradico e monocromatico. Ogni schema produce un numero diverso di colori in output, da 2 a 5.

Perché usare questo generatore di palette colori?

Scegliere colori che funzionino bene insieme per tentativi è lento e incoerente. Un generatore di palette applica istantaneamente le regole della teoria del colore, fornendo risultati matematicamente equilibrati da qualsiasi punto di partenza.

Generazione istantanea della palette
Seleziona un colore base e un tipo di schema: la palette appare immediatamente. Nessun invio di moduli, nessuna schermata di caricamento. Cambia il colore base e l'output si aggiorna in tempo reale.
🎨
Sei schemi di armonia
Scegli tra complementare, analogo, triadico, split-complementare, tetradico o monocromatico. Ogni schema produce un effetto visivo diverso, dalle coppie ad alto contrasto alle sfumature sottili a tonalità singola.
🔒
Elaborazione con privacy garantita
Tutti i calcoli sui colori avvengono nel tuo browser. Nessun dato di colore viene inviato ad alcun server. Lo strumento funziona offline dopo il caricamento della pagina.
📋
Esportazione con un clic
Copia i singoli codici hex o l'intera palette con un clic. Incolla direttamente in CSS, Figma, nella configurazione di Tailwind o in qualsiasi strumento di design che accetti valori hex.

Casi d'uso del generatore di palette colori

Creazione di temi UI
I frontend developer che costruiscono una nuova applicazione possono partire dal colore brand e generare una palette completa per i token primari, secondari e di accento. Gli schemi triadici o tetradici producono abbastanza varietà per pulsanti, link, avvisi e sfondi.
Token di colore per design system
Gli ingegneri di design system usano le palette monocromatiche per generare una scala di luminosità per una singola tonalità brand, associando poi ogni step a un token con nome (ad es. da blue-100 a blue-900).
Visualizzazione dei dati
Gli analisti e i data engineer hanno bisogno di colori distinti per le serie dei grafici che non creino confusione. Una palette analoga o triadica offre una separazione sufficiente per 3-6 serie, mantenendo il grafico visivamente coerente.
Landing page marketing
I designer che costruiscono pagine per campagne partono dal colore primario del brand e usano uno schema split-complementare per trovare colori di accento per i pulsanti CTA e le sezioni in evidenza, senza contraddire il logo.
Verifica dell'accessibilità
I tester QA che verificano la conformità WCAG abbinano i colori della palette generata e li sottopongono a un verificatore di contrasto. Partire da uno schema complementare o split-complementare produce spesso coppie con un elevato contrasto di luminanza.
Apprendimento della teoria del colore
Gli studenti di design possono alternare tutti e sei gli schemi sullo stesso colore base e vedere come ciascuna geometria distribuisce le tonalità intorno alla ruota. L'output visivo rende tangibili gli angoli astratti.

Confronto tra schemi di armonia cromatica

Ogni schema di armonia seleziona i colori in base agli angoli di rotazione della tonalità rispetto al colore base sulla ruota HSL. La tabella seguente elenca ciascuno schema, il numero di colori prodotti, gli angoli di rotazione e il contesto di design in cui funziona meglio.

SchemaColoriAngoli di tonalitàIdeale per
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

Come funziona la rotazione sulla ruota dei colori HSL

Tutta la generazione di palette in questo strumento si basa sul modello colore HSL. Capire i suoi tre assi ti aiuta a prevedere come si trasformerà un colore base con ciascuno schema.

Tonalità (0-360)
La posizione sulla ruota dei colori in gradi. 0 è rosso, 60 è giallo, 120 è verde, 180 è ciano, 240 è blu, 300 è magenta. Gli schemi di palette ruotano questo valore mantenendo fisse saturazione e luminosità.
Saturazione (0-100%)
Quanto è vivido il colore. Il 100% è completamente saturo; lo 0% è una tonalità di grigio. Gli schemi di palette conservano la saturazione del colore base affinché tutti i colori generati condividano la stessa intensità.
Luminosità (0-100%)
Quanto è luminoso il colore. Lo 0% è nero, il 50% è la tonalità pura, il 100% è bianco. Gli schemi monocromatici variano la luminosità per creare una scala tonale; tutti gli altri schemi la mantengono costante.

Esempi di codice

Genera palette di colori a livello di codice usando la conversione HSL e la rotazione della tonalità.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

Domande frequenti

Qual è la differenza tra complementare e split-complementare?
Il complementare usa due colori esattamente a 180 gradi di distanza sulla ruota dei colori, producendo il massimo contrasto di tonalità. Lo split-complementare sostituisce l'opposto diretto con due colori a 150 e 210 gradi dal colore base, offrendo un contrasto forte con meno tensione visiva. Lo split-complementare è più facile da gestire nel design UI perché nessun colore di accento si oppone direttamente al colore base.
Quanti colori dovrebbe avere una palette UI?
La maggior parte dei design system usa da 3 a 5 tonalità principali: un colore primario, uno secondario, un neutro e uno o due colori di accento. Ogni tonalità principale ha poi una scala di luminosità (100-900). Inizia con uno schema triadico o tetradico per le tonalità principali, poi genera scale monocromatiche per ciascuna.
Posso usare queste palette con Tailwind CSS?
Sì. Copia i valori hex e aggiungili all'oggetto colors nel tuo file tailwind.config.js o tailwind.config.ts. Per una scala monocromatica, associa ciascuna sfumatura a una chiave numerica (50, 100, 200, ecc.) per rispettare la convenzione di denominazione di Tailwind.
Perché alcuni colori generati sembrano spenti o slavati?
Se il colore base ha una saturazione bassa o una luminosità estrema (molto vicina allo 0% o al 100%), anche le tonalità ruotate appariranno smorzate. Il generatore conserva i valori di saturazione e luminosità del colore base. Per palette vivide, scegli un colore base con saturazione superiore al 50% e luminosità compresa tra il 30% e il 70%.
Qual è la differenza tra HSL e HSV/HSB?
HSL e HSV usano entrambi la tonalità come asse circolare, ma definiscono la luminosità in modo diverso. In HSL, una luminosità del 50% corrisponde alla tonalità pura e il 100% è bianco. In HSV (detto anche HSB), un valore del 100% corrisponde alla tonalità pura e non è possibile raggiungere il bianco senza ridurre la saturazione. La maggior parte dei generatori di palette usa HSL perché il suo asse di luminosità si adatta in modo più intuitivo a come percepiamo la luminosità dei colori.
Che relazione c'è tra gli schemi di armonia cromatica e l'accessibilità?
L'armonia cromatica e il contrasto WCAG sono due aspetti distinti. Una coppia complementare ha il massimo contrasto di tonalità, ma ciò non garantisce un contrasto di luminanza sufficiente per la leggibilità del testo. Dopo aver generato una palette, testa ogni coppia primo piano/sfondo rispetto a WCAG AA (rapporto 4,5:1 per il testo normale). I colori con luminosità simile falliranno indipendentemente dalla loro relazione di tonalità.
HSL corrisponde alla funzione CSS hsl()?
Sì. La funzione CSS hsl() accetta tre argomenti: la tonalità in gradi (0-360), la saturazione come percentuale e la luminosità come percentuale. CSS Color Level 4 accetta anche un valore alpha separato da una barra: hsl(240 60% 50% / 0.8). Il modello HSL usato da questo generatore corrisponde esattamente alla specifica CSS, quindi puoi incollare i valori di tonalità, saturazione e luminosità direttamente nei tuoi fogli di stile.