Color Palette Generator

Generera komplementära, analoga, triadiska och tetradiska färgscheman från valfri basfärg

Prova ett exempel

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.

Omedelbar palettgenerering
Välj en basfärg och ett schematyp, och paletten visas omedelbart. Inga formulär att skicka, inga laddningsskärmar. Ändra basfärgen och utdata uppdateras i realtid.
🎨
Sex harmonischeman
Välj mellan komplementär, analog, triadisk, delad-komplementär, tetradisk eller monokromatisk. Varje schema ger ett annorlunda visuellt intryck, från högkontrastiga par till subtila toningsgradienter med en enda nyans.
🔒
Integritetsfokuserad bearbetning
All färgberäkning körs i din webbläsare. Inga färgdata skickas till någon server. Verktyget fungerar offline när sidan väl är laddad.
📋
Export med ett klick
Kopiera enstaka hex-koder eller hela paletten med ett klick. Klistra in direkt i CSS, Figma, Tailwind-konfigurationen eller vilket designverktyg som helst som accepterar hex-värden.

Användningsområden för Color Palette Generator

Skapa UI-teman
Frontend-utvecklare som bygger en ny app kan börja med en varumärkesfärg och generera en komplett palett för primära, sekundära och accent-tokens. Triadiska eller tetradiska scheman ger tillräcklig variation för knappar, länkar, aviseringar och bakgrunder.
Färgtokens för designsystem
Designsystemingenjörer använder monokromatiska paletter för att generera en ljusskalning för en enda varumärkesnyans och mappar sedan varje steg till en namngiven token (t.ex. blue-100 till blue-900).
Datavisualisering
Datatekniker och analytiker behöver distinkta färger för diagramserier som inte krockar. En analog eller triadisk palett ger tillräcklig separation för 3–6 serier samtidigt som diagrammet hålls visuellt sammanhängande.
Landningssidor för marknadsföring
Designers som skapar kampanjsidor utgår från varumärkets primärfärg och använder ett delat-komplementärt schema för att hitta accentfärger till CTA-knappar och markerade sektioner utan att krocka med logotypen.
Tillgänglighetsparning
QA-ingenjörer som testar WCAG-efterlevnad parar ihop genererade palettfärger och kör dem genom en kontrastkontroll. Komplementära eller delat-komplementära scheman producerar ofta par med hög luminanskontrast.
Lära sig färgteori
Designstudenter kan växla mellan alla sex scheman med samma basfärg och se hur varje geometri distribuerar nyanser runt hjulet. Den visuella utmatningen gör de abstrakta vinklarna konkreta.

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.

SchemaFärgerNyansvinkelPassar för
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

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.

Nyans (0–360)
Positionen på färghjulet i grader. 0 är rött, 60 är gult, 120 är grönt, 180 är cyan, 240 är blått, 300 är magenta. Palettscheman roterar detta värde medan mättnad och ljushet hålls konstanta.
Mättnad (0–100 %)
Hur levande färgen är. 100 % är helt mättad; 0 % är en grå nyans. Palettscheman bevarar basmättnaden så att alla genererade färger delar samma intensitet.
Ljushet (0–100 %)
Hur ljus färgen är. 0 % är svart, 50 % är den rena nyansen, 100 % är vitt. Monokromatiska scheman varierar ljusheten för att skapa en tonal skala; alla andra scheman håller ljusheten konstant.

Kodexempel

Generera färgpaletter programmatiskt med HSL-konvertering och nyansrotation.

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
}

Vanliga frågor

Vad är skillnaden mellan komplementär och delad-komplementär?
Komplementär använder två färger exakt 180 grader ifrån varandra på färghjulet, vilket ger maximal nyanskontrast. Delad-komplementär ersätter den direkta motparten med två färger vid 150 och 210 grader från basen, vilket ger stark kontrast med mindre visuell spänning. Delad-komplementär är enklare att arbeta med i UI-design eftersom ingen av accentfärgerna direkt motsätter basfärgen.
Hur många färger bör en UI-palett ha?
De flesta designsystem använder 3–5 kärnnyanser: en primär, en sekundär, en neutral och en eller två accenter. Varje kärnnyans har sedan en ljusskalning (100 till 900). Börja med ett triadiskt eller tetradiskt schema för kärnnyanserna och generera sedan monokromatiska skalor för var och en.
Kan jag använda dessa paletter med Tailwind CSS?
Ja. Kopiera hex-värdena och lägg till dem i colors-objektet i din tailwind.config.js eller tailwind.config.ts. För en monokromatisk skala, mappa varje nyans till en numrerad nyckel (50, 100, 200 osv.) för att matcha Tailwinds namnkonvention.
Varför ser vissa genererade färger tråkiga eller grumliga ut?
Om din basfärg har låg mättnad eller extrem ljushet (mycket nära 0 % eller 100 %) kommer de roterade nyanserna också att verka dämpade. Generatorn bevarar basfärgens mättnad och ljushetsvärden. För levande paletter, välj en bas med mättnad över 50 % och ljushet mellan 30 % och 70 %.
Vad är skillnaden mellan HSL och HSV/HSB?
HSL och HSV använder båda nyansen som en cirkulär axel, men de definierar ljushet på olika sätt. I HSL ger ljushet 50 % den rena nyansen och 100 % är vitt. I HSV (kallas även HSB) är värde 100 % den rena nyansen och det finns inget sätt att nå vitt utan att minska mättnaden. De flesta palettgeneratorer använder HSL eftersom dess ljushetsaxel mappas mer intuitivt till hur vi uppfattar färgljushet.
Hur relaterar färgharmonischeman till tillgänglighet?
Färgharmoni och WCAG-kontrast är separata frågor. Ett komplementärt par har maximal nyanskontrast, men det garanterar inte tillräcklig luminanskontrast för textläsbarhet. Efter att ha genererat en palett, testa varje förgrunds-/bakgrundspar mot WCAG AA (4,5:1-förhållande för normal text). Färger med liknande ljushet kommer att underkännas oavsett deras nyansrelation.
Är HSL detsamma som CSS hsl()-funktionen?
Ja. CSS hsl()-funktionen tar tre argument: nyansen i grader (0–360), mättnad som procent och ljushet som procent. CSS Color Level 4 accepterar också ett snedstrecksseparerat alfavärde: hsl(240 60% 50% / 0.8). HSL-modellen som används av den här generatorn matchar CSS-specifikationen exakt, så du kan klistra in nyans-, mättnad- och ljushetsvärden direkt i dina stilmallar.