---
# System prepended metadata

title: Color selector

---

---
tags: 
---
https://designsystem.proximus.com/pagesDS/20__Components/Color_selector/

# Color selector
Color selector is used to show all colors of a device, and allow the user to choose one of them.

# Usage

## Types
There are two types of color selectors:

**1. The big color selector**
Mostly used in a configurator page, when the user is in an order flow.
> [name=JulineToussaint]For accessibility, the name of color is added below each color pad.
> 
![](https://i.imgur.com/hwLuk05.jpg)

 
**2. The small color selector**
Mostly used in a small zone to inform the user how many and which colors are available for the device.
For this type of color selector, there are two kind of display: horizontal & vertical.

![](https://i.imgur.com/a5LoJKk.jpg)



> [name=Laureen Delhaye] @Juline, n'y a-t-il pas une notion de cliquable ou non? Est-ce que les small permettent de sélectionner la couleur?
> [name=JulineToussaint] @Laureen, en effet il peut être cliquable. J'ai ajouter le border selectionné dans l'image, doit on aussi le mentionner dans le texte qu'on peu le selectionner ?
> [name=Laureen Delhaye] @Juline, on le dit dans l'intro donc je pense que c'est ok

## States

![](https://i.imgur.com/J2XudrM.jpg)



**1. Basic**
State visible by default when there is no selection.
**2. Hover**
State visible when the cursor hovers the color. Cursor becomes a pointer, and name of color is displayed in another color on the big color selector.
**3. Focus**
State visible when users select the color via tab key. All elements are highlighted.

![](https://i.imgur.com/aK80CVI.jpg)


**4. Selected**
State visible when color is selected. A border is displayed in another color on the color pad for the small color selector and around the color pad for the big color selector.
**5. Disabled**
State visible if the color is not available. All elements are displayed with a strikethrough on the color pad and for the big color selector opacity of elements is reduced in order to signify the change of state.


## Anatomy

![](https://i.imgur.com/t51JY0c.jpg)

1. **Color pad**
Pad container with solid color
2. **Color name**
Name is displayed just below the color pad
3. **Strikethrough**
It indicates that the color is not available

---

## Style

### Sizes


#### Big color selector

![](https://i.imgur.com/fVG3KDp.jpg)



|                                | Attribute                                             | Mobile               | Desktop              |
| ------------------------------ | ----------------------------------------------------- | -------------------- | -------------------- |
| 1. Color name                  | Font size                                             | Size 3               | Size 3               |
| 2. Color pad                   | Size <br> Border                                      | 3 rem <br> 0.1 rem   | 3 rem <br> 0.1 rem   |
| 3. Selected element            | Border <br> Spacing btw color pad and selected border | 0.2 rem <br> 0.5 rem | 0.2 rem <br> 0.5 rem |
| 4.  Strikethrough              | Border size                                           | 0.1 rem              | 0.1 rem              |
| 5. Color selectors spacing | Width                                                |         2 rem             | 4 rem                |
| 6. Name spacing                               |  Height                                                     |                  1 rem    |        1 rem              |


#### Small color selector

![](https://i.imgur.com/kTUD0Gm.jpg)



|                            | Attribute        | Mobile               | Desktop              |
| -------------------------- | ---------------- | -------------------- | -------------------- |
| 1. Color pad               | Size <br> Border | 2.4 rem <br> 0.1 rem | 2.4 rem <br> 0.1 rem |
| 2. Selected element        | Border           | 0.3 rem              | 0.3 rem              |
| 3.  Strikethrough          | Border size      | 0.1 rem              | 0.1 rem              |
| 4. Color selectors spacing | Width            | 1.5 rem              | 1 rem                |


### Colors

#### Big color selector

![](https://i.imgur.com/6vsFeV2.jpg)



| Status      | Color pad                                            | Color name | Selected element | Strikethrough |
| ----------- | ---------------------------------------------------- | ---------- | ---------------- | ------------- |
| 1. Basic    | Background: Based on device color <br>Border : Black | Black 9    | -                | -             |
| 2. Hover    | Background: Based on device color <br>Border : Black | Purple 7   | -                | -             |
| 3. Selected | Background: Based on device color <br>Border : Black | Black 9    | Purple 7         | -             |
| 4. Disabled  |  Background: Based on device color at 30%<br>Border : Disabled    |   Disabled         |     -             |     Disabled          |



#### Small color selector

![](https://i.imgur.com/SwWBjIw.jpg)



| Status      | Background color pad  | Border color pad | Strikethrough |
| ----------- | --------------------- | ---------------- | ------------- |
| 1. Basic    | Based on device color | Black            | -             |
| 2. Hover    | Based on device color | Black            | -             |
| 3. Selected | Based on device color | Purple 7         | -             |
| 4. Disabled | Based on device color | Black            |  Black    |




