Colour System

The colour system is a carefully curated combination of palettes that represent Strength and Softness. It helps you define your webspace, allowing you to differentiate and communicate your strengths.

All the colours listed below went through several rounds of testing in actual designs, during which their aesthetic appearance and range of accessibility are observed and documented.

Strength
Core palette

Representative of the UAE and the Federal Ministry’s identity, the selection of colours for the Core Palette will help communicate the entity’s role clearly, allowing for better representation of the nation locally and globally. This core palette of colours has been approved for use across all federal government entities by the UAE Cabinet Office.

UAE Gold

50

#B68A35

90 #413213

80 #5F481C

70 #7C5E24

60 #99742D

50 #B68A35

40 #C5A25D

30 #D6BE8E

20 #E4D5B6

10 #F2EADB

UAE Red

50

#d83731

90 #4E1412

80 #711D1A

70 #932521

60 #B52E29

50 #D83731

40 #E05F5A

30 #EA8F8C

20 #F1B7B5

10 #F8DBDA

UAE Green

50

#3F8E50

90 #17331D

80 #214A2A

70 #2B6136

60 #357743

50 #3F8E50

40 #65A573

30 #93C09D

20 #BAD6C0

10 #DCEBDF

UAE Black

50

#1B1D21

90 #323438

80 #494A4D

70 #606164

60 #76777A

50 #8D8E90

40 #A4A5A6

30 #BBBCBD

20 #D1D2D3

10 #ECECEC

Black plays a critical role in determining the overall aesthetics of the layout (look and feel), for more information see environment.

Exception

As each entity has it's own identity color palette, you can use the primary color from the identity as the core palette.

Softness
Secondary Palette

This optional Secondary Palette will allow readers to relate to the content better given its contrast to the Core Palette colour scheme and will add a human touch to the overall feel of the website, improving readability.

Use it to select and/or design content (i.e. imagery, illustrations, iconography, data) consistent with the core palette.

UDP Space (100)#171A53

90 #2F3165

80 #454875

70 #5D5F87

60 #747698

50 #8B8DA9

40 #A2A3BA

30 #BABBCC

20 #D1D1DD

10 #E8E9EE

TRA Blue (50)#002DC2

90 #001046

80 #001866

70 #001F84

60 #0026A3

50 #002DC2

40 #3357CE

30 #7089DD

20 #A3B3E9

10 #D1D9F4

Light Blue (50)#00ABEB

90 #003D54

80 #005A7B

70 #0074A0

60 #0090C5

50 #00ABEB

40 #33BCEF

30 #70D0F4

20 #A3E0F7

10 #D1F0FB

Saffron Yellow (50)#F8C028

90 #59450E

80 #826515

70 #A9831B

60 #D0A122

50 #F8C028

40 #FACD53

30 #FCDC87

20 #FCE8B1

10 #FEF4D8

Salmon (50)#FF8561

90 #5C3023

80 #854633

70 #AD5A42

60 #D67051

50 #FF8561

40 #FF9E81

30 #FFBBA7

20 #FFD3C6

10 #FFE9E2

Contrast
Environment

The function of the Environment Colours is to determine the atmosphere and layouts of the web pages. Each colour has its own language, and these neutral shades work silently in the background to enhance the look and feel of the page’s content.

Neutral Palette

UAE Black

100

#1B1D21

90 #323438

80 #494A4D

70 #606164

60 #76777A

50 #8D8E90

40 #A4A5A6

30 #BBBCBD

20 #D1D2D3

10 #ECECEC

Accent

Pure White

100

#ffffff

90 #FCFCFC

80 #FAFAFA

70 #F7F7F7

60 #F5F5F5

50 #F2F2F2

40 #F0F0F0

30 #EDEDED

20 #EBEBEB

10 #E8E8E8

Black Pearl

100

#06122A

90 #1F2A40

80 #384155

70 #515A6A

60 #6A717F

50 #838995

40 #9BA0AA

30 #B5B8BF

20 #CDD0D4

10 #E7E8EA

Athens Gray

100

#EFF1F3

90 #ECEEF0

80 #EAECEE

70 #E8E9EB

60 #E6E8EA

50 #E3E5E7

40 #E1E3E5

30 #DEE0E2

20 #DCDEE0

10 #DADBDD

Gradient Colors

Gradients add life through a change in texture or background, allowing the design elements and content to stand out. Only create gradients with colours from the same tonality.

Technology Blue

Start Color

TRA Blue (50)

#002DC2

Start Color

TRA Blue (50)

End Color

Light Blue 40

End Color

Light Blue 40

#33BCEF

Sands theme

Start Color

Saffron Yellow (80)

#826515

Start Color

Saffron Yellow (80)

End Color

UAE Gold 50

End Color

UAE Gold 50

#B68A35

Vibrant warm

Start Color

UAE Red (50)

#D83731

Start Color

UAE Red (50)

End Color

Salmon (50)

End Color

Salmon (50)

#FF8561

Nature Green

Start Color

UAE Green (50)

#3F8E50

Start Color

UAE Green (50)

End Color

UAE Green (40)

End Color

UAE Green (40)

#65A573

Application

How to use the Colour System

Each layout should contain at least 70% Neutral palette (monochromes) and up to 30% chromatics (up to 20% Core palette and up to 10% secondary).

The secondary palette is optional and is helpful to refer to when selecting content. Ensure the colour picked from core and secondary match in tonality.

For more information see Imagery Guidelines.

70%

Environment Colours

20%

Core palette

10%

Secondary Palette

Application

The above-recommended colour schematics will allow you to work with a single template to generate different looks for the various entities based on their requirements and preferences. The examples shared below give an insight into what the final look will be:

Check high fidelity examples in Templaes.

Create contrast

One of the best ways to create a webpage that is user-friendly is to start the design process using neutral palettes to determine low fidelity wireframes and other details. Once this is complete, it's easier to apply colours to the most important elements (such as buttons) to achieve the perfect contrast that allows for smooth navigation and enhanced user experience.

Step 1 | Low fidelity wireframing using neutral colour palette

Step 2 | High fidelity wireframing (neutral colour palette)

Step 3 | Apply core palette colours to the elements

Text Colours

We recommend using black for text in order to achieve the highest ratios of contrast and improved readability. Also core colours can be used for text or text back ground.

White on Black

Text

#FFFFFF

Background

#000000

Black on White

Text

#000000

Background

#FFFFFF

Primary on White

Text

#Primary 50 & above

Background

#FFFFFF

Core colour Background

Text

#FFFFFF

Background

#Primary 50 & above

Check high fidelity examples in Templaes.

Application

Examples of how to apply this

Internet &

E-commerce enhances compliance with regulations and information

Internet &

E-commerce enhances compliance with regulations and information

Wireless

E-commerce enhances compliance with regulations and information

Wireless

E-commerce enhances compliance with regulations and information

Functional Colours

The user associates specific content with particular colours from memory - the recall power is quite strong. Therefore, you should choose the correct colours to direct the intended user action.

For more information about Messaging, see Tone of voice.

Success Messages

Success Primary

Text

#FFFFFF

Background

Primary UAE Green 50 (#3F8E50)

Success Secondary

Text

Primary Green 60 (#357743)

Background

Primary UAE Green 10 (#E1E3ED)

Application

Success messages typically pop up when a process gets successfully completed.

Error Messages

Error Primary

Text

#FFFFFF

Background

Primary UAE Red 60 #E1E3ED

Error Secondary

Text

Primary UAE Red 60 #E1E3ED

Background

Primary UAE Red 10 (#E1E3ED)

Application

Error messages typically pop up when completing forms and one of the input contains an error.

Warning Messages

Warning Primary

Text

#000000

Background

Secondary Saffron Yellow 50 (#F8C028)

Warning Secondary

Text

Secondary Saffron Yellow 90

Background

Secondary Saffron Yellow 10

Example

Warning messages are used to bring urgent news to user’s attention..

For more information Select and Input.

Accessibility

Colour combinations should meet the contrast ratios specified by the WCAG 2.0. When implementing the design system, we should also consider users with colour blindness and low vision to make sure that navigating the website is just as easy for them as it is for others

DO

Black on White

White

#ffffff

UAE Black 100

#1B1D21

Contrast ratio:

16.87:1

UAE Black 80 and White

UAE Black 80

#606164

White

#FFFFFF

Contrast ratio:

8.86:1

Black and UAE Gold 40

UAE Black 100

#1B1D21

UAE Black 40

#C5A25D

Contrast ratio:

6.99:1

UAE Gold 70 and White

UAE Gold 70

#7C5E24

White

#ffffff

Contrast ratio:

6.02:1

UAE Green 10 and 80

UAE Green 10

#DCEBDF

UAE Green 80

#214A2A

Contrast ratio:

8.17:1

UAE Green 70 and White

UAE Green 70

#2B6136

White

#ffffff

Contrast ratio:

9.74:1

Black and Desert red 50

UAE Black 100

#DCEBDF

Desert red 50

#FF8561

Contrast ratio:

7.05:1

UAE Red 70 and UAE Gold 10

UAE Gold 10

#E4D5B6

UAE Red 70

#932521

Contrast ratio:

5.73:1

DONT

White on Grey

UAE Black 60

#76777A

UAE Black 100

#1B1D21

Contrast ratio:

3.76:1

UAE Black 50 and White

UAE Black 50

#8D8E90

White

#FFFFFF

Contrast ratio:

3.27:1

White and UAE Gold 40

White

#FFFFFF

UAE Gold 40

#C5A25D

Contrast_ratio

2.41:1

UAE Gold 40 and White

UAE Gold 40

#C5A25D

White

#ffffff

Contrast ratio:

2.41:1

UAE Green 30 and 70

UAE Green 30

#93C09D

UAE Green 70

#2B6136

Contrast ratio:

3.58:1

UAE Green 30 and White

UAE Green 30

#93C09D

White

#ffffff

Contrast ratio:

2.04:1

White and Desert red 50

Desert red 50

#FF8561

White

#FFFFFF

Contrast ratio:

2.39:1

UAE Red 70 and UAE Gold 50

UAE Gold 50

#B68A35

UAE Red 70

#932521

Contrast ratio:

2.64:1

Tools to Use

Tinyjpg and Tinypng are helpful tools that work effectively to reduce image size without compromising on quality:

https://webaim.org

Imagery Colour Guidance

Tolerance and openness

Don't add colour effect to the images

Warm and Weird

Don’t apply gradients with different tonalities

Beyond the Planet

Don’t use low contrast text colours on images

The value of giving

Don’t add coloured boxes behind text on images

Happiness in practice

Happiness forms the basis of well- being and social cohesion

Don’t use colour on all text content

Donʼt use a lot from Secondary Palette

Colour Usage at a Glance

Core palette

Core palette 80-90
Text colours,
Background for white text
UAE Black 30
Disabled state
Core palette 10
Environment,
Cards and Fields

Secondary

90 #1F2A40

80 #384155

70 #515A6A

60 #6A717F

50 #838995

40 #9BA0AA

30 #B5B8BF

20 #CDD0D4

10 #E7E8EA

90 #001046

80 #001866

70 #001F84

60 #0026A3

50 #002DC2

40 #3357CE

30 #7089DD

20 #A3B3E9

10 #D1D9F4

90 #003D54

80 #005A7B

70 #0074A0

60 #0090C5

50 #00ABEB

40 #33BCEF

30 #70D0F4

20 #A3E0F7

10 #D1F0FB

90 #59450E

80 #826515

70 #A9831B

60 #D0A122

50 #F8C028

40 #FACD53

30 #FCDC87

20 #FCE8B1

10 #FEF4D8

90 #5C3023

80 #854633

70 #AD5A42

60 #D67051

50 #FF8561

40 #FF9E81

30 #FFBBA7

20 #FFD3C6

10 #FFE9E2

Core palette 70-90
Text colours,
Background for white text
Secondary colour
Secondary Palette
Secondary 10-30
Environment,
Background for illustrations Creates light atmosphere

Summary

Use colour to direct attention

Avoid pairing multiple colours

Apply at least a 1:5 contrast ratio for text and background