Färgschemagenerator

Välj en basfärg och få en fullständig palett, komplementär, analog, triadisk, tetradisk eller monokromatisk. Kopiera valfri nyans som HEX, RGB eller HSL. Ingenting lämnar din webbläsare.

Så fungerar Färgschemagenerator

Färgschemageneratorn bygger kompletta färgpaletter från en enda basfärg du väljer: komplementär (mitt emot på nyanshjulet), analog (angränsande nyanser), triadisk (tre jämt fördelade), tetradisk (fyra nyanser i två komplementära par) och monokromatisk (varierande ljushet och mättnad av samma nyans). All palettlogik körs i webbläsaren; inget du anger lämnar din enhet.

Varje genererad palett visar prover med deras HEX- och RGB-värden klara att kopiera. Detta ger designers en startpunkt grundad i färgteori snarare än gissning. Eftersom generatorn är offline-kapabel efter den initiala sidladdningen kan du experimentera fritt med varumärkesfärger under ett kundmöte utan nätverksanslutning. Ange din basfärg i vilken notation du än har, HEX, RGB eller HSL, och varje genererat prov ges tillbaka i alla tre så att du kan kopiera det som ditt designverktyg förväntar sig.

Skrivet av Bastien Sulyan

Så här använder du Färgschemagenerator, steg för steg

Välj en basfärg med färgväljaren eller genom att skriva ett HEX-värde.
Välj en harmonitype från flikarna: komplementär, analog, triadisk, tetradisk eller monokromatisk.
Palettproven visas direkt med deras HEX- och RGB-värden.
Klicka på ett prov för att kopiera dess HEX-värde till urklipp.
Justera basfärgen för att utforska variationer och se hela paletten uppdateras.

Vanliga användningsområden

En designer som börjar en ny varumärkesidentitet väljer sin primärfärg och genererar en triadisk palett för att föreslå trefärgskombinationer till en klient.
En utvecklare som bygger ett mörkt tema använder den monokromatiska paletten för att generera ett urval av toner och skuggor från en enda varumärkesfärg.
En innehållsskapare väljer en analog palett för att välja accentfärger för en presentation som känns sammanhängande utan hård kontrast.
En UI-designer använder den komplementära paletten för att identifiera en högkontrast-accentfärg som sticker ut mot den primära varumärkesfärgen.

Vanliga frågor

Hur fungerar den komplementära paletten?

En komplementär färg är nyansen direkt mitt emot basfärgen på HSL-färghjulet, 180 grader bort. Att placera komplementära färger bredvid varandra skapar maximal kontrast. Verktyget visar basfärgen och dess komplement, plus ljusare och mörkare varianter av var och en.

Vad är skillnaden mellan triadiska och tetradiska paletter?

En triadisk palett använder tre nyanser jämt fördelade med 120 graders mellanrum på färghjulet. En tetradisk palett använder fyra nyanser med 90 graders mellanrum, vilket bildar två komplementära par (kallas också dubbel komplementär eller fyrkantspalett). Tetradiska paletter är mer komplexa och kräver noggrann balansering av proportioner för att undvika visuellt brus.

Lagras eller skickas färgerna jag väljer någonstans?

Nej. Palettgenerering är aritmetik på basfärgens HSL-representation: rotation av nyansvinkeln med fasta belopp, förskjutning av ljushet och mättnad. Varje beräkning körs lokalt i webbläsaren; inget skickas till någon server.

Kan jag exportera paletten som en CSS-fil eller en designtokenfil?

Verktyget visar för närvarande prover med kopieringsbara HEX- och RGB-värden. För en fullständig export av CSS-anpassade egenskaper eller en design-token-JSON, kopiera värdena manuellt till projektets tokenfil eller CSS. En dedikerad exportknapp kan läggas till i en framtida uppdatering.

Följer den här generatorn någon formell färgteoristandard?

Palettberäkningarna använder standard nyansrotationsformler i HSL-färgrymden, vilket är konventionen i de flesta webbdesignverktyg. Den exakta perceptuella enhetligheten hos HSL har begränsningar jämfört med LAB eller OKLCH, men HSL-rotationer producerar paletter som matchar de färghjulskonventioner designers vanligtvis förväntar sig.

Relaterade verktyg

Håll allt lokalt, utforska kompletterande verktyg.

Alla utvecklarverktyg