Färgpalettgenerator

Skapa harmoniska paletter baserat på färgteori — kompletterande, triadiska, analoga och mer

Dela:
Click any color swatch to copy its hex code
Copied!

Varför använda en färgpalettgenerator?

Att välja harmoniska färger kräver kunskap om färgteori. Vår generator använder HSL-matematik för att automatiskt beräkna harmoniska paletter från valfri basfärg, vilket gör det möjligt för designers och utvecklare att skapa professionella färgscheman på sekunder.

🎨

6 harmonilager

Kompletterande, triadisk, analog, delad kompletterande, tetradisk, monokromatiska nyanser

👁️

Förhandsvisning med färgrutor

Klicka på en färgruta för att direkt kopiera hex-koden till urklipp

📋

Exportera CSS-variabler

Exportera hela paletten som anpassade CSS-egenskaper — klistra bara in i stilmallen

Skapa en palett i 3 steg

1

Välj basfärg

Använd färgväljaren eller ange en hex-kod för att ange din varumärkes- eller startfärg

2

Välj harmonityp

Välj kompletterande, triadisk, analog eller annan harmoni som passar din design

3

Kopiera och använd

Klicka på en färgruta för att kopiera hex-koden, eller kopiera hela paletten med 'Kopiera som CSS-variabler'

Användningsområden för färgpaletter

🌐

Webbdesign

Skapa ett komplett färgsystem för en webbplats baserat på din varumärkes primärfärg

🏢

Varumärkesidentitet

Utveckla en professionell varumärkespalett med primär-, sekundär- och accentfärger

📱

UI/UX-design

Skapa tillgängliga, visuellt konsekventa färger för appens knappar, text och bakgrunder

📊

Datavisualisering

Generera urskiljbara kategorifärger för diagram, tabeller och analysinstrumentpaneler

Bästa praxis för färgdesign

✓ Verifiera färgkontrast (WCAG)

Kontrollera att text/bakgrundspar uppfyller WCAG AA-kontrastkvoten (4,5:1 för normal text).

✓ Begränsa paletten

Håll dig till 3-5 färger: 1 primär, 1 sekundär, 1-2 accent, neutrala. För många färger skapar visuellt brus.

✓ Ta hänsyn till färgpsykologi

Blå=förtroende/professionalism, grön=tillväxt/framgång, röd=brådska/energi, gul=optimism. Anpassa paletten till varumärkesbudskapet.

✓ Testa i mörkt läge

Justera ljusvärden för att skapa mörkt läge-varianter. Rent svart (#000) eller vitt (#fff) är ofta inte idealt — använd nästan-svart och nästan-vitt.

❓ Vanliga frågor

Vad är ett kompletterande färgschema?
Kompletterande färger befinner sig mitt emot varandra på färghjulet (blå och orange, röd och grön etc.). Det skapar hög kontrast och visuell energi — idealiskt för CTA-knappar och accentelement.
När ska jag använda ett analogt färgschema?
Analoga scheman använder 3 intilliggande färger på färghjulet. Det skapar en harmonisk och lugn design med låg kontrast — idealiskt för bakgrunder, gradienter och mjuka UI-designer.
Vad är skillnaden mellan HSL, RGB och Hex?
Alla tre representerar samma färg i olika format. Hex (#6366f1) används i CSS. RGB (99, 102, 241) anger röd/grön/blå. HSL (237°, 84 %, 67 %) använder nyans, mättnad och ljushet — intuitivt för att skapa harmoniska paletter.
Hur skapar man en färgpalett för mörkt läge?
I mörkt läge, sänk ljusvärdena markant (t.ex. L:60 % → L:30 %) och byt roller för text/bakgrund. Behåll liknande nyans och mättnad, justera ljushet för läsbarhet mot mörk bakgrund.