Colour

A color system designed with everyone in mind, built on the principles of visual perception, inclusive design, and accessibility.

Colour palette

Colour distinguishes our brand and helps build a strong and recognisable brand if used consistently. It helps us keep our products and communication coherent and aligned, whether online or offline.

Primary turquoise

Primary turquoise is our brand colour. It is a calm, friendly, and delightful colour and should be used in everything you create.

Base palette

At Coloplast, we differentiate between our primary colour — a hue we are most recognised for — and our base palette. Our base palette is a series of colours that enable our assets and communication to achieve different objectives.

Accent palette

For highlighting support, we’ve developed a set of accent colours — befitting our turquoise and base. Use these respectfully and sparsely to visualise data, separate information or give nuance to illustrations. Please don’t use these colours for backgrounds, typography or icons.

Core tokens

Core colours are always referenced by other tokens and never used directly as values in designs and code.

core / color / turquoise

#f6fbfd

#eaf7fa

100

#e0f5f9

200

#ccecf3

300

#b3e3ed

400

#4cbcd1

500

#00a2ba

600

#00788a

700

#006a7a

800

#00515d

900

#003a44

950

#002e36

975

#00272e

core / color / grey

#f7f8f8

#f2f3f3

100

#ebeeef

200

#dde2e4

300

#cad0d3

400

#b4bdc0

500

#7a8b90

600

#4d646b

700

#3c545d

800

#213d46

900

#1c333b

950

#15272d

975

#122126

core / color / sand

#f9f9f7

#f4f4f0

100

#f1f0ec

200

#e7e5df

300

#dcdad5

400

#d5d2ce

500

#cac8c4

600

#858988

700

#697072

800

#485356

900

#333f43

950

#223035

975

#1e2b2e

core / color / green

#f7fcfa

#e8f7f1

100

#cdede4

200

#9ad7ca

300

#68c2ae

400

#35ac98

500

#378c87

600

#2f7873

700

#276460

800

#1f504c

900

#173c39

950

#102826

975

#082321

core / color / accentGreen

#f6fcf3

#e5f1e1

100

#d4e8cd

200

#bbdab0

300

#aad09c

400

#99c788

500

#88be75

600

#6eb057

700

#5b9546

800

#497738

900

#37592a

950

#243b1c

975

#22331c

core / color / yellow

#fffcf3

#fff8e0

100

#ffefc1

200

#ffe4a3

300

#f6d98e

400

#f4cf71

500

#f0c044

600

#c9a440

700

#a1893c

800

#7a6d38

900

#666036

950

#534e2c

975

#48412e

core / color / orange

#fff9f3

#fef3e8

100

#fee7d2

200

#fddbbb

300

#fcc999

400

#fcb777

500

#fbab61

600

#fa9130

700

#f47e10

800

#ce6518

900

#914804

950

#613002

975

#462d15

core / color / coral

#fff9f8

#fdede9

100

#fbdad3

200

#f9c8bd

300

#f5a391

400

#f3917b

500

#f17e64

600

#e5664a

700

#cc5034

800

#9f3c32

900

#833624

950

#5d2d22

975

#431f16

core / color / red

#fffafb

#fef3f5

100

#ffe5ea

200

#fab8c5

300

#ee6f89

400

#e83f61

500

#e20f3a

600

#ce0d35

700

#c00c31

800

#950926

900

#7d0820

950

#65061a

975

#4d0514

core / color / blue

#f3f9ff

#e9f1fa

100

#d3e3f6

200

#a7c8ec

300

#659ede

400

#3a82d5

500

#2668b3

600

#215b9d

700

#1d4f88

800

#184170

900

#153861

950

#0f2e51

975

#0a2543

Semantic tokens

Semantic tokens are an abstraction layer, giving meaning and context to the core tokens they are referencing.

color / fg

default

#213d46

#ffffff

muted

#4d646b

#cad0d3

subtle

#4d646b

disabled

rgba(33,61,70,0.4)

dark

#213d46

light

#ffffff

link

#00788a

#4cbcd1

link-hover

#00515d

#b3e3ed

link-on-color

#4cbcd1

link-on-color-hover

#00788a

interactive

#00788a

#4cbcd1

on-disabled

#b4bdc0

#7a8b90

on-color

#ffffff

on-color-muted

rgba(255,255,255,0.8)

inverse

#ffffff

#213d46

inverse-link

#4cbcd1

#00788a

inverse-link-hover

#00788a

#00a2ba

inverse-muted

#cad0d3

#3c545d

placeholder

#4d646b

#b4bdc0

brand

#00a2ba

#4cbcd1

success

#276460

#35ac98

attention

#7a6d38

#ffe4a3

danger

#c00c31

#ee6f89

color / bg

body

#ffffff

#122126

default

#ffffff

#1c333b

body-alt

#f2f3f3

#122126

brand

#00a2ba

brand-subtle

#eaf7fa

#003a44

brand-muted

#ccecf3

#00515d

brand-strong

#006a7a

#4cbcd1

brand-stronger

#00515d

#b3e3ed

neutral

#ebeeef

#3c545d

neutral-subtle

#f2f3f3

#213d46

neutral-strong

#dde2e4

#4d646b

accent

#f1f0ec

#697072

accent-subtle

#f4f4f0

#485356

accent-strong

#e7e5df

#858988

dark

#15272d

inverse

#15272d

#f2f3f3

inverse-muted

#4d646b

backdrop

rgba(21,39,45,0.8)

interactive-subtle

#eaf7fa

#003a44

interactive-muted

#ccecf3

#00515d

interactive

#00a2ba

elevation-raised

#ffffff

#21373f

elevation-overlay

#ffffff

#253b43

danger

#e20f3a

#e83f61

status-neutral

#ebeeef

#213d46

status-neutral-alt

#f1f0ec

#213d46

status-highlight

#e0f5f9

#00515d

status-success

#cdede4

#1f504c

status-attention

#ffefc1

status-danger

#ffe5ea

#65061a

decorative-1-subtle

#f7f8f8

#15272d

decorative-1-muted

#f2f3f3

#1c333b

decorative-2-subtle

#f9f9f7

#1e2b2e

decorative-2-muted

#f4f4f0

#223035

decorative-3-subtle

#f6fbfd

#00272e

decorative-3-muted

#eaf7fa

#002e36

field

#ffffff

#122126

hover

#f2f3f3

#213d46

toggle-off

#7a8b90