Vad ingår i en färgpalett för ett varumärke?

En varumärkespalett ger varje färg en uppgift. Primärfärgen är den färg människor minns, till exempel från logotypen och de viktigaste knapparna. En sekundärfärg kompletterar den, en accentfärg får uppmaningar att sticka ut och bakgrunds- och textfärger håller ihop sidan.

Kontrast är lika viktigt som utseende. Riktlinjerna för tillgänglighet till webbinnehåll (WCAG) rekommenderar minst 4.5:1 mellan normal text och dess bakgrund, eller 7:1 för den striktare nivån AAA.

Verktygsbeskrivning

Beskriv ditt varumärke under Om ditt varumärke: vad det gör, vem det riktar sig till och vilken känsla det ska förmedla. Välj en varumärkespersonlighet (Professionell, Lekfull, Lyxig, Minimalistisk, Djärv eller Naturlig), eller låt alternativet Matcha beskrivningen vara valt så härleder AI:n personligheten från din text.

Du får fem namngivna färger: Primär, Sekundär, Accent, Bakgrund och Text. Utdataformatet växlar mellan HEX, RGB, HSL, CMYK och andra format, och varje färg har en kopieringsknapp. Användningsguiden förklarar hur varje färg ska användas, och CSS-variabler ger dig ett kodblock att klistra in i en stilmall. AI:n instrueras att hålla kontrasten mellan texten och bakgrunden på minst 7:1 och att primär- och accentfärgerna ska ha ett kontrastförhållande på minst 3:1.

Exempel

För ”Ett lokalt kafferosteri i Portland. Varmt, välkomnande och hållbart” kan du få en rostbrun primärfärg, en gräddvit bakgrund och en terrakottafärgad accent, med CSS-variabler som dessa:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Funktioner

  • Fem färger med tydliga roller, ett namn och en användningsnotering för varje
  • Sex personligheter, eller en som väljs utifrån din beskrivning
  • Kopiera färgerna i det format du behöver, eller kopiera hela uppsättningen som CSS-variabler

Begränsningar

Verktyget mäter inte kontrasten självt, så kontrollera text- och bakgrundsfärgerna med en kontrastkontroll innan du publicerar resultatet.