Färger i KI:s grafiska profil

Från och med den 20 oktober utökas Karolinska Institutets färgpalett som har sin utgångspunkt i plommonfärgen, en av KI:s främsta identitetsbärare. Den nya färgpaletten är framtagen för att skapa dynamik och ett modernt uttryck, samt bidrar till att KI har ett visuellt uttryck som hänger ihop. Färgerna uppfyller tillgänglighetskraven vad gäller kontrast och läsbarhet.

Exempel på KI:s övergripande färguttryck
Färgernas fördelning (svart undantaget som i huvudsak används i text) syftar till att ge en fingervisning om hur det övergripande färguttrycket ska vara.

Primärfärger

Karolinska Institutet har fem primärfärger förutom svart och vit; Mörk plommon, orange, ljusorange, ljusblå och plommon. 

Plommon och mörk plommon är tillsammans med logotypen KI:s främsta identitetsbärare. Mörk plommon används i text, som bakgrundsfärg och i infografik. Plommon används främst i logotypen och infografik/illustrationer, dock aldrig som bakgrundsfärg (i nyproduktioner). Ljusorange och ljusblå används primärt, tillsammans med vit, som bakgrundsfärger. Orange används som accentfärg till exempel för att lyfta fram specifikt innehåll. Svart används i huvudsak som textfärg. 

Exempel på KI:s primärfärger
KI:s primärfärger.

Primärfärgernas färgkoder

mörk plommon
Primärfärgen mörk plommon.

Mörk plommon

För tryck:

CMYK 20/100/0/70
PMS 229c / 2357u

För webb:

RGB 79/4/51
HEX# 4F0433

Orange
Primärfärgen orange.

Orange

För tryck:

CMYK 0/60/50/0
PMS 170c / 2024u

För webb:

RGB 255/135/111
HEX# FF876F

ljusorange
Primärfärgen ljusorange.

Ljusorange

För tryck:

CMYK 0/7/5/0
PMS 9280c / 9061u

För webb: 

RGB 254/238/235
HEX# FEEEEB

Ljusblå
Primärfärgen ljusblå.

Ljusblå

För tryck:

CMYK 8/0/5/0
PMS 50% 9481c / 9424u

För webb:

RGB 237/244/244
HEX# EDF4F4

Exempel på primärgen plommon
Primärfärgen plommon.

Plommon (logotypfärg)

För tryck:

PMS 228c/u
CMYK 20/100/0/40

För webb:

RGB 135/0/82
HEX# 870052

Att tänka på!

Även när en institution, enhet eller avdelning inom KI är avsändare, till exempel om du gör en affisch för en föreläsning ni anordnar, gäller fortfarande KI:s grafiska profil.

Funktionsfärger

Funktionsfärgerna kan användas för diagram, infografik eller illustrationer.

KI:s funktionsfärger består av 6 färgkluster: 

  1. plommon
  2. orange
  3. blå
  4. grå
  5. grön
  6. gul

Varje kluster innehåller i sin tur tre nyanser med varierande färgintensitet. (Siffrorna anger prioriteringsordning).

Exempel KI:s funktionsfärger
KI:s funktionsfärger.

Färghantering diagram

För att säkerställa ett enhetligt uttryck, samt bra kontraster använder vi oss av en fast färgordning, där mörka och ljusa toner turas om:

  1. Mörk plommon
  2. Orange
  3. Plommon
  4. Ljusorange (Obs! Specialvärde för infografik)
  5. Blå
  6. Ljusblå (Obs! Specialvärde för infografik)
  7. Grå
  8. Ljusgrå (Obs! Specialvärde för infografik)
  9. Grön
  10. Ljusgrön
  11. Gul
  12. Ljusgul

För tillgänglighetens skull, ska texter eller siffror vara i svart och placeras intill/bredvid stapeln/diagramsektionen.

Man bör på ljusare grafer ha en kantlinje på 0,5 pt i svart för att det lättare skall gå och se skillnaden mellan olika färger. 

illustration av färgordning i diagram.
Färgordning för diagram.

Färghantering – infografik

Även infografik bygger KI:s identitet. Därför ska i första hand primärfärgernas färgkluster plommon (1.) och orange (2.) användas.

För att undvika ett rörigt uttryck ska inte fler än två färgkluster användas.

illustration av exempel på färger i infografik
Exempel på färger i infografik.

Texter som ska ligga på färgad bakgrund kan antingen vara svarta eller vita. Välj den färgen som skapar störst kontrast mot bakgrundsfärgen.

Mörk plommon
Funktionsfärgen mörk plommon.

Mörk plommon

För tryck:

CMYK 20/100/0/70
PMS 229c / 2357u

För webb:

RGB 79/4/51
HEX# 4F0433

Plommon
Funktionsfärgen plommon.

Plommon (logotypfärg)

För tryck:

CMYK 20/100/0/40
PMS 228c/u

För webb:

RGB 135/0/82
HEX# 870052

Ljus plommon
Funktionsfärgen ljus plommon.

Ljus plommon

För tryck:

CMYK 8/15/5/0
PMS 9323c/u

För webb:

RGB 237/219/228
HEX# EDDBE4

Mörk orange
Funktionsfärgen mörk orange.

Mörk orange

För tryck:

CMYK 0/90/60/30
PMS 201c / 187u

För webb:

RGB 184/65/69
HEX# B84145

Orange
Funktionsfärgen orange.

Orange

För tryck:

CMYK 0/60/50/0
PMS 170c / 2024u

För webb:

RGB 255/135/111
HEX# FF876F

Ljusorange
Ljusorange (infografik).

Ljus orange (infografik)

För tryck:

CMYK 0/15/15/0

För webb:

RGB 255/221/214
HEX# FFDDD64
HEX# FFDDD6

Mörkblå
Funktionsfärgen mörkblå.

Mörkblå

För tryck:

CMYK 100/70/60/40
PMS 2217c / 3165u

För webb:

RGB 0/44/52
HEX# 002C34

Blå
Funktionsfärgen blå.

Blå

För tryck:

CMYK 70/0/27/0
PMS 2397c/u

För webb:

RGB 77/181/188
HEX# 4DB5BC

Ljusblå infografik
Ljusblå (infografik).

Ljusblå (infografik)

För tryck:

CMYK 18/0/10/0

För webb:

RGB 204/235/237
HEX# CCEBED

Svart
Funktionsfärgen svart

Svart

För tryck:

CMYK 0/0/0/100
PMS Black

För webb:

RGB 0/0/0
HEX# 000000

Grå
Funktionsfärgen grå.

Grå

För tryck:

CMYK 0/0/0/70
PMS 70% Black c/u

För webb:

RGB 102/102/102
HEX# 666666

Ljusgrå
Funktionsfärgen ljusgrå.

Ljusgrå

För tryck:

CMYK 0/0/0/10
PMS 10% Black c/u

För webb:

RGB 241/241/241
HEX# F1F1F1

För infografik:

RGB 221/222/224 
HEX# DDDEEO

Mörkgrön
Funktionsfärgen mörkgrön.

Mörkgrön

För tryck:

CMYK 100/60/90/30
PMS 343c / 342u

För webb:

RGB 9/67/52
HEX# 094334

Grön
Funktionsfärgen grön.

Grön

För tryck:

CMYK 65/0/60/0
PMS 346c / 345u

För webb:

RGB 84/185/134
HEX# 54B986

Ljusgrön
Funktionsfärgen ljusgrön.

Ljusgrön

För tryck:

CMYK 25/0/23/0
PMS 566c/u

För webb:

RGB 199/236/220
HEX# C7ECDC

Mörkgul
Funktionsfärgen mörkgul.

Mörkgul

För tryck:

CMYK 0/50/100/0
PMS 2012c / 130u

För webb:

RGB 245/154/0
HEX# F59A00

Gul
Funktionsfärgen gul.

Gul

För tryck:

CMYK 0/20/60/0
PMS 1345c / 2005u

För webb:

RGB 255/198/109
HEX# FFC66D

Ljusgul
Funktionsfärgen ljusgul.

Ljusgul

För tryck:

CMYK 0/10/25/0
PMS 9160c / 9224u

För webb:

RGB 255/231/194
HEX# FFE7C2

Färg och tillgänglighet

Färg- och textkombinationer

Cirklarna med bokstäverna visar möjliga färg- och textkombinationer som generellt uppfyller tillgänglighetskraven.

Exempel på färg- och textkombinationer.

Riktlinjer enligt WCAG* 2.1.

Även textens storlek påverkar färgintrycket och därmed läsbarheten, speciellt i digitala medier. Därför finns specifika rekommendationer gällande textstorlekar i WCAG*. Här utgår man ifrån vanlig text i stor skala på minst 18 pt/24 px och mindre text på minst 14 pt/18.5 px.

Bokstäverna i cirklarna ovan motsvarar de nämnda måtten, för större och mindre text, och anger vilka färgkombinationer som är tillåtna. Alla färgkombinationer förutom plommon på orange fungerar i såväl stor som liten skala.

Obs! I digitala kanaler används generellt större typografi än i trycksaker (t.ex 16 pt brödtext på webben motsvarar ca 9 pt brödtext i en trycksak).

*Web Content Accessibility Guidelines

Kontakt

Sofia Lindberg

Kommunikatör
Kommunikationssamordning och varumärke
UF Universitetsförvaltningen