Farvepaletter til tech ud over korporativ blå

En god farvepalet til tech handler mindre om én hovedfarve og mere om et system: en mørk bund, en lys bund, en skala af neutrale grå, én accent, der tilhører dig, og konventionelle farver til succes, advarsel og fejl. Korporativ blå fylder accentpladsen hos så mange softwarevirksomheder, at den er holdt op med at betyde noget bestemt. Skift accenten ud med noget, din kategori ikke ejer, hold resten disciplineret, og brandet opleves stadig som kompetent teknologi.

Hvorfor techbrands bliver ved med at vælge blå

Blå er sikker. Den opleves som rolig og pålidelig på de fleste markeder, den sidder godt i brugerflader, og den er webbens standardfarve for links. Det er gode grunde, og resultatet er et hav af næsten ens blå nuancer på tværs af bankapps, cloud-dashboards og produktivitetsværktøjer. Farvepsykologi forklarer associationerne; problemet er simpelthen, at alle handlede på dem på én gang.

Intet af dette betyder, at blå er forkert. Det betyder, at blå ikke kan være din eneste idé. Beholder du den, så kombiner den med en uventet bund, en anden farve eller et karakteristisk materiale, så identiteten kan genkendes, selv når logoet er fjernet.

Otte farvepaletter til tech med hexkoder

Hver palet nedenfor har en bund, en støttetone og en accent. De er skrevet som gradienter, så du kan se, hvordan farverne opfører sig sammen, og derefter delt op i farveprøver for de to, der arbejder hårdest i en produktbrugerflade.

• Natblæk og syrelime passer til udviklerværktøjer og infrastruktur: teknisk, natlig og umulig at forveksle med en bank.
• Grafit og signalorange opleves som hardware, robotter eller noget fysisk. Orange står også godt på mørke produktfotos.
• Papir og fyr er det stille valg til software inden for forskning, skrivning og sundhed, hvor ro betyder mere end fart.
• Midnatsviolet og pink passer til forbrugerapps og kreative værktøjer, der vil have energi uden standardgradienten fra blå til lilla.
• Dyb petrol og mint virker til brands inden for klima, data og fintech, der vil føles friske snarere end korporative.
• Kølig hvid og elektrisk blå beholder blå, men gør den klar og enestående med næsten intet andet omkring.
• Espresso og rav er varm og usædvanlig i tech, god til software til hotel og restauration, lyd og alt, hvor mennesket kommer først.
• Sort og blød lavendelblå er afdæmpet og eksklusiv, tæt på det look, mange AI-produkter er ved at samles om.

De fem dele af en produktpalet

Marketingsider kan klare sig med tre farver. Et produkt kan ikke, fordi brugerflader kræver kanter, deaktiverede tilstande, fremhævninger og advarsler. Planlæg rollerne, før du vælger nuancer, så forbliver paletten sammenhængende, mens produktet vokser.

Sådan gør du en techpalet til design tokens

Navngiv farver efter rolle, ikke efter udseende. En token kaldet --accent overlever et rebrand; en token kaldet --lime bliver en løgn den dag, accenten skifter. Definer hver rolle én gang til lys tilstand og én gang til mørk tilstand, og lad komponenterne kun henvise til roller.

:root {
  --ground: #fafaf7;
  --surface: #ffffff;
  --text: #111827;
  --text-muted: #4b5563;
  --border: #d9dde3;
  --accent: #3344ff;
  --on-accent: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1020;
    --surface: #141a2e;
    --text: #eef1f6;
    --text-muted: #8a94a8;
    --border: #1e2a4a;
    --accent: #c6f432;
    --on-accent: #0b1020;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
  }
}

Mørk tilstand er der, hvor techpaletter bliver bedømt, fordi udviklere og superbrugere ofte lever i den. Design til mørk tilstand dækker detaljerne, som at løfte bunden en smule fra ren sort og gøre statusfarver lysere, så de ikke vibrerer. Til gradienter, der forbliver klare på moderne skærme, er oklch-gradienter i CSS et kig værd.

Tjek kontrasten, før du lancerer

Klare accenter som lime, mint og rav ser vidunderlige ud på mørke bunde og dumper som tekst på hvid. WCAG kræver 4,5:1 til brødtekst og 3:1 til stor tekst og brugerfladeelementer. Test hver kombination, du har tænkt dig at bruge, og skriv ned, hvilke kombinationer der er tilladt. Farvekontrast og tilgængelighed har hele metoden.

Sådan tager du paletten ud over brugerfladen

Lanceringsopslag, konferenceslides og grafik til changelogs er der, hvor en techpalet bliver til et brand. Flade flader i accentfarven bliver hurtigt ensformige, så giv marketingsiden en rigere overflade: bundfarven med lys, der skinner igennem, kornstruktur, en langsom drift af accenten. Branding til SaaS og branding til fintech viser, hvordan det udspiller sig i to meget forskellige kategorier.

Det er her, Gradiently passer ind. En Mark giver et techbrand en levende baggrund, som kun du kan eksportere med, når du har sikret dig den, renderes i alle størrelser fra et linkbillede til et slide og holder release notes læselige ved at flytte sit roligste område bag ordene. Du kan også bede Designer om et lanceringsopslag, så laver den de andre størrelser for dig.