Hoppa till innehåll
🛠️
Whiz Tools

Färgpalettgenerator - Skapa harmoniska färgscheman

Gratis färgpalettgenerator skapar vackra kompletterande, analoga, triadiska och monokromatiska färgscheman direkt. Välj en primärfärg och generera harmoniska paletter för webbdesign, grafik och varumärkesprojekt.

Enkel färgpalettgenerator

Välj harmonityp

Genererad palett

Välj en färg och harmonityp för att generera en palett

Om färgharmonier

Färgharmonier är kombinationer av färger som är behagliga för ögat. De skapar en känsla av ordning och balans i design.

Harmonityper

  • Komplementär: Färger som är motsatta varandra på färghjulet, skapar hög kontrast och levande utseende.
  • Analog: Färger intill varandra på färghjulet, skapar en lugn och bekväm design.
  • Triadisk: Tre färger jämnt fördelade runt färghjulet, erbjuder stark visuell kontrast samtidigt som de bibehåller harmoni.
  • Monokromatisk: Olika nyanser, toner och tints av en enda färg, skapar ett enhetligt utseende med subtila variationer.
Laddningsberäknare...
📚

Dokumentation

Vad är en färgpalettgenerator?

En färgpalettgenerator är ett verktyg som bygger en uppsättning matchande färger utifrån en startfärg, kallad primärfärgen. Den här färgpalettgeneratorn tar en primärfärg och en harmonityp och beräknar sedan resten av paletten med hjälp av regler från färgteorin. De fyra harmonityper som stöds är komplementär, analog, triadisk och monokromatisk.

Så bygger verktyget en palett

Verktyget omvandlar primärfärgen från hexkod (till exempel #3B82F6) till färgmodellen HSL. HSL beskriver en färg med tre tal:

  • Nyans: färgens position på ett 360-graders färghjul (0° är röd, 120° är grön och 240° är blå).
  • Mättnad: hur intensiv färgen är, från 0 % (grå) till 100 % (ren färg).
  • Ljushet: hur nära svart eller vitt färgen ligger, från 0 % (svart) till 100 % (vitt).

Varje harmonityp ändrar nyansen, ljusheten eller båda och omvandlar sedan resultatet tillbaka till en hexkod.

Så beräknas komplementärfärger

Formeln:

h′=(h+180) mod 360h' = (h + 180) \bmod 360

där h är primärfärgens nyans i grader och h′ den nya nyansen. Mod-steget för tillbaka ett resultat som passerar ett helt varv till färghjulet.

Mättnaden och ljusheten förblir oförändrade.

Räkneexempel: Ren blå, #0000FF, har nyansen 240°, mättnaden 100 % och ljusheten 50 %. Om 180° läggs till blir nyansen 60°. När nyansen 60° omvandlas tillbaka till hex med samma mättnad och ljushet blir resultatet #FFFF00, en gul färg. Verktyget parar alltså ihop blått med gult, inte med orange.

Det kan vara förvirrande eftersom konstkurser ofta lär ut ett annat färghjul, RYB-färghjulet för pigment (rött–gult–blått), där blått har orange som motsatsfärg. Det här verktyget använder det RGB-baserade HSL-färghjulet som används av skärmar, så de komplementära färgparen skiljer sig från färghjulet för färgblandning.

Så beräknas analoga färger

Analoga färger ligger nära primärfärgen på färghjulet. Verktyget genererar två nyanser 30° bort och två nyanser 60° bort från primärfärgens nyans, alla med samma mättnad och ljushet.

h±30∘,h±60∘h \pm 30^{\circ}, \qquad h \pm 60^{\circ}

där h är primärfärgens nyans.

Räkneexempel: Blå, #0000FF (nyans 240°), ger nyansen 270° (#8000FF), nyansen 210° (#0080FF), nyansen 300° (#FF00FF) och nyansen 180° (#00FFFF). Tillsammans med primärfärgen innehåller paletten fem färger.

Så beräknas triadiska färger

Triadiska färger ligger 120° från varandra på färghjulet och bildar en jämnt fördelad trio tillsammans med primärfärgen.

h+120∘,h+240∘h + 120^{\circ}, \qquad h + 240^{\circ}

Räkneexempel: Röd, #FF0000 (nyans 0°), ger nyansen 120° (#00FF00, grön) och nyansen 240° (#0000FF, blå). Trefärgsuppsättningen är röd, grön och blå, samma tre nyanser som används som primärfärger på digitala skärmar.

Så beräknas monokromatiska färger

Monokromatiska färger behåller samma nyans och mättnad och ändrar bara ljusheten. Verktyget ändrar ljusheten med 15 och 30 procentenheter i vardera riktningen, med gränserna 5 % och 95 %.

l±15,l±30l \pm 15, \qquad l \pm 30

där l är primärfärgens ljushet i procentenheter.

Räkneexempel: Blå, #0000FF (ljushet 50 %), ger ljusheten 65 % (#4D4DFF), ljusheten 35 % (#0000B3), ljusheten 80 % (#9999FF) och ljusheten 20 % (#000066).

På grund av gränserna 5 % och 95 % kan en primärfärg som redan är mycket ljus eller mycket mörk nå samma gräns två gånger. Svart, #000000, ger ljusheten 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) och återigen 5 % (#0D0D0D), så en färg upprepas.

Använda verktyget

  1. Välj en primärfärg med färgväljaren eller skriv in en hexkod, till exempel #3B82F6.
  2. Välj en harmonityp: komplementär, analog, triadisk eller monokromatisk.
  3. Läs den genererade paletten. Varje färgruta visar sin hexkod på en knapp.
  4. Klicka på knappen för att kopiera hexkoden eller använd ”Copy All Colors” för att kopiera hela paletten på en gång.

Kontroll av kontrast för tillgänglighet

Varje färgruta visar två små märken: ett för kontrasten mot vitt och ett för kontrasten mot svart. Verktyget beräknar ett kontrastförhållande med formeln från WCAG (Web Content Accessibility Guidelines):

C=L1+0.05L2+0.05C = \frac{L_{1} + 0.05}{L_{2} + 0.05}

där C är kontrastförhållandet.

L1 är den relativa luminansen för den ljusare färgen och L2 är den relativa luminansen för den mörkare färgen. Luminansen beräknas utifrån färgens röda, gröna och blå värden. Ett märke visar ”AA” när förhållandet är 4,5 eller högre, vilket är WCAG:s miniminivå för text i normal storlek. Det visar ”!” när förhållandet är lägre än 4,5. Om man håller pekaren över ett märke visas det exakta förhållandet. Svart text på vit bakgrund får förhållandet 21, det högsta möjliga värdet.

Verktyget använder samma kontrastregel för att välja färg på kopieringsknappen för varje färgruta. Det jämför färgrutans färg med svart och vitt och använder sedan den av de två som ger bäst läsbarhet. Bytet sker vid en relativ luminans på ungefär 0,179, den punkt där båda förhållandena är lika.

Vanliga frågor och svar

Vad är en färgpalettgenerator? Det är ett verktyg som skapar en uppsättning färger som fungerar tillsammans, med utgångspunkt i en primärfärg och en vald harmoniregel.

Varför parar verktyget ihop blått med gult i stället för orange när det gäller komplementärfärger? Verktyget roterar nyansen 180° på HSL-färghjulet, som bygger på hur skärmar blandar rött, grönt och blått ljus. Färghjulet med rött, gult och blått som lärs ut i konstundervisningen ger andra komplementärpar, eftersom det blandar pigment i stället för ljus.

Hur många färger ger varje harmonityp? Den komplementära harmonin ger totalt 2 färger (inklusive primärfärgen). Den triadiska harmonin ger 3. Den analoga harmonin ger 5. Den monokromatiska harmonin ger 5.

Vilken färgmodell använder verktyget internt? HSL (nyans, mättnad och ljushet). Det omvandlar den inmatade hexkoden till HSL, utför beräkningarna och omvandlar sedan resultatet tillbaka till hex.

Kontrollerar verktyget om färgerna är tillgängliga? Ja. Varje färgruta visar om den har tillräcklig kontrast mot vitt och svart för att uppfylla WCAG AA-standarden för normal text, som kräver ett förhållande på minst 4,5.

Kan jag använda mer än en harmonityp i ett projekt? Ja. Många designer kombinerar harmonityper, till exempel en analog uppsättning för huvudfärgerna och en komplementär färg för en knapp eller markering.

Färgformat

Verktyget skriver varje genererad färg som en hexkod med sex siffror, föregången av tecknet # (till exempel #ff0000 för rött). Hexkoder motsvarar direkt röda, gröna och blå värden från 0 till 255 vardera. Primärfärgen visas exakt som den angavs, så en förkortad tresiffrig kod som #F00 behåller kortformatet. Tresiffriga koder betyder samma färg som sexsiffriga koder: varje siffra dubbleras, så #F00 är #FF0000. HSL är ett alternativt sätt att beskriva samma färger med nyans, mättnad och ljushet i stället för mängder av rött, grönt och blått.