Primary colors
Dark blue
PMS 2758 CMYK 100 / 95 / 5 / 39 RGB 0 / 26 / 69 HTML #001a45
White
PMS ? CMYK 0 / 0 / 0 / 0 RGB 255 / 255 / 255 HTML #ffffff
Red
PMS 485 CMYK 0 / 95 / 100 / 0 RGB 255 / 0 / 0 HTML #ff0000 Accessible red #eb0000
Grey
HTML #f5f5f5
Accent colors
Purple
PMS 2587 CMYK 58 / 76 / 0 / 0 RGB 145 / 0 / 219 HTML #9100db
Orange
PMS 144 CMYK 0 / 51 / 100 / 0 RGB 255 / 156 / 0 HTML #ff9c00
Light blue
PMS 2925 CMYK 85 / 21 / 0 / 0 RGB 0 / 176 / 255 HTML #00b0ff
Green
PMS 361 CMYK 77 / 0 / 100 / 0 RGB 0 / 173 / 0 HTML #00ad00
How to use them
Only the primary colors can be used as a big background color.
When working with the Foleon colors, please keep the following in mind:
Red is a bright statement color. Use it in moderation, such as in small backgrounds or CTA blocks and buttons. Never use it on covers or headers.
The accessible red should be used only when the content must be accessible. Mostly on CTAs.
The orange color is a warm, bright color that matches well with the primary ones. Therefore, it can be used in small quantities like when you need a tertiary color in a chart/table.
Or as a small background when a piece of content needs to be emphasized.
All colors can be applied in smaller quantities, such as in icons, figures, or visualizations.
Exceptions can be made, for example when a unique campaign style needs to be created. Then, although an accent color can be used as a background, dark blue should always be present, so the asset is still attached to Foleon.
Specific campaign asset example
You can create emotional meaning with different color combinations.
For example, dark blue with light blue is more formal, whereas red with orange feels warm and activating. Within infographics, colors can get a functional meaning. Red/fail, green/success. Orange/active, blue/passive. Or you can apply a 'cold to warm' sorting order when someone is moving through a funnel. Secondary colors should always be used as functional as possible and never decorative. Please be aware of any unintended meaning that could be created with specific color combinations.
In some cases, a darker version of the white may be needed.
For example when you need a light contrast for cards on a white background without directly wanting to apply a dark color. You can use the primary gray color or a lighter one.
Darker white
HTML #FAFAFA
Only the dark blue and white colors can be used for text color.
Which one you use will depend on the color of the background.
Don'ts
- Don’t create covers, headers, quotes, normal visual backgrounds, or icon backgrounds with red or an accent color background unless it’s for a specific campaign that requires it.
- Never mix two color backgrounds in a cover, unless it’s for a background shape.
- Never use the red #FF0000 for accessible content.
- Don’t write text using an accent color.
- Don’t place white on gray or vice versa. It’s too difficult to read.
- Don’t place red on dark blue, unless you’re highlighting a number figure.