# Färgpalettgeneratorer: så får du paletter som faktiskt fungerar

[Canonical HTML page](https://gradiently.design/sv/guide/color-palette-generator)

Generatorer är lysande på att ta fram fem vackra färgprover och dåliga på att säga vad du ska göra med dem. Det användbara händer efter att du tryckt på knappen.

## The short version

- En färgpalettgenerator tar fram en uppsättning färger utifrån en regel, ett slumpfrö, ett foto eller en textprompt, men den avgör inte vilken färg som gör vilket jobb.
- De flesta genererade paletter ger varje färg lika tyngd och liknande mättnad, vilket ser bra ut som färgprover och högljutt i en riktig design.
- En användbar palett behöver en ljus eller mörk bakgrund, en bläckfärg för text, en eller två huvudfärger och en liten accent.
- Kontrollera att paletten spänner över ett brett ljushetsspann, eftersom färger med liknande ljushet flyter ihop och faller på kontrastkontroller.
- Testa alltid en genererad palett på en riktig layout med riktiga ord innan du bestämmer dig.

En **färgpalettgenerator** är ett verktyg som föreslår en uppsättning färger som ser bra ut tillsammans, med hjälp av färgteoretiska regler, slump, ett foto eller en skriven prompt. Använd en för att komma loss, redigera sedan resultatet: lägg till en neutral bakgrund och en textfärg, ge varje färg ett jobb och testa den på en riktig design. Generatorns fem färgprover är en startpunkt. Paletten som fungerar är den du formar av dem.

## De viktigaste typerna av palettgeneratorer

Varje generator gör en av fyra saker under huven. Att veta vilken sort du använder säger vad den är bra på och vad du måste rätta till.

| Typ | Så fungerar den | Bra för | Se upp med |
| --- | --- | --- | --- |
| Harmonihjul | Väljer färger i fasta vinklar från en basnyans: komplementär, analog, triadisk | Att lära sig, och att bygga kring en färg du redan har | Fem färger i samma mättnad, vilket ser syntetiskt ut |
| Slump med lås | Blandar färger; du låser de du gillar och blandar igen | Upptäckter, och att bryta en vana | Trevliga kombinationer utan struktur bakom |
| Från en bild | Hämtar de dominerande färgerna i ett foto | Att matcha en produkt, en plats eller ett kampanjfoto | Leriga mellantoner, och färger du inte kan använda till text |
| Från en prompt | En AI-modell föreslår färger för ord som lugnt bageri | Snabba idéer för en stämning eller varumärkesbrief | Populära klichéer, och koder ingen har kontrollerat för kontrast |

Adobe Color är ett välkänt harmonihjul; Coolors är en välkänd slumpgenerator med lås. De flesta verktyg blandar flera metoder.

Om du vill förstå reglerna bakom harmonihjul, läs [färgharmoni](https://gradiently.design/sv/guide/color-harmony). För fotometoden förklarar [färgpalett från en bild](https://gradiently.design/sv/guide/color-palette-from-image) hur du väljer bättre prover, och [AI-färgpalettgeneratorer](https://gradiently.design/sv/guide/ai-color-palette-generator) tar upp prompting.

## Varför genererade paletter ofta misslyckas i riktiga designs

En generator visar färger som fem lika breda ränder. Riktiga designs är inte alls så: en färg täcker det mesta av ytan, en bär orden och resten syns i små mängder. Här är ett typiskt slumpresultat bredvid samma idé efter redigering.

- Röd: #e63946
- Gul: #f1c40f
- Grön: #2ecc71
- Blå: #3498db
- Lila: #9b59b6

Som genererad: fem mättade nyanser med liknande styrka. Inget att läsa text på, inget lugnt och ingenting som bestämmer.

- Bakgrund #f7f3ec: #f7f3ec
- Bläck #1c2321: #1c2321
- Blågrön huvudfärg #2a6f68: #2a6f68
- Stödjande salvia #a8c5b8: #a8c5b8
- Korallaccent #e07a5f: #e07a5f

Efter redigering: en varm benvit bakgrund, ett nästan svart bläck (14,5:1 på bakgrunden), ett blågrönt som bär bakgrundsfärgen som text med 5,3:1, en stillsam stödfärg och en accent.

## Fem justeringar som gör vilken genererad palett som helst användbar

1. **Behåll den enda färgen du faktiskt gillar** Lås den och behandla den som huvudfärg. Allt annat finns för att stödja den. Om inget sticker ut, generera igen i stället för att nöja dig.
2. **Lägg till en bakgrund och ett bläck** Generatorer tar sällan med dem. Välj en ljus bakgrund (en varm eller sval benvit) eller en mörk, och en bläckfärg för text som kontrasterar starkt mot den. Tona båda svagt mot din huvudfärg så att de hör ihop.
3. **Sprid ljusheten** Gör färgproverna gråa i tanken eller på skärmen. Du vill ha ljusa, mellan- och mörka värden, inte fem mellantoner. Justera ljusheten tills varje färg är tydligt skild.
4. **Sänk mättnaden på alla utom en** Låt accenten förbli levande och lugna de andra. En stödfärg som är mjukare än huvudfärgen får huvudfärgen att se rikare ut.
5. **Tilldela proportioner** En bra utgångsfördelning är [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule): bakgrund omkring 60 %, huvudfärg omkring 30 %, accent omkring 10 %. Justera med ögat när du ser det i en layout.

För att göra de här justeringarna exakt, arbeta i ett färgformat som skiljer ljushet från nyans. [HSL](https://gradiently.design/sv/guide/hsl-colors) är lätt att läsa; [OKLCH](https://gradiently.design/sv/guide/oklch-explained) är bättre på att hålla ljusheten ärlig över olika nyanser.

## Testa paletten på en riktig layout

Färgprover döljer problem som dyker upp så fort orden kommer. Lägg din palett på något du verkligen skulle göra, som ett inlägg, en meny eller en hero-sektion, och titta på den i den storlek folk kommer att se den. Kontrollera sedan varje textpar med en [kontrastkontroll](https://gradiently.design/sv/guide/color-contrast-accessibility).

Ett stående Instagram-inlägg som meddelar en ny meny, satt i en lugn färgfamilj med tydlig, läsbar text

En palett förtjänar sin plats i ett riktigt format med riktiga ord. Om rubriken kämpar här, byt paletten, inte rubriken.

En gradient är ett snabbt extra test. Blanda bakgrunden, huvudfärgen och stödfärgen: om blandningen blir grå i mitten slåss två av färgerna, vilket förklaras i [leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients).

Den redigerade paletten som gradient: `linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)`

Bakgrund till salvia till blågrönt till bläck, utan grå fläck på vägen. Korallen står utanför, sparad till små accenter.

## Spara den som tokens, inte som skärmdump

När paletten fungerar, namnge färger efter deras uppgift snarare än deras nyans, så att du kan ändra det blågröna senare utan att döpa om allt. I kod betyder det CSS-variabler; i designverktyg namngivna stilar; i Gradiently varumärkeskitet, där paletter, typsnitt och röst bor tillsammans och Designer tillämpar dem på det den gör.

```css
:root {
  --color-ground:  #f7f3ec;
  --color-ink:     #1c2321;
  --color-main:    #2a6f68;
  --color-support: #a8c5b8;
  --color-accent:  #e07a5f;
}

.button {
  background: var(--color-main);
  color: var(--color-ground);
}
```

Rollnamn överlever en omprofilering. En variabel som heter --teal gör det inte.

## Söka på färg i stället för att generera

Ibland vill du egentligen inte ha fem koder utan en färdig bakgrund i en färgfamilj. Marknaden i Gradiently låter dig söka Marks på färgord som "djupt blågrönt" eller "varm persika" och filtrera efter utseende. Varje Mark är en levande gradient- och materialbakgrund med egen palett och typografisk röst, kontrollerad mot alla andra så att inga två ser likadana ut, och du kan designa med vilken oreserverad som helst gratis. Det är en annan väg till samma mål: färger som hör ihop, redan med sina uppgifter.

## FAQ

### Vilken är den bästa färgpalettgeneratorn?

Det beror på hur du arbetar: harmonihjul passar för att bygga kring en färg, slumpgeneratorer med lås passar för upptäckter och bildprovtagare passar för att matcha ett foto. Alla behöver redigeras efteråt.

### Hur många färger ska en palett ha?

De flesta varumärken fungerar bra med en bakgrund, ett bläck, en eller två huvudfärger och en accent, alltså fyra eller fem totalt. Fler än så är svårt att hålla enhetligt.

### Varför ser min genererade palett dålig ut i min design?

Oftast har färgerna liknande ljushet och mättnad och inga tydliga roller. Lägg till en neutral bakgrund och en textfärg, sprid ljusheten och behåll bara en levande accent.

### Hur kontrollerar jag en palett för tillgänglighet?

Testa varje par av text och bakgrund med en kontrastkontroll, med minst 4,5:1 som mål för brödtext, och se paletten i gråskala för att försäkra dig om att färgerna är åtskilda.