Colors

Nordic additions

Additionaly to the colors defined in the global profile the Nordic market also use its own ‘Red Nordic’ and ‘Blue Nordic’. The red is used as the bright part of the TUI button gradient but also in other cases when the red needs to be on top of for example darker images. The blue is primarily used as the link color for better readability but we have also started to use it as the background color in the subnav to be able to use white text on to that needs this improved contrast for readability.

$color-white

White

HEX: #fff
Global name: TUI-White

$color-beige-100

Beige 100

HEX: #f3f0ec
Global name: TUI-Beige 25%

$color-beige-200

Beige 200

HEX: #e7e3db
Global name: TUI-Beige 50%

$color-beige-300

Beige 300

HEX: #d7d2c3
Global name: TUI-Beige

$color-grey

Grey

HEX: #737373
Global name: TUI-Grey

$color-black

Black

HEX: #000
Global name: TUI-Black

$color-green

Green

HEX: #aad700
Global name: TUI-Green

$color-yellow

Yellow

HEX: #ffe100
Global name: TUI-Yellow

$color-red-300

Red 300

HEX: #fa1119
Global name: Undefined

$color-red-400

Red 400

HEX: #d40e14
Global name: TUI-Red

$color-red-gradient

Red Gradient

HEX: #fa1119 to #d40e14
Global name: Undefined

$color-blue-100

Blue 100

HEX: #e2f3fe
Global name: TUI-Blue 25%

$color-blue-200

Blue 200

HEX: #c2e6fa
Global name: TUI-Blue 50%

$color-blue-300

Blue 300

HEX: #70cbf4
Global name: TUI-Blue

$color-blue-400

Blue 400

HEX: #219ed9
Global name: Undefined

$color-blue-500

Blue 500

HEX: #092a5e
Global name: TUI-Dark Blue

$color-blue-gradient

Blue Gradient

HEX: #0d3b85 to #092a5e
Global name: Undefined

$color-tui-grey-50

HEX: #b9b9b9

$color-tui-grey-25

HEX: #dcdcdc

$color-tui-dark-blue-highlight;

HEX: #0d3b85