# Fargepalettgeneratorer: få paletter som faktisk fungerer

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

Generatorer er gode til å lage fem pene fargeprøver og dårlige til å fortelle hva du skal gjøre med dem. Den nyttige delen skjer etter at du trykker på knappen.

## The short version

- En fargepalettgenerator lager et fargesett fra en regel, tilfeldig startverdi, foto eller tekstinstruks, men bestemmer ikke hvilken jobb hver farge har.
- De fleste genererte paletter gir alle farger lik tyngde og lignende metning, noe som er pent som fargeprøver og høylytt i et faktisk design.
- En brukbar palett trenger lys eller mørk bunn, tekstfarge, én eller to hovedfarger og en liten aksent.
- Sjekk at paletten dekker et bredt lyshetsspenn, fordi farger med lignende lyshet flyter sammen og ikke består kontrastsjekk.
- Test alltid en generert palett i et faktisk oppsett med ekte ord før du velger den.

En **fargepalettgenerator** er et verktøy som foreslår farger som passer sammen, med fargeteoriregler, tilfeldigheter, foto eller en skrevet instruks. Bruk den når du står fast, og rediger resultatet: legg til nøytral bunn og tekstfarge, gi hver farge en jobb og test i et faktisk design. Generatorens fem prøver er et utgangspunkt. Paletten som virker, er den du former fra dem.

## Hovedtypene av palettgenerator

Alle generatorer gjør én av fire ting under overflaten. Når du vet typen, vet du hva den er god på og hva du må fikse.

| Type | Slik fungerer den | Bra til | Vær oppmerksom på |
| --- | --- | --- | --- |
| Harmonisirkelen | Velger farger ved faste vinkler fra én grunntone: komplementære, analoge, triadiske | Læring og bygging rundt en eksisterende farge | Fem farger med lik metning virker syntetisk |
| Tilfeldig med låsing | Bytter farger, du låser dem du liker og prøver igjen | Oppdagelser og å bryte vaner | Pene kombinasjoner uten struktur |
| Fra et bilde | Henter dominerende farger fra et foto | Å passe til produkt, sted eller kampanjebilde | Grumsete mellomtoner og farger som ikke kan brukes til tekst |
| Fra en instruks | En AI-modell foreslår farger til ord som rolig bakeri | Raske ideer til stemning eller merkevarebrief | Vanlige klisjeer og koder uten kontrastsjekk |

Adobe Color er en kjent harmonisirkel. Coolors er en kjent tilfeldig generator med låsing. De fleste verktøy blander flere metoder.

Vil du forstå reglene bak harmonisirkler, les [fargeharmoni](https://gradiently.design/nb/guide/color-harmony). For fotometoden forklarer [fargepalett fra et bilde](https://gradiently.design/nb/guide/color-palette-from-image) bedre prøvetaking, og [AI-fargepalettgeneratorer](https://gradiently.design/nb/guide/ai-color-palette-generator) dekker instrukser.

## Hvorfor genererte paletter ofte svikter i faktiske design

En generator viser farger som fem like striper. Ekte design er annerledes: én farge dekker mest plass, én bærer teksten og resten brukes i små mengder. Her er et typisk tilfeldig resultat ved siden av samme idé etter justering.

- Rød: #e63946
- Gul: #f1c40f
- Grønn: #2ecc71
- Blå: #3498db
- Lilla: #9b59b6

Som generert: fem mettede toner med lignende styrke. Ingen tekstbunn, ingen ro og ingen leder.

- Bunn #f7f3ec: #f7f3ec
- Tekst #1c2321: #1c2321
- Hovedfarge blågrønn #2a6f68: #2a6f68
- Støttefarge salvie #a8c5b8: #a8c5b8
- Aksent korall #e07a5f: #e07a5f

Etter justering: varm, nesten hvit bunn, nesten svart tekst (14,5:1 mot bunnen), blågrønt som bærer bunnfargen som tekst ved 5,3:1, en rolig støttefarge og én aksent.

## Fem justeringer som gjør en generert palett brukbar

1. **Behold den ene fargen du faktisk liker** Lås den og bruk den som hovedfarge. Alt annet skal støtte den. Er ingen særlig god, generer igjen fremfor å nøye deg.
2. **Legg til bunn og tekstfarge** Generatorer har dem sjelden med. Velg lys bunn, varm eller kjølig nesten hvit, eller mørk bunn, med en tekstfarge som har sterk kontrast. Ton begge litt mot hovedfargen, så de hører sammen.
3. **Spre lysheten** Gjør prøvene til gråtoner i hodet eller på skjermen. Du trenger lyse, middels og mørke verdier, ikke fem middels. Juster til hver farge er tydelig separat.
4. **Senk metningen på alle unntatt én** La aksenten være sterk og ro ned resten. En støttefarge mykere enn hovedfargen får hovedfargen til å virke rikere.
5. **Bestem mengdeforhold** Et godt utgangspunkt er [60-30-10-regelen](https://gradiently.design/nb/guide/60-30-10-rule): bunn omtrent 60%, hovedfarge 30%, aksent 10%. Juster med øyet når du ser det i et oppsett.

For presise justeringer, bruk et fargeformat som skiller lyshet fra tone. [HSL](https://gradiently.design/nb/guide/hsl-colors) er lett å lese, mens [OKLCH](https://gradiently.design/nb/guide/oklch-explained) holder lysheten mer pålitelig på tvers av toner.

## Test paletten i et faktisk oppsett

Fargeprøver skjuler problemer som dukker opp straks ordene kommer. Bruk paletten på noe du faktisk ville laget, som innlegg, meny eller toppseksjon, og se det i størrelsen folk vil se. Sjekk så hvert tekstpar med en [kontrastsjekker](https://gradiently.design/nb/guide/color-contrast-accessibility).

Et stående Instagram-innlegg om en ny meny, satt i en rolig fargefamilie med tydelig, lesbar skrift

En palett viser sin verdi i et ekte format med ekte ord. Sliter overskriften her, endre paletten, ikke overskriften.

En gradient er en rask ekstratest. Bland bunn, hovedfarge og støttefarge: blir blandingen grå i midten, konkurrerer to farger. Det forklares i [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients).

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

Bunn til salvie til blågrønt til tekstfarge, uten grå flekk på veien. Korall holdes utenfor, spart til små aksenter.

## Lagre som variabler, ikke skjermbilde

Når paletten fungerer, navngi fargene etter jobben fremfor tonen, så du kan endre blågrønt senere uten å navngi alt på nytt. I kode betyr det CSS-variabler, i designverktøy navngitte stiler, og i Gradiently merkevarepakken, der paletter, skrifter og tone finnes samlet og Designer bruker dem i det den lager.

```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);
}
```

Rollenavn tåler en ny merkeprofil. En variabel kalt --teal gjør det ikke.

## Søke etter farge fremfor å generere

Noen ganger ønsker du egentlig ikke fem koder, men en ferdig bakgrunn i en fargefamilie. Markedet i Gradiently lar deg søke etter Marks med fargeord som «dyp blågrønn» eller «varm fersken» og filtrere etter uttrykk. Hver Mark er en levende gradient- og materialbakgrunn med egen palett og skriftkarakter, sjekket mot alle andre så ingen ser like ut. Du kan designe gratis med alle som ikke er sikret. Det er en annen vei til samme mål: farger som hører sammen og allerede gjør jobben sin.

## FAQ

### Hva er den beste fargepalettgeneratoren?

Det avhenger av arbeidsmåten: harmonisirkler passer bygging rundt én farge, tilfeldige generatorer med låsing passer oppdagelser, og bildeprøvetaking passer foto. Alle trenger justering etterpå.

### Hvor mange farger bør en palett ha?

De fleste merkevarer fungerer med en bunn, tekstfarge, én eller to hovedfarger og én aksent, fire eller fem totalt. Flere er vanskelige å holde enhetlige.

### Hvorfor ser den genererte paletten dårlig ut i designet?

Vanligvis har fargene lignende lyshet og metning og mangler tydelige roller. Legg til nøytral bunn og tekstfarge, spre lysheten og behold bare én sterk aksent.

### Hvordan sjekker jeg en palett for tilgjengelighet?

Test alle tekst- og bakgrunnspar med en kontrastsjekker, med minst 4,5:1 for brødtekst som mål. Se paletten i gråtoner for å sikre at fargene er ulike.