Color Palette Generator
Generera komplementära, analoga, triadiska och tetradiska färgscheman från valfri basfärg
Basfärg
Färgschema
Genererad palett
Vad är en färgpalett?
En färgpalett är en fast uppsättning färger som valts ut för att fungera tillsammans i en design. När du väljer en enskild basfärg för ett varumärke, en webbplats eller en illustration behöver du kompletterande färger som passar bredvid den. Färgpalettgenerering automatiserar det valet genom att tillämpa regler från färgteori — specifikt de geometriska relationerna på det standard-baserade HSL-färghjulet.
HSL-färghjulet (Hue, Saturation, Lightness) arrangerar nyanser i en cirkel på 360 grader. Rött sitter vid 0 grader, grönt vid 120 grader och blått vid 240 grader. Varje färgharmonischema fungerar genom att välja nyanser på specifika vinkelavstånd från basfärgen. Ett komplementärt par använder till exempel två färger 180 grader ifrån varandra. En analog uppsättning väljer färger inom 30 grader på var sida. Dessa geometriska regler producerar balanserade kombinationer eftersom de valda nyanserna sprids runt hjulet i stället för att klumpa ihop sig i ett område.
Det här verktyget tar valfri hex-färg som indata, konverterar den till HSL, roterar nyansvärdet med de vinklar som definieras av det valda schemat och konverterar resultaten tillbaka till hex. Det stöder sex scheman: komplementär, analog, triadisk, delad-komplementär, tetradisk och monokromatisk. Varje schema producerar ett annat antal utdatafärger, från 2 till 5.
Varför använda denna Color Palette Generator?
Att välja färger som fungerar ihop genom prövning och misstag är långsamt och inkonsekvent. En palettgenerator tillämpar färgteoretiska regler direkt och ger dig matematiskt balanserade resultat från valfri startpunkt.
Användningsområden för Color Palette Generator
Jämförelse av färgharmonischeman
Varje harmonischema väljer färger baserat på nyansrotationsvinklar från basfärgen på HSL-hjulet. Tabellen nedan listar varje schema, antalet färger det producerar, rotationsvinklarna och det designsammanhang där det fungerar bäst.
| Schema | Färger | Nyansvinkel | Passar för |
|---|---|---|---|
| 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 |
Hur HSL-färghjulsrotation fungerar
All palettgenerering i det här verktyget bygger på HSL-färgmodellen. Att förstå dess tre axlar hjälper dig att förutse hur en basfärg omvandlas under varje schema.
Kodexempel
Generera färgpaletter programmatiskt med HSL-konvertering och nyansrotation.
// 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
}