Färg


Göteborgs Stads färger används i all kommunikation från staden. Färgpaletten är anpassad för att fungera i alla kanaler. Den skapar utrymme för variation i stadens kommunikation och bidrar samtidigt till ett enhetligt uttryck.

Huvudfärg

Den klassiska Göteborgsblå är den färg som starkast signalerar Göteborgs Stad. Den använder du i första hand i mer formella och profilerande sammanhang, där den tillsammans med logotypen förstärker Göteborgs Stads identitet. Exempel är fasta element, som en ram i en kungörelseannons, en yta på en skylt, diplom och intyg eller på profilprodukter som används för hela staden.

Göteborgsblå

Komplementfärger

Göteborgs Stad har fjorton komplementfärger, sju mörka och sju ljusa. Alla färger fungerar både i tryck och digitala kanaler och är tillgänglighetsanpassade utifrån myndighetskrav. Bredden i färgpaletten ger möjligheter till variation och bidrar till både formella och lekfulla möjligheter. Förutom färgerna i paletten finns alltid svart och vit som grund.

De fjorton komplementfärgerna: mörkblå, turkos, grön, gul, röd, rosa, lila, grå, ljusblå, ljusgrön, ljusgul, aprikos, ljusrosa och violett.

Tillgängliga färgkombinationer

När du kombinerar färger är det viktigt att tänka på kontrasten, så att text eller annat innehåll är tydligt för den som ska få informationen.

  • Tänk på att vissa färgkombinationer är väldigt svåra att särskilja för många personer, speciellt rött/grönt och angränsande färger.
  • Tänk på när du väljer färgkombinationer att till exempel svart text mot gul bakgrund upplevs som en varning.
  • För att undvika ett rörigt intryck, kombinera inte för många färger.
  • Om du använder färg som en markering för exempelvis rätt och fel, komplettera gärna med text eller ikon för att förtydliga.
  • Använd aldrig färgad text, utan alltid svart och vit text.

När information eller text även finns tillgänglig i någon annan form som till exempel i en tillhörande bildtext, kan du vara friare i dina färgkombinationer i illustrationer.

De mörka komplementfärgerna placerade på de ljusa komplementfärgerna och tvärtom.

De mörka färgerna passar alltid bra ihop med sin ljusa kompisfärg.

Exempel på andra färgkombinationer: rös och ljusrosa, grön och ljusblå, mörklå och ljusgul och turkos och aprikos.

Exempel på färgkombinationer som går utanför kompisfärgerna ovan. Valet av färg och färgkombination görs alltid med utgångspunkt i sammanhang och målgrupp.

Färgpalett

Färgkoderna för RGB och CMYK avser färgrymderna sRGB respektive CoatedFOGRA39.

Göteborgsblå

HEX# 0077bc
RGB: 0/119/188
CMYK: 96/37/0/5
PMS: 3005 C
NCS: S 3060-R90B

     

Mörkblå

RGB: 63/85/100
HEX# 3f5564
CMYK: 76/53/41/33
PMS: 7545C/546U
NCS: S6020-B

Turkos

RGB: 0/131/145
HEX# 008391
CMYK: 82/27/36/10
PMS: 7474C/7474U
NCS: S3040-B20G

Grön

RGB: 0/135/103
HEX# 008767
CMYK: 84/22/68/6
PMS: 341C/341U
NCS: S3050-B90G

Gul

RGB: 255/205/55
HEX# ffcd37
CMYK: 0/21/83/0
PMS: 122C/115U
NCS: S1060-Y10R

Röd

RGB: 210/71/35
HEX# d24723
CMYK: 12/82/93/0
PMS: 1665C/1665U
NCS: S1080-Y70R

Rosa

RGB: 213/56/120
HEX# d53878
CMYK: 11/88/21/0
PMS: 205C/219U
NCS: S1070-R20B

Lila

RGB: 103/75/153
HEX# 674b99
CMYK: 71/77/0/0
PMS: 2665C/VioletU
NCS: S3050-R60B

 

Grå

RGB: 209/217/220
HEX# d1d9dc
CMYK: 22/11/13/0
PMS: 5455C/5455U
NCS: S1005-B

Ljusblå

RGB: 192/228/242
HEX# c0e4f2
CMYK: 29/0/5/0
PMS: 290C/290U
NCS: S0520-B

Ljusgrön

RGB: 184/225/200
HEX# b8e1c8
CMYK: 30/0/25/0
PMS: 566C/566U
NCS: S1015-G

Ljusgul

RGB: 255/243/176
HEX# fff3b0
CMYK: 0/3/40/0
PMS: 600C/600U
NCS: S0520-G90Y

Aprikos

RGB: 251/207/185
HEX# fbcfb9
CMYK: 0/25/27/0
PMS: 7415C/7415U
NCS: S1015-Y60R

Ljusrosa

RGB: 248/204/220
HEX# f8ccdc
CMYK: 0/28/4/0
PMS: 671C/671U
NCS: S1015-R20B

Violett

RGB: 225/209/232
HEX# e1d1e8
CMYK: 13/21/0/0
PMS: 7443C/2635U
NCS: S1015-R60B

 

Svart och vitt

Förutom komplementfärgerna kan du alltid använda svart och vitt. Text ska alltid vara svart eller vit. 

svart ruta

Svart

RGB: 31/31/31
HEX# 1f1f1f
CMYK: 0/0/0/100


Vit

RGB: 255/255/255
HEX# ffffff
CMYK: 0/0/0/0

Färgpalett för funktionsfärger i digitala gränssnitt

För att särskilja meddelanden eller knappar i ett gränssnitt från innehållet använder vi funktionsfärger. Varje funktionsfärg har en särskild betydelse och ska inte förväxlas med användningen av Göteborgs Stads komplementfärger.

Kompletterande bakgrundsfärg

HEX# ebebeb

RGB: 235/235/235

 

Typografi

HEX# 333333

RGB: 51/51/51

 

   

Länkar
Primär knapp

HEX# 005799

RGB: 0/87/153
 

Primär knapp, hover
Länkar, hover

HEX# 004172

RGB: 0/65/114
 

Bakgrund neutralt meddelande

HEX# cce3f1

RGB: 204/227/241
 

Besökta länkar

HEX# 674a99

RGB: 103/74/153
 

Positiv knapp
Positivt meddelande

HEX# 00664a

RGB: 0/102/74
 

Positiv knapp,
mouse over

HEX# 004e38

RGB: 0/78/56
 

Bakgrund för positivt meddelande

HEX# d0efd5

RGB: 208/239/213
 

 

Negativ knapp
Felmeddelande
Krismeddelande

HEX# ad1d24

RGB: 173/29/36
 

Negativ knapp,
mouse over

HEX# 83161c

RGB: 131/22/28
 

Bakgrund för negativt meddelande

HEX# ffece6

RGB: 255/236/230
 

 

 

Varningsmeddelande

HEX# ffd23c

RGB: 255/210/60
 

Bakgrund för varningsmeddelande

HEX# fff6c4

RGB: 255/246/196
 

 

 

 

 Exempel på meddelanden och knappar i digitala gränssnitt.

  1. Neutralt meddelande och primär knapp. 
  2. Positivt meddelande och knapp för positiv bekräftelse.
  3. Negativt meddelande och knapp för negativ uppmaning. Den röda knappfärgen kan även användas vid krismeddelande.
  4. Varningsmeddelande.

Utökad färgpalett för illustration och kartor

I illustrationer och enklare kartor kan du använda en färgpalett med fler nyanser av stadens färger. Paletten är framtagen för att öka variationen mellan färgfält och linjer när det behövs fler nyanser för att göra innehållet tydligt. Tänk på att färgerna ska ge god kontrast mot varandra. När du sätter text mot färgad bakgrund ska alltid de 14 tillgänglighetsanpassade komplementfärgerna eller huvudfärgen, som finns definierade ovan, användas.

Nyanser av stadens komplementfärger.

En utökad färgpalett med fler nyanser av stadens alla färger kan användas i illustration och kartor.

Kontakta enheten visuell kommunikation för att få tillgång till färgpaletten för illustration och kartor.

Användning av färg

Gör så här!

Exempel på användning av färg som bakgrund och på informationsgrafik och illustration.

Exempel på användning av färg på informationsgrafik.

  • Använd få färger tillsammans.
  • Sträva efter en god kontrast mellan färgerna.
  • Använd gärna svart och vit som komplement.
  • Använd gärna färg för att lyfta fram information, till exempel i form av informationsgrafik.

Gör inte så här!

Exempel på hur du inte ska använda färgerna.

  • Använd inte färgad text.
  • Använd inte krävande kombinationer av färger som är svåra för många att särskilja, till exempel rött/grönt.
  • Undvik att kombinera för många färger.
  • Gör inte egna toningar av färgerna.
  • Gör inte toningar mellan färgerna.
  • Gör inte genomskinliga plattor av färgerna.

Förklaring färgsystem

Stadens färgpalett fungerar i alla kanaler. Däremot gäller olika färgsystem och färgkoder för olika kanaler.

CMYK
CMYK betyder cyan, magenta, yellow och key color (svart). CMYK används i fyrfärgstryck av exempelvis affischer och broschyrer. CMYK-koderna som finns i paletten är för bestruket papper (Coated FOGRA39).

PMS
PMS betyder Pantone matching system. PMS används när det är viktigt med en exakt färgåtergivning eller när flerfärgstryck inte är möjligt, exempelvis vid kläd- eller pryltryck.

RGB
RGB betyder rött, grönt och blått. RGB används för bildskärmar och projektorer. RGB-koderna i paletten är för färgrymden sRGB.

HEX
HEX betyder hexadecimal. HEX används på webb och är en beskrivning av RGB i sex tecken.

NCS
NCS betyder Natural Color System. NCS-systemet används vid blandning av målarfärg till väggar och andra ytor i utställningar, mässor och rum.