Colors
The Colors are a big part of the Foyer identity. They are also useful for all the messages displayed over our interfaces. Here is an inventory to keep consistency.
Colors are used everywhere in our interfaces. Depending on where you will cross the path of Foyer Group, you will surely meet one of our palette.
Table of Contents
Brand Colors
The brand colors are the ones you will meet on official documents, communication, website and applications. They are also part of the other palettes you will find throughout this document.
Those colors are variations of the original blue of Foyer. The good news with this original color is that it's already contrasted enough with light colors to comply with Accessibility standards.
How to use it?
This is the light version of the main brand color of Foyer. This version is used to create depth on backgrounds, separators (little borders), or can be used within a gradient or for interactive elements has alternate color.
Takeaways
Design Token blue-foyer-light
Hexa #2667A2
RGB 38, 103, 162
Color compatibilities
Learn more about accessibility.
| Color | Contrast | AA | AAA |
|---|---|---|---|
| Blue Smoke Light | 5.6:1 | ✓ | ≈ |
| Blue Smoke | 5.2:1 | ✓ | ≈ |
| Blue Smoke Dark | 4.9:1 | ✓ | ≈ |
How to use it?
This is the main brand color of Foyer. This blue is used in the monochromic logo and also as the first color of some of our gradients.
Takeaways
Design Token blue-foyer
Hexa #004C92
RGB 0, 76, 146
Color compatibilities
Learn more about accessibility.
| Color | Contrast | AA | AAA |
|---|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ | ✓ |
| Blue Smoke | 7.4:1 | ✓ | ✓ |
| Blue Smoke Dark | 7.0:1 | ✓ | ✓ |
How to use it?
This is the dark variant of the main brand color of Foyer. This blue is used to create emphasis and can also be used as border or color for creating gradients.
Takeaways
Design Token blue-foyer-dark
Hexa #00417C
RGB 0, 65, 124
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA | Pass AAA |
|---|---|---|---|
| Blue Smoke Light | 9.5:1 | ✓ | ✓ |
| Blue Smoke | 8.8:1 | ✓ | ✓ |
| Blue Smoke Dark | 8.2:1 | ✓ | ✓ |
Our ghost and smoke colors are mostly used for creating slight contrasts with a container, or discreet separators within our interfaces. Depending on the layers of graphical elements, the light or dark variations help in highlighting content.
How to use it?
This color is used as background, mostly on the entire interface to put highlight on cards and other kind of contents.
Takeaways
Design Token blue-smoke-light
Hexa #FAF8FB
RGB 245, 248, 251
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA | Pass AAA |
|---|---|---|---|
| Blue Foyer Light | 5.6:1 | ✓ | ≈ |
| Blue Foyer | 8.0:1 | ✓ | ✓ |
| Blue Foyer Dark | 9.6:1 | ✓ | ✓ |
| Grey 800 | 8.8:1 | ✓ | ✓ |
How to use it?
This color is used as background or discreet separator, mostly on relative small container or cards to highlight a content.
Takeaways
Design Token blue-smoke
Hexa #EAF0F6
RGB 234, 240, 246
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA | Pass AAA |
|---|---|---|---|
| Blue Foyer Light | 5.1:1 | ✓ | ≈ |
| Blue Foyer | 7.3:1 | ✓ | ✓ |
| Blue Foyer Dark | 8.8:1 | ✓ | ✓ |
| Grey 800 | 8.1:1 | ✓ | ✓ |
How to use it?
This color is used as background or separator, mostly on relative small container or cards to highlight a content.
Takeaways
Design Token blue-smoke-dark
Hexa #E3E9EF
RGB 227, 233, 239
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA | Pass AAA |
|---|---|---|---|
| Blue Foyer Light | 4.8:1 | ✓ | ≈ |
| Blue Foyer | 6.9:1 | ✓ | ≈ |
| Blue Foyer Dark | 8.2:1 | ✓ | ✓ |
| Grey 800 | 7.6:1 | ✓ | ✓ |
How to use it?
This color is used as background, mostly on the entire interface to put highlight on cards and other kind of contents.
Takeaways
Design Token blue-ghost-light
Hexa #F9FCFF
RGB 249, 252, 255
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA | Pass AAA |
|---|---|---|---|
| Danger Dark | 3.5:1 | ≈ | x |
| Grey 700 | 4.5:1 | ✓ | ≈ |
| Grey 800 | 9.1:1 | ✓ | ✓ |
| Blue Foyer Light | 5.8:1 | ✓ | ≈ |
| Blue Foyer | 8.3:1 | ✓ | ✓ |
| Blue Foyer Dark | 10:1 | ✓ | ✓ |
How to use it?
This is the main brand color of Foyer. This blue is used to the single color logo and also as the first color of some of our gradients. The light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token blue-ghost
Hexa #F7FBFF
RGB 247, 251, 255
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This is the main brand color of Foyer. This blue is used to the single color logo and also as the first color of some of our gradients. The light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token blue-ghost-dark
Hexa #F5F8FC
RGB 245, 248, 252
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
This yellow in particular is both one of our interface color, and one of our product domain brand color ("mobilé"). We have allowed ourselves this deviation for very specific and rare needs.
How to use it?
This is the main brand color of Foyer. This blue is used to the single color logo and also as the first color of some of our gradients. The light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token yellow-lighter
Hexa #FEFAE8
RGB 254, 250, 232
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This is the main brand color of Foyer. This blue is used to the single color logo and also as the first color of some of our gradients. The light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token yellow-light
Hexa #F7D84E
RGB 247, 216, 78
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This is the main brand color of Foyer. This blue is used to the single color logo and also as the first color of some of our gradients. The light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token yellow
Hexa #F5CE22
RGB 245, 206, 34
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This is the main brand color of Foyer. This blue is used to the single color logo and also as the first color of some of our gradients. The light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token yellow-dark
Hexa #DDB91F
RGB 221, 185, 31
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
System Colors
System colors are the colors that are not directly linked to the identity of the brand Foyer. They are a way to alert, warn or highlight a message or type of content. They help conveying the status of a task, or the state of the system, for example.
How to use it?
This blue is used to give some information to the user. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token info-lighter
Hexa #EDF6FF
RGB 237, 246, 255
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This blue is used to give some information to the user. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token info-light
Hexa #5EB2FF
RGB 94, 178, 255
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This blue is used to give some information to the user. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token info
Hexa #4EABFF
RGB 78, 171, 255
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This blue is used to give some information to the user. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token info-dark
Hexa #479CE8
RGB 71, 156, 232
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This red is used to highlight that something isn't right. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token danger-lighter
Hexa #FFF0F0
RGB 255, 240, 240
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This red is used to highlight that something isn't right. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token danger-light
Hexa #FF696D
RGB 255, 105, 109
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This red is used to highlight that something isn't right. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token danger
Hexa #FF5A5F
RGB 255, 90, 95
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This red is used to highlight that something isn't right. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token danger-dark
Hexa #E85257
RGB 232, 82, 87
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token warning-lighter
Hexa #FFFAF2
RGB 255, 250, 242
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token warning-light
Hexa #FFAD26
RGB 255, 173, 38
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token warning
Hexa #FF9E00
RGB 255, 158, 0
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token warning-dark
Hexa #E68E00
RGB 230, 142, 0
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This green is used to indicate the correctness. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token success-lighter
Hexa #F2FBFA
RGB 242, 251, 250
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This green is used to indicate the correctness. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token success-light
Hexa #17BCA1
RGB 23, 188, 161
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This green is used to indicate the correctness. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token success
Hexa #00B698
RGB 0, 182, 152
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
This green is used to indicate the correctness. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token success-dark
Hexa #00A68B
RGB 0, 166, 139
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
Grey Scale
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token grey-050
Hexa #F2F2F2
RGB 242, 242, 242
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token grey-100
Hexa #EBECEE
RGB 235, 236, 238
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description incoming.
Takeaways
Design Token grey-300
Hexa #C2C8D2
RGB 194, 200, 210
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token grey-500
Hexa #999999
RGB 153, 153, 153
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token grey-700
Hexa #66758d
RGB 102, 117, 141
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token grey-800
Hexa #3B4856
RGB 59, 72, 86
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
Black & White
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token white
Hexa #FFFFFF
RGB 255, 255, 255
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token black
Hexa #000000
RGB 0, 0, 0
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
Gradients
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token blue-primary
Gradient linear-gradient(to right top,#004c92,#086dca)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token blue-secondary
Gradient linear-gradient(to right,#479ce8,#3973e6)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token blue-tertiary
Gradient linear-gradient(to right,#4eabff,#0f8dff)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token blue-quaternary
Gradient linear-gradient(to right,#388cd9,#0c77d9)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token blue-quinary
Gradient linear-gradient(to bottom,#004c92,#0083c4)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token blue-complete
Gradient linear-gradient(to right,#4eabff,#0f8dff,#388cd9,#0c77d9)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token orange-primary
Gradient linear-gradient(to right,#ff9e00,#ff8b00)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token orange-secondary
Gradient linear-gradient(to right,#d98600,#d97500)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token orange-complete
Gradient linear-gradient(to right,#ff9e00,#ff8b00,#d98600,#d97500)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token red-primary
Gradient linear-gradient(to right,#f97f7f,#ff5a5f)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token red-secondary
Gradient linear-gradient(to right,#e26969,#d74b50)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token red-complete
Gradient linear-gradient(to right,#f97f7f,#ff5a5f,#e26969,#d74b50)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token green-primary
Gradient linear-gradient(to right,#00dcc9,#00b698)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token green-secondary
Gradient linear-gradient(to right,#00b698,#0f8e79)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token green-complete
Gradient linear-gradient(to right,#00dcc9,#00b698,#00b698,#0f8e79)
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA |
|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ |
Illustration Palette
For the moment, our illustration palette is in work in progress. You can find some information on the Illustrations page.
Accessibility
When comes the time to play with colors, accessibility is a real concern for us. Using contrasted enough colors, by keeping in mind people who also could have colorblind issues or hight contrast sensitivity, is an everyday work.
We are aware that some of our combinations of colors are not good enough, but good news is that we are working on it.
Here is the state of compatibility of our main colors.
Table of color compatibility.
We will work on improving those compatibility and doing more testing on color blindness.
If you are sensitive in a way or another and want to give feedback. Please contact us.