Go to content Go to menu

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.

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.

blue-foyer-light

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast AA AAA
Blue Smoke Light 5.6:1
Blue Smoke 5.2:1
Blue Smoke Dark 4.9:1
blue-foyer

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast AA AAA
Blue Smoke Light 8.6:1
Blue Smoke 7.4:1
Blue Smoke Dark 7.0:1
blue-foyer-dark

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

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.

blue-smoke-light

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

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
blue-smoke

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

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
blue-smoke-dark

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

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
blue-ghost-light

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
blue-ghost

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
blue-ghost-dark

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

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.

yellow-lighter

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
yellow-light

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
yellow

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
yellow-dark

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

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.

info-lighter

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
info-light

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
info

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
info-dark

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
danger-lighter

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
danger-light

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
danger

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
danger-dark

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
warning-lighter

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
warning-light

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
warning

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
warning-dark

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
success-lighter

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
success-light

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
success

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
success-dark

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

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1

Grey Scale

grey-050

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 grey-050

Hexa #F2F2F2

RGB 242, 242, 242

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
grey-500

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 grey-500

Hexa #999999

RGB 153, 153, 153

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
grey-800

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 grey-800

Hexa #3B4856

RGB 59, 72, 86

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1

Black & White

white

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 white

Hexa #FFFFFF

RGB 255, 255, 255

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
black

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 black

Hexa #000000

RGB 0, 0, 0

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1

Gradients

blue-primary
#004C92 > #086DCA

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-primary

Gradient linear-gradient(to right top,#004c92,#086dca)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
blue-secondary
#479CE8 > #3973E6

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-secondary

Gradient linear-gradient(to right,#479ce8,#3973e6)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
blue-tertiary
#4EABFF > #0F8DFF

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-tertiary

Gradient linear-gradient(to right,#4eabff,#0f8dff)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
blue-quaternary
#388CD9 > #0C77D9

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-quaternary

Gradient linear-gradient(to right,#388cd9,#0c77d9)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
blue-quinary
#004C92 > #0083C4

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-quinary

Gradient linear-gradient(to bottom,#004c92,#0083c4)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
blue-complete
#4EABFF > #0F8DFF > #388CD9 > #0C77D9

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-complete

Gradient linear-gradient(to right,#4eabff,#0f8dff,#388cd9,#0c77d9)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
orange-primary
#FF9E00 > #FF8B00

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 orange-primary

Gradient linear-gradient(to right,#ff9e00,#ff8b00)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
orange-secondary
#D97500 > #D98600

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 orange-secondary

Gradient linear-gradient(to right,#d98600,#d97500)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
orange-complete
#FF9E00 > #FF8B00 > #D98600 > #D97500

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 orange-complete

Gradient linear-gradient(to right,#ff9e00,#ff8b00,#d98600,#d97500)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
red-primary
FF97F7F > #FF5A5F

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 red-primary

Gradient linear-gradient(to right,#f97f7f,#ff5a5f)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
red-secondary
#E26969 > #D74B50

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 red-secondary

Gradient linear-gradient(to right,#e26969,#d74b50)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
red-complete
#F97F7F > #FF5A5F > #E26969 > #D74B50

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 red-complete

Gradient linear-gradient(to right,#f97f7f,#ff5a5f,#e26969,#d74b50)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
green-primary
#00DCC9 > #00B698

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 green-primary

Gradient linear-gradient(to right,#00dcc9,#00b698)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
green-secondary
#00B698 > #0F8E79

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 green-secondary

Gradient linear-gradient(to right,#00b698,#0f8e79)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

Color Contrast Pass AA
Blue Smoke Light 8.6:1
green-complete
#00DCC9 > #00B698 > #00B698 > #0F8E79

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 green-complete

Gradient linear-gradient(to right,#00dcc9,#00b698,#00b698,#0f8e79)

Color compatibilities

It's the way colors can be combine has foreground/background with enough contrast for accessibility purpose.

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.