Fargepalettgeneratorer: få paletter som faktisk fungerer

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.

Vil du forstå reglene bak harmonisirkler, les fargeharmoni. For fotometoden forklarer fargepalett fra et bilde bedre prøvetaking, og AI-fargepalettgeneratorer 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.

Fem justeringer som gjør en generert palett brukbar

1. 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. 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. 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. 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. 5

   Bestem mengdeforhold

   Et godt utgangspunkt er 60-30-10-regelen: 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 er lett å lese, mens OKLCH 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.

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.

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.

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

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.