---
tags: DS DONE
---

# Colors
*Maintaining consistent and engaging digital interfaces, whether applications or experiences, demands extended guidance around color usage.*

## Basic colors

| Color | Preview | Hex value | Usage |
| -------- | -------- | -------- | -------- |
| Primary purple | <div style="background-color: #5C2D91">&nbsp;</div> | #5C2D91 | Titles, icons, primary colour in gradients, background, assets: default buttons, normal prices, default accordions, active order step, spinner, features in tables
| Primary blue | <div style="background-color: #00BCEE">&nbsp;</div> | #00BCEE | Info patch
| Pink | <div style="background-color: #EE2E5D">&nbsp;</div> | #EE2E5D | Promo patch, Promo price, Free mention
| Black | <div style="background-color: #0A0A0A">&nbsp;</div> | #0A0A0A | Epic, Pickx, Default texts, text links, lists, other operator prices
| 70% purple | <div style="background-color: #8D6CB2">&nbsp;</div> | #8D6CB2 | Hover box, selected element, active tab, active button, active filter
| Green |
| #81C747 | Success and advantage icons, success order step, positive usage bar, positive messages in forms, switch opened
| | <div style="background-color: #74BB39">&nbsp;</div> | #74BB39 | Order button, One click buying button, Confirm button (at the end of a order form)
| Orange | <div style="background-color: #F58221">&nbsp;</div> | #F58221 | Warning usage
| Red | <div style="background-color: #EE0707">&nbsp;</div> | #EE0707 | Error and warning icons, error messages in forms, exceeding usage
| PICKX | <div style="background-color: #0A0A0A">&nbsp;</div> | #0A0A0A | PICKX (Proximus TV) website only

## Background colours
### Purple Proximus
We use purple as a statement. It belongs to us and people know it. It’s our heritage. It’s us. Purple is our brand identifier and should always be used.
Proportion of the purple Proximus on the screen: 80%!

### Secondary colours (100, 90, 80, 50% are allowed to use)
The use of the secondary colours palette goes always in combination with purple on the page. These colours can be used without purple in a section, a box… when there is enough purple on the page.

### Opacity
There is a possibility to use opacity on backgrounds in exceptional situations.

| Name | Value |
| -------- | -------- |
| Black | 70% of black #0A0A0A |
| White | 70% of white #FFFFFF |
| Light purple | 80% of purple #EEEAF |
| Medium purple | 60% of purple #DED5E9 |

### Gradients

#### Directions
The Gradient can follow eight possible directions with the goal to create depth in communication through varying degrees of light effects like sky to ground as well as brand recognition depending on the colour chosen and the scenario in question.
A direction is chosen by considering how it complements the pictures, text, sub-headlines, composition and overall communication in question.
The contrast moves vertically, horizontally and diagonally.
It must work on both portrait and landscape formats.


#### Gradients 80/20%
This gradient is composed with 80% of purple and 20% of a secondary color. This kind of gradient is used for ==TBD==


#### Gradients 40/60%
This gradient is composed with 60% of purple and 40% of a secondary color. This kind of gradient is used for ==TBD==