Generatore Palette Colori
Genera palette complementari, analoghe, triadiche e tetradiche da qualsiasi colore base
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.
Casi d'uso del generatore di palette colori
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.
| Schema | Colori | Angoli di tonalità | Ideale per |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, 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.
Esempi di codice
Genera palette di colori a livello di codice usando la conversione HSL e la rotazione della tonalità.
// 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"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']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
}