Färg
BeslutadVarför paletten ser ut som den gör
Aleris färgpalett är varmskiftad. Även gråtonerna lutar åt brunt snarare än blått. Det är ett medvetet val. Varumärkeslöftet — den nära experten — kräver att allt vi gör känns mänskligt och närvarande, inte institutionellt. Petrol ger medicinsk trovärdighet utan att bli kallt företagsblått. Orange är varmt och handlingskraftigt utan att bli alarmerande rött. Sand är lugnt och naturligt — inte kliniskt vitt.
Tre färgfamiljer, tre roller. Paletten kommunicerar innan en enda bokstav är skriven.
Paletten
Petrol — struktur och förtroende
Petrol bär text, rubriker, navigation och strukturella ytor. Det är färgen som säger: vi vet vad vi gör.
| Steg | HEX | Roll |
|---|---|---|
| Petrol | #004851 | Primär text, rubriker, navigation, headerbakgrunder |
| Petrol 80 | #4F868E | Sekundär text, etiketter |
| Petrol 60 | #7FA9AE | Dämpad text, bildtexter, tertiär |
| Petrol 40 | #ABC7C9 | Ramar, inaktiva tillstånd |
| Petrol 20 | #D9E1E2 | Tonade bakgrunder, markerade rader, taggar |
Orange — handling och värme
Orange markerar det som går att göra just nu. Primära knappar, aktiva tillstånd, accenter. Koralvarm, inte signalröd.
| Steg | HEX | Roll |
|---|---|---|
| Orange | #F58C61 | Primär CTA, aktiva tillstånd, accent |
| Orange 80 | #FAAA8D | Hover/aktiv på primär CTA |
| Orange 60 | #FFBE9F | Ljusa accentbakgrunder |
| Orange 40 | #FBD1C0 | Ljusaste orangetonen |
Sand — omgivande lager
Sand är sidbakgrunden. Den skapar lugnet som allt annat vilar mot. Vitt är reserverat för kort och ytor — det som lyfts upp från bakgrunden.
| Steg | HEX | Roll |
|---|---|---|
| Sand | #F2ECE4 | Sidbakgrund (kommunikativa sammanhang) |
| Sand 50 | #FAF8F6 | Sidbakgrund (instrumentella sammanhang) |
| Sand 60 | #E7CEB5 | Mellansand |
| Sand dark | #D9B48F | Varm amber. Även = varningsfärg (kontext avgör) |
Neutrala toner
| Namn | HEX | Roll |
|---|---|---|
| Slate | #D7D2CB | Ramar, avdelare, inaktiva element |
| Gray 300 | #9E9281 | Mellanton, varm grå |
| Gray 500 | #585044 | Mörk varm grå. Sekundär text |
| Vit | #FFFFFF | Kort- och ytbakgrund. Aldrig sidbakgrund |
Pantone och CMYK
Tryckvärdena är konstanta — samma värden oavsett tryckeri eller substrat. Physical dokumenterar hur man specificerar för olika material.
Primärfärger:
| Färg | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| Petrol | 316 C/U | C98 M48 Y49 K46 | 0, 72, 81 | #004851 |
| Orange | 2024 C/U | C0 M56 Y62 K0 | 248, 124, 86 | #F58C61 |
| Sand | N/A | C6 M7 Y11 K0 | 242, 236, 228 | #F2ECE4 |
Sekundärfärger — petrol:
| Steg | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| Petrol 80 | 5483 C/U | C70 M31 Y37 K12 | 79, 134, 142 | #4F868E |
| Petrol 60 | 5493 C/U | C54 M21 Y30 K3 | 127, 169, 174 | #7FA9AE |
| Petrol 40 | 5513 C/U | C38 M12 Y21 K0 | 171, 199, 201 | #ABC7C9 |
Sekundärfärger — orange:
| Steg | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| Orange 80 | 2022 C/U | C0 M38 Y40 K0 | 250, 170, 141 | #FAAA8D |
| Orange 60 | — | — | 255, 190, 159 | #FFBE9F |
| Orange 40 | — | C0 M24 Y23 K0 | 251, 209, 192 | #FBD1C0 |
Sekundärfärger — sand:
| Steg | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| Sand 100 | 727 C/U | C0 M18 Y36 K15 | 217, 180, 143 | #D9B48F |
| Sand 60 | 2309 C/U | C0 M11 Y22 K9 | 231, 206, 181 | #E7CEB5 |
Neutral:
| Färg | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| Slate | Warm Gray 1 C/U | C0 M2 Y5 K16 | 215, 210, 203 | #D7D2CB |
Gradienter
Används sparsamt — främst som bakgrundsytor i visuella element. Ger djup och mjukhet där heldragna petrol eller orange kan kännas för tunga.
| Gradient | Mörk | Ljus | Användning |
|---|---|---|---|
| Petrol | #004851 | #4F868E | Linjär eller radiell, max två steg |
| Orange | #F58C61 | #FFBE9F | Linjär eller radiell, max två steg |
Regler: lågkontrastövergångar, undvik i diagram där platta färger ger bättre tydlighet, WCAG-kontrast mot text måste uppfyllas, ska aldrig distrahera eller dominera.
Statusfärger
Statusfärger kommunicerar tillstånd — aldrig dekoration. De används bara när något har hänt, händer, eller behöver uppmärksamhet.
| Status | HEX | Roll |
|---|---|---|
| Fel | #C14444 | Valideringsfel, destruktiva åtgärder |
| Varning | #D9B48F | Uppmärksamhetstillstånd (= sand dark — kontext skiljer dem åt) |
| Bekräftelse | #4F866E | Slutfört, godkänt |
| Information | #004851 | Informativa meddelanden (= petrol — info är neutral varumärkeskommunikation) |
Varningsfärgen delar HEX-värde med sand dark. Det är medvetet — i statuskontext läses den som varning, i bakgrundskontext som varm sand. Tvetydigheten löses av sammanhanget, inte av ytterligare en färg.
Hårda regler
Sidbakgrund är sand, aldrig vit. Vitt är ytor som lyfts från bakgrunden — kort, modaler, inmatningsfält. Skillnaden skapar den visuella hierarki som gör att sidan andas. Sand för grund, vitt för innehållsytor.
En orange primärknapp per vy. Orange markerar den viktigaste handlingen just nu. Två orangea knappar på samma skärm tvingar användaren att välja mellan lika starka signaler. Sekundära handlingar använder petrol, kontur eller text.
Förmedla aldrig information enbart genom färg. Komplettera alltid med text, ikon eller mönster. Färgblindhet är vanligt — rött/grönt skiljer sig inte åt för 8 % av män.
Ingen dark mode. Aleris använder ljusa gränssnitt. Vårdprodukter bygger på förtroendekonventioner som hör hemma i ljusa miljöer — det gäller digitalt, i tryck och i fysiska rum.
Turquoise används inte. Den fanns i paletten historiskt men togs bort. Den konkurrerade med petrol och skapade visuellt brus. Förekommer den i äldre material är den ett övergångsspår, inte en del av den nuvarande identiteten.
Cream finns inte. Ersatt av sand 50 (#FAF8F6). Använd sand 50 för instrumentella bakgrunder (arbetsytor, verktyg) och sand (#F2ECE4) för kommunikativa sammanhang (landningssidor, patientmaterial).
Använd aldrig godtyckliga HEX-värden. Varje färg i paletten har ett syfte och ett namn. Att introducera egna nyanser — "nästan petrol", "lite ljusare orange" — bryter konsistensen. Paletten är varumärket.
Tillgänglighet
WCAG AA kräver 4,5:1 kontrast för normal text och 3,0:1 för stor text (≥18pt eller ≥14pt fet) och UI-komponenter.
Starka par
| Par | Kontrast | AA text | AA stor text |
|---|---|---|---|
| Petrol på sand | 8,75:1 | ✅ | ✅ |
| Petrol på sand 50 | 9,69:1 | ✅ | ✅ |
| Petrol på vit | 10,27:1 | ✅ | ✅ |
| Vit på petrol | 10,27:1 | ✅ | ✅ |
| Gray 500 på sand | 6,76:1 | ✅ | ✅ |
| Gray 500 på vit | 7,94:1 | ✅ | ✅ |
Petrol på sand eller vit är standardparet. Det klarar alla trösklar med god marginal.
Par som kräver omdöme
| Par | Kontrast | AA text | AA stor text | Vägledning |
|---|---|---|---|---|
| Petrol på orange | 4,30:1 | ❌ | ✅ | Fungerar för stor text och UI-komponenter |
| Gray 300 på vit | 3,05:1 | ❌ | ✅ | Enbart stor text. Inte för brödtext |
| Gray 300 på sand | 2,60:1 | ❌ | ❌ | Enbart dekoration |
| Petrol 60 på sand | 2,19:1 | ❌ | ❌ | Enbart dekoration |
| Bekräftelse (#4F866E) på vit | 4,23:1 | ❌ | ✅ | Nära AA — komplettera alltid med ikon |
| Varning (#D9B48F) på vit | 1,93:1 | ❌ | ❌ | Aldrig som textfärg. Använd som ram eller bakgrund med petrol-text |
Orange-knappens kontrast — en känd spänning
Vit text på orange (#F58C61) ger 2,38:1. Det klarar inte WCAG AA — varken för normal eller stor text. Det här är ett verkligt problem som finns i produktion.
Positionen är:
Petrol text på orange är den tillgänglighetsanpassade standarden. 4,30:1 klarar stor text och UI-komponenter. Knappar med petrol-text på orange-bakgrund är den kombination som rekommenderas.
Där vit text på orange används av varumärkesskäl gäller en minimistorlek. Knapptext satt i minst 18px (eller 14px fet) kvalificerar som "stor text" under WCAG, vilket sänker kravet till 3,0:1. Vit-på-orange klarar inte heller den tröskeln (2,38:1), men i kombination med tillräcklig knappstorlek, tydlig knappform (pill shape) och kontrastrik omgivning (sand-bakgrund) blir knappen identifierbar som interaktivt element.
Det här är en medveten avvägning, inte ett förbiseende. Foundation dokumenterar spänningen. Baseline implementerar den specifika tokenlösningen.
Kontextuellt: hur paletten anpassas
Paletten är konstant. Kompositionen är kontextuell.
En landningssida för patienter använder sand generöst, petrol som textfärg och orange som enstaka accent. Känslan är lugn och tillgänglig. Ett kliniskt gränssnitt för personal komprimerar paletten — petrol tar mer plats, sand drar sig tillbaka, informationsdensiteten ökar. En tryckt patientbroschyr kan ge sand en dominerande roll för att skapa det lugn som formatet tillåter.
Samma färger, olika komposition. Det som styr kompositionen är mottagarens emotionella läge, kanalens förutsättningar och innehållets karaktär. Se Emotionellt läge som designingång och Konstant och kontextuellt för ramverket.
Baseline (digitalt), Communication och Physical dokumenterar hur kompositionen tillämpas i sitt sammanhang.
Snabbtest
Innan du fattar ett färgbeslut:
- Finns färgen i paletten? Om inte — använd den inte. Introducera aldrig egna nyanser.
- Använder du färgen i rätt roll? Petrol för struktur, orange för handling, sand för bakgrund, status enbart för tillstånd.
- Klarar kombinationen tillgänglighetskraven? Kontrollera kontrasttabellen ovan. Komplettera alltid med text eller ikon.
Paletten kommunicerar innan en enda bokstav är skriven. Petrol, sand och orange — i rätt komposition, i rätt sammanhang — är Aleris. Att byta ut dem, blanda in egna nyanser eller ignorera deras roller gör inte materialet mer kreativt. Det gör det mindre igenkännbart.