QReg5 Design System

Kategoriska paletten

Den kategoriska färgpaletten används när man vill kunna urskilja staplar och linjer mellan varandra. Utan någon inbördes ordning. Lämpliga för fält med värden som inte har någon inbördes ordning.

Exempel på applicering av diagram med olika antal värden från ett värde upp till fem värden

Exempel med olika antal värden och färgapplicering beroende på antal.

Paletten ska appliceras i den ordning som den är uppställd på denna sida. Sekvensen är speciellt framtagen för att maximera kontrasten till omkringliggande färger och bibehålla visuell skillnad även om man har någon färgblindhet eller liknande.

Färre än 6 värden

När man har färre än sex olika värden att presentera finns det fördefinierade kombinationer.

Använd någon av dessa kombinationer så kan personer med någon typ av färgblindhet också skilja på staplarna eller linjerna. De kommer även fungera i svartvita utskrifter.

I kombinationer med fler än ett värde kan man ändra den inbördes ordningen inom varje enskild grupp.

Ett värde

Välj en av följande färger:

TokenValue
Purple-80#491D8B
Blue-80#002D9C
Teal-70#005D5D
Cyan-50*#1192E8
Green-50*#24A148

*Observera att Green-50 och Cyan-50 bör inte användas när man har målområden i sitt diagram. Använder man målområden i diagram bör man använda någon av de andra färgerna.

Två värden

När man vill kunna visa två värden bredvid varandra.

Den första kombinationen används i första hand men man kan även välja utifrån de alternativa kombinationerna.

TokenValue
Purple-80#491D8B
Cyan-50#1192E2

Alternativa kombinationer:
Blue-80#002D9C
Teal-50#009D9A

Purple-70#6929C4
Teal-50#009D9A

Cyan-50#1192E8
Teal-80#004144

Blue-80#002D9C
Green-50#24A148

Magenta-50#EE5396
Purple-80#491D8B

Tre värden

När man vill visa tre värden i samma diagram.

Välj någon av dessa färgkombinationer:

TokenValue
Cyan-80#003A6D
Purple-70#6929C4
Teal-50#009D9A

Alternativa kombinationer:
Purple-50#A56EFF
Magenta-60#D12771
Teal-70#005D5D

Purple-70#6929C4
Green-50#24A148
Teal-80#004144

Purple-70#6929C4
Cyan-50#1192E8
Magenta-50#EE5396

Purple-50#A56EFF
Teal-70#005D5D
Blue-80#002D9C

Fyra värden

När man vill visa fyra värden i samma diagram.

Välj någon av dessa färgkombinationer:

TokenValue
Purple-70#6929C4
Cyan-50#1192E8
Blue-80#002D9C
Teal-50#009D9A

Alternativa kombinationer:
Teal-50#009D9A
Blue-80#002D9C
Purple-50#A56EFF
Magenta-70#9F1853

Cyan-50#1192E8
Teal-80#004144
Orange-50#EB6200
Purple-80#491D8B

Magenta-70#9F1853
Red-50#FA4D56
Red-90#520408
Purple-50#A56EFF

Fem värden

När man vill visa fem värden i samma diagram.

Välj någon av dessa färgkombinationer:

TokenValue
Blue-80#002D9C
Teal-50#009D9A
Magenta-70#9F1853
Red-90#520408
Purple-50#A56EFF

Alternativa kombinationer:
Purple-70#6929C4
Cyan-50#1192E8
Teal-70#005D5D
Red-90#520408
Magenta-70#9F1853

Fler än 5 värden

Har man fler än fem värden som ska presenteras är dessa färger är framtagna när man vill kunna skilja på respektive stapel.

Paletten för att applicerad i sekvens. Sekvensen är speciellt framtagen för att maximera kontrasten till omkringliggande färger och att skala visuell skillnad.

Palett med 14st färger den kategoriska paletten

Nr.TokenValue
1.Purple-80#491D8B
2.Cyan-50#1192E8
3.Teal-70#005D5D
4.Magenta-70#9F1853
5.Red-90#520408
6.Green-50#24A148
7.Blue-80#002D9C
8.Magenta-50#EE5396
9.Yellow-60#8E6A00
10.Teal-50#009D9A
11.Cyan-90#012749
12.Orange-70#8A3800
13.Red-50#FA4D56
14.Purple-50#A56EFF

Exempel på diagram med 14 olika färger applicerade

Exempeldiagram där färgpaletten med 14 olika värden är applicerad.

Fler än 14 värden (Beta)

Har man i undantagsfall behöver fler än dessa 14 färger får man utöka sekvensen genom att lägga till värden från den sekvensiella paletten. Man följer då samma ordning av färg som i denna och börjar med “Purple”; sen “Cyan” osv. Man får då gå ett steg upp i skalan eller ett steg ner beroende på hur många fler stapar man behöver.

Beta: 1-24 för alla regioner

Beta palett för 1 till 24 färger

Endast beta: Exempelpalett med 24 färger för applicering på regioner etc.