Colours

Primary Palette

FL Pink

#de00a5

FL Blue

#2541fc

FL Yellow

#fecb51

FL BLack

#3a343a

Secondary Palette

Ultramarine

#5000e2

Purple

#8700cd

Violet

#b100bc

Coral

#ff4a6e

Orange

#ff8151

Gold

#ffaa54

Greyscale Palette

Cool Grey

#4a4d55

Medium Grey

#727376

Soft Grey

#cacacc

Light Grey

#ededee

Gainsboro

#fafafa

White

#ffffff

The FutureLearn colour palette is taken from the FutureLearn gradient, which symbolises the journey from past to present to future.

Colour Usage

When using these colours in stylesheets, use the SCSS colour mixin to reference the colour by name rather than referencing the hex code directly.

Primary palette

Secondary palette

Additional palette

Greyscale palette

Colour Combinations

Some colours work from well together, while others don’t. In general, avoid combining bright primary colours, as it may look garish and heavy for the eye.

Nice

Naughty

Colour contrast

Below are the greyscale combinations that provide enough contrast to be accessible. If the colours you're using are not in this grid, you can check the contrast using this contrast ratio tool.