Färgpaletter för teknik bortom företagsblått

En bra färgpalett för teknik handlar mindre om en hjältefärg och mer om ett system: en mörk botten, en ljus botten, en gråskala av neutrala toner, en accent som tillhör dig och konventionella färger för lyckat, varning och fel. Företagsblått fyller accentplatsen hos så många mjukvaruföretag att det har slutat betyda något särskilt. Byt ut accenten mot något din kategori inte äger, håll resten disciplinerat, så läses varumärket fortfarande som kompetent teknik.

Därför väljer techvarumärken blått hela tiden

Blått är säkert. Det läses som lugnt och pålitligt på de flesta marknader, det sitter bra i gränssnitt och det är webbens standardfärg för länkar. Det är goda skäl, och resultatet är ett hav av nästan identiska blå nyanser i bankappar, molninstrumentpaneler och produktivitetsverktyg. Färgpsykologi förklarar associationerna, och problemet är helt enkelt att alla agerade på dem på en gång.

Inget av detta betyder att blått är fel. Det betyder att blått inte kan vara din enda idé. Behåller du det, para det med en oväntad botten, en andra färg eller ett särpräglat material, så att identiteten går att känna igen även utan logotypen.

Åtta färgpaletter för teknik med hexkoder

Varje palett nedan har en botten, en stödjande ton och en accent. De är skrivna som gradienter så att du ser hur färgerna beter sig tillsammans, och sedan uppdelade i färgprover för de två som jobbar hårdast i produktens gränssnitt.

• Nattsvart bläck och syragrön lime passar utvecklarverktyg och infrastruktur: tekniskt, nattligt, omöjligt att förväxla med en bank.
• Grafit och signalorange läses som hårdvara, robotik eller allt fysiskt. Orange bär också bra på mörk produktfotografering.
• Papper och tall är det stilla alternativet för forskning, skrivande och hälsomjukvara, där lugn betyder mer än fart.
• Midnattsviolett och rosa passar konsumentappar och kreativa verktyg som vill ha energi utan standardgradienten från blått till lila.
• Djup teal och mint fungerar för klimat-, data- och fintechvarumärken som vill kännas fräscha snarare än företagsmässiga.
• Kallvitt och elektriskt blått behåller blått men gör det levande och unikt, med nästan inget annat runt omkring.
• Espresso och bärnsten är varmt och ovanligt inom teknik, bra för mjukvara för restaurang och hotell, ljud och allt som sätter människan först.
• Svart och mjuk blåviol är återhållet och exklusivt, nära det utseende som många AI-produkter närmar sig.

Produktpalettens fem delar

Marknadsföringssidor klarar sig med tre färger. En produkt gör inte det, eftersom gränssnitt behöver kantlinjer, inaktiverade tillstånd, markeringar och varningar. Planera de här rollerna innan du väljer nyanser, så förblir paletten sammanhängande medan produkten växer.

Göra en techpalett till designtokens

Namnge färger efter roll, inte efter utseende. En token som heter --accent överlever en omprofilering, medan en token som heter --lime blir en lögn den dag accenten ändras. Definiera varje roll en gång för ljust läge och en gång för mörkt läge, och låt komponenter bara hänvisa till 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örkt läge är där techpaletter bedöms, eftersom utvecklare och avancerade användare ofta lever i det. Design för mörkt läge tar upp detaljerna, som att lyfta bottnen en aning från rent svart och göra statusfärgerna ljusare så att de inte vibrerar. För gradienter som förblir levande på moderna skärmar är oklch-gradienter i CSS värda en titt.

Kontrollera kontrasten innan du släpper

Klara accenter som lime, mint och bärnsten ser underbara ut på mörka bottnar och underkänns som text på vitt. WCAG ber om 4,5:1 för brödtext och 3:1 för stor text och gränssnittselement. Testa varje kombination du planerar att använda och skriv ner vilka kombinationer som är tillåtna. Färgkontrast och tillgänglighet har hela metoden.

Ta paletten bortom gränssnittet

Lanseringsinlägg, konferensbilder och grafik till ändringsloggar är där en techpalett blir ett varumärke. Platta fyllningar av accenten blir snabbt upprepande, så ge marknadssidan en rikare yta: bottenfärgen med ljus som kommer igenom, korn, en långsam förskjutning av accenten. Varumärke för SaaS och varumärke för fintech visar hur det spelar ut sig i två mycket olika kategorier.

Här passar Gradiently in. En Mark ger ett techvarumärke en levande bakgrund som bara du kan exportera med när du har säkrat den, renderas i varje storlek från en länkbild till en bild i ett bildspel och håller versionsnoteringar läsbara genom att flytta sin lugnaste yta bakom orden. Du kan också be Designer om ett lanseringsinlägg, så gör den de andra storlekarna åt dig.