I vilket format ska grundfärgen vara?

Generatorn accepterar färger i HEX-format – förkortad (t.ex. #F50) och full (t.ex. #FF5500). Bredvid textfältet finns en färgväljare som låter dig välja färg visuellt. Genererade paletter visar HEX-kod och HSL-värde för varje färg.

Hur många färger finns i varje palett?

Varje palett innehåller 4 till 6 färger. Antalet beror på schematypen – monokromatiska och tonala paletter genererar fler nyanser, medan komplementära och triadiska paletter fokuserar på färre kontrasterande färger.

Kan jag använda genererade paletter kommersiellt?

Ja. Du kan använda genererade färgpaletter i valfritt projekt – kommersiellt och icke-kommersiellt, utan licensbegränsningar.

Kräver färgpalettgeneratorn inloggning eller betalning?

Generatorn är helt gratis och kräver ingen inloggning eller registrering. Färger genereras lokalt i webbläsaren – ingen data skickas till externa servrar.

Färgpalettgenerator

Ange en grundfärg och verktyget genererar 9 harmoniska färgpaletter: monokromatisk, komplementär, triadisk, pastell och fler. Varje färg kan kopieras med sin HEX-kod.

Monokromatisk palett

Alla färger har samma nyans (H), skiljer sig främst i ljushet (L) i HSL-färgrymden.

#0b28ba

hsl(230, 89%, 39%)

#153af2

hsl(230, 89%, 52%)

#4f6bf5

hsl(230, 89%, 64%)

#899cf8

hsl(230, 89%, 76%)

#c3ccfc

hsl(230, 89%, 88%)

Triadisk palett

Tre nyanser med 120° avstånd på färghjulet (hörn på en liksidig triangel) – geometri som ofta används inom varumärkning och Bauhaus-inspirerad design.

#4f6bf5

hsl(230, 89%, 64%)

#f43757

hsl(350, 89%, 59%)

#7ff667

hsl(110, 89%, 69%)

#f87f94

hsl(350, 89%, 74%)

#42f21f

hsl(110, 89%, 54%)

Delad komplementär palett

En variation av den komplementära paletten – istället för ett komplement (180°) används två färger förskjutna ca ±30° från komplementet, vilket minskar visuell spänning men behåller stark kontrast.

#4f6bf5

hsl(230, 89%, 64%)

#f5864f

hsl(20, 89%, 64%)

#bef54f

hsl(80, 89%, 64%)

#f7a176

hsl(20, 89%, 72%)

#b0f328

hsl(80, 89%, 56%)

Pastellpalett

Samma nyans med minskad mättnad och ökad ljushet – förskjutning mot mitten och toppen av HSL-rymden, vilket ger mjuka, ”krämiga” färger.

#e1e5f4

hsl(230, 45%, 92%)

#d3d7ee

hsl(230, 45%, 88%)

#c4cae9

hsl(230, 45%, 84%)

#b5bde3

hsl(230, 45%, 80%)

#a6b0dd

hsl(230, 45%, 76%)

Mörk palett

Samma nyans med hög mättnad (S) och låg ljushet (L) – förskjutning nedåt på ljushetsaxeln, vilket ger djupa färger typiska för mörkt läge och starka accenter.

#3757f4

hsl(230, 89%, 59%)

#153af2

hsl(230, 89%, 52%)

#0c2dd2

hsl(230, 89%, 44%)

#0a25ab

hsl(230, 89%, 36%)

#081d85

hsl(230, 89%, 28%)

Tonal palett (inspirerad av Material Design)

Flera ljussteg av en nyans – varierande L och måttlig S, liknande de tonala intervallen i Material Designs riktlinjer (t.ex. 50–900).

#f2f3f8

hsl(230, 27%, 96%)

#dcdfef

hsl(230, 36%, 90%)

#b1bae7

hsl(230, 54%, 80%)

#7c8ee9

hsl(230, 71%, 70%)

#3e5df4

hsl(230, 89%, 60%)

Minimalistisk palett (inspirerad av Apple)

En djärv färgaccent och många mycket ljusa, mjuka neutrala toner – layout typisk för gränssnitt med mycket vitt utrymme och subtila skuggor.

#3e5df4

hsl(230, 89%, 60%)

#fafafa

hsl(230, 6%, 98%)

#efeff1

hsl(230, 6%, 94%)

#dfdfe2

hsl(230, 6%, 88%)

#484951

hsl(230, 6%, 30%)

Analog palett

Färger med liknande nyans – från ca -30° till +30° runt basfärgen på det klassiska färghjulet (t.ex. Itten).

#4fbef5

hsl(200, 89%, 64%)

#67a3f6

hsl(215, 89%, 69%)

#4f6bf5

hsl(230, 89%, 64%)

#4637f4

hsl(245, 89%, 59%)

#864ff5

hsl(260, 89%, 64%)

Komplementär palett

Basfärgen och dess komplement förskjutet 180° på färghjulet – en av de grundläggande färgkontrasterna beskriven av Johannes Itten.

#4f6bf5

hsl(230, 89%, 64%)

#1f42f2

hsl(230, 89%, 54%)

#f5d94f

hsl(50, 89%, 64%)

#f8e37f

hsl(50, 89%, 74%)

#f2cf1f

hsl(50, 89%, 54%)

Varför generera en färgpalett?

En konsekvent färgpalett är grunden för varje visuellt projekt – från webbplatser, via logotyper, till tryckt material. Att manuellt välja färger som fungerar tillsammans kräver kunskap om färgteori. Generatorn automatiserar denna process: du anger en grundfärg (t.ex. färgen på din logotyp) och verktyget genererar 9 uppsättningar färger baserade på beprövade färgharmonischeman.

Varje genererad färg har sin HEX-kod (t.ex. #4F6BF5) och HSL-värde (hue, saturation, lightness). HEX-koden kan klistras in direkt i CSS, Figma, Canva eller valfri grafisk applikation.

Hur man använder färgpalettgeneratorn

Hela processen tar bara några sekunder:

1. Ange grundfärg
Ange en HEX-kod (t.ex. #4F6BF5) i textfältet eller välj en färg från färgväljaren. Du kan också använda knappen Slumpmässig färg.
2. Bekräfta ditt val
Efter att du klickat på knappen Update Color genererar verktyget automatiskt 9 paletter baserade på olika färgharmonischeman.
3. Kopiera de färger du behöver
Bredvid varje färg finns en Kopiera-knapp – HEX-koden går till urklipp och kan klistras in direkt i ditt projekt.

Vilka färgscheman genererar verktyget?

Generatorn skapar 9 typer av paletter – var och en baserad på en annan princip inom färgteorin:

Monokromatisk palett
Flera nyanser av en färg – från ljus till mörk. Alla färger har samma kulör på färghjulet och skiljer sig bara i ljusstyrka. Fungerar bra i eleganta och minimalistiska designs.
Angränsande palett
Färger bredvid varandra på färghjulet (förskjutna ca 30° åt båda håll från basen). Skapar harmoniska och mjuka färgövergångar.
Komplementär palett
Grundfärgen och den motsatta färgen på färghjulet (180° förskjutning). Skapar stark visuell kontrast. Användbart när element behöver fånga uppmärksamhet.
Triadisk palett
Tre färger med 120° mellanrum på färghjulet – bildar en liksidig triangel. Dynamisk och mångsidig kombination.
Delat komplementär palett
Mildare version av den komplementära paletten. Istället för en motsatt färg används två färger förskjutna ca 30° från komplementet.
Pastellpalett
Samma kulör med minskad mättnad och ökad ljusstyrka – mjuka, dämpade färger. Populärt inom kosmetik, barnmode och livsmedelssektorn.
Mörk palett
Grundfärgen med hög mättnad och minskad ljusstyrka – djupa, kraftfulla färger. Användbart för mörka webbplatsteman och premium varumärkesmaterial.
Tonal palett
Flera ljusstyrkenivåer av en färg – från mycket ljus till mörk. Användbart för att bygga gränssnitt där samma färg behöver olika varianter.
Minimalistisk palett
En stark färgaccent och flera mycket ljusa neutrala färger. Hela paletten förblir lugn. Fungerar bra i moderna gränssnitt med mycket vitt utrymme.

H (hue)0°–360° på färghjulet

S (saturation)0%–100%

L (lightness)0%–100%

Vad bygger färgpalettgeneratorn på?

Alla paletter skapas genom matematisk transformation av grundfärgen i HSL-färgrymden. HSL beskriver en färg med tre värden: hue (H) är positionen på färghjulet (0°–360°), saturation (S) bestämmer färgens styrka och lightness (L) – hur ljus eller mörk färgen är.

Komplementära, triadiska och delade komplementära paletter baseras på färghjulets geometri – färger placeras med jämna vinkelintervall, vilket skapar visuell balans. Monokromatiska, pastell- och mörka paletter ändrar bara ljusstyrka och mättnad medan samma kulör bibehålls.

Var man kan använda genererade färgpaletter

Varumärkets visuella identitet
Välj harmoniska färger för en befintlig logotyp eller bygg en varumärkespalett från grunden – för visitkort, brevpapper och marknadsföringsmaterial.
Webbplatser
Ställ in huvudfärg, accent och bakgrundsnyanser. Kopierade HEX-koder klistras in direkt i CSS eller temakonfiguration.
Appgränssnitt
Tonal palett ger ljusstyrkvarianter av en färg – ljusare för bakgrunder, mörkare för text, mellanliggande för kanter och interaktionstillstånd.
Grafik för sociala medier
Konsekventa färger för inlägg, stories och profilomslag. Angränsande eller pastellpaletter fungerar bra när du vill ha en konsekvent, igenkännlig stil.

Vanliga frågor om färgpalettgeneratorn

Utforska fler verktyg

Visa alla verktyg

JPG/PNG till WebP-konverterare

Minska bildstorleken utan kvalitetsförlust. Konvertera JPG och PNG till WebP och snabba upp din webbplats.

Färgpalettgenerator

Varför generera en färgpalett?

Hur man använder färgpalettgeneratorn

1. Ange grundfärg

2. Bekräfta ditt val

3. Kopiera de färger du behöver

Vilka färgscheman genererar verktyget?

Monokromatisk palett

Angränsande palett

Komplementär palett

Triadisk palett

Delat komplementär palett

Pastellpalett

Mörk palett

Tonal palett

Minimalistisk palett

Vad bygger färgpalettgeneratorn på?

Var man kan använda genererade färgpaletter

Varumärkets visuella identitet

Webbplatser

Appgränssnitt

Grafik för sociala medier

Vanliga frågor om färgpalettgeneratorn

I vilket format ska grundfärgen vara?

Hur många färger finns i varje palett?

Kan jag använda genererade paletter kommersiellt?

Kräver färgpalettgeneratorn inloggning eller betalning?

Utforska fler verktyg

JPG/PNG till WebP-konverterare

Bildredigerare

Favicon-generator

Meta-titel & beskrivningskontroll

Ord- & teckenräknare

E-postsignatur-generator

Färgkontrastkontroll

Färgextraktor från bild