Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Colours

These are our brand colours. When using these colours use the SCSS variable rather than referencing the hex code directly.

FutureLearn gradient

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

Blue
Ultramarine
Purple
Violet
Pink
Coral
Orange
Gold
Yellow

Primary palette

There are three core colours in the FutureLearn colour palette. Pink signifies the present, or an activity you’re doing now. Blue signifies the past, or an activity you’ve completed. Yellow signifies the future. It is also used for alerts.

  • PRIMARY
    Blue
    #0000ff
  • PRIMARY
    Pink
    #de00a5
  • PRIMARY
    Yellow
    #fecb51

Secondary palette

There are two colours in the secondary colour palette. purple is used to distinguish FutureLearn programs. Orange can be used when a secondary colour is required alongside core colours

  • SECONDARY
    Purple
    #8700cd
  • SECONDARY
    Orange
    #ff8151

Additional palette

There are four colours in the additional colour palette. Additional colours can be used alongside secondary and core colours to provide a full spectrum of colour options. Currently, these are used in the charts and avatar icons.

  • ADDITIONAL
    Ultramarine
    #5000e2
  • ADDITIONAL
    Violet
    #b100bc
  • ADDITIONAL
    Coral
    #ff4a6e
  • ADDITIONAL
    Gold
    #ffaa54

Greyscale palette

  • Black
    #3a343a
  • Cool Grey
    #4a4d55
  • Medium Grey
    #727376
  • Soft Grey
    #cacacc
  • Light Grey
    #ededee
  • Gainsboro Grey
    #fafafa

Colour Usage

Primary palette

Default links and buttons use Pink:
“Completed” and “Current” states use Blue:
Todo icon
Feedback messages and alerts use Yellow:
Alert example

Secondary palette

The FutureLearn Award uses purple in its icon and on the programs page:

Additional palette

Avatars use all of these colours:
UL
PU
VI
PI
CO
OR
GO

Greyscale palette

The default colour for content is Black:

Why might functions be localised?

Secondary links and primary headlines use Cool Grey:
  • Leave
  • Cancel
Secondary headlines use Medium Grey:
Page header example
Horizontal rules and borders use Light Grey:

Gainsboro Grey is used for grey background colour (e.g. comments, sub-navigation, standfirst):

Standfirst

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

  • Hello

  • Hello

  • Hello

  • Hello

  • Hello

  • Hello

  • Hello

  • Hello

  • Hello

Naughty

  • Hello

  • Hello

  • Hello

  • Hello

  • Hello

  • Hello

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.

  • Cool
    white
    gainsboro
    light
    soft
  • Medium
    white
    gainsboro
    light
  • Soft
    cool
  • Light
    cool
    medium
  • Gainsboro
    cool
    medium
  • White
    cool
    medium