Colour palette
Our primary and secondary colour palettes and how to apply them.
The Fight for Sight colours
Clear and consistent use of our colour palette will help us build recognition of our brand.
Our brand identity always prioritizes accessibility, and care should be taken when using our palette to ensure that our communications uphold high accessible standards.
Our colour palette consists of four core elements:
● Core palette: These are the colours that should be predominant across all our communications.
● Brights: These complement the core colours and add contrast, variation and interest to the overall brand palette.
● Dark variants: These are darker versions of our bright colours, for use when colour needs to be accessible against white.
● Neutrals: A set of grey tones plus white for use as UI background colours, outlines and text.
We've listed specifications for print and online and approved colour combinations.
Bright palette
Including Turquoise, our palette of brights is made up with the addition of Lilac and Lime. These bright colours complement our primary palette whilst creating accents, contrast and interest across our applications.
Turquoise
R27 G251 B249
#1BFBF9
C59 M0 Y15 K0
Pantone® 3255
Lilac
R187 G152 B248
#BB98F8
C36 M41 Y0 K0
Pantone® 2655
Lime
R216 G252 B127
#D8FC7F
C23 M0 Y64 K0
Pantone® 374
Dark variants
Each of our bright colours has a corresponding darker accessible version, for use in large text and graphics to provide extra contrast when used against a white background.
Teal
R0 G130 B155
#00829B
C82 M29 Y29 K9
Pantone® 7459
Purple
R102 G56 B209
#6638D1
C80 M79 Y0 K0
Pantone® 266
Olive
R120 G160 B0
#78A000
C60 M17 Y100 K3
Pantone® 377
Neutral palette
Our neutral palette is made up of white and grey tones, which support the core and bright palettes. Black and dark grey can be used for type, depending on the background and application. Off white can be used as a background colour when appropriate and used online as part of the UI system.
Black
R0 G0 B0
#000000
C0 M0 Y0 K100
Dark grey
R60 G60 B60
#3C3C3C
C0 M0 Y0 K82
Off white
R245 G245 B245
#F5F5F5
C0 M0 Y0 K5
White
R255 G255 B255
#FFFFFF
C0 M0 Y0 K0
Colour specifications
The colours are specified in RGB/Hex (for web use, on screen presentations and PDF documents intended for onscreen use only), CMYK (for four colour offset printing), and Pantone* (for single colour printing).
Tints
Tints are a paler version of a colour made from a mixture of the colour and white that lightens it or is achieved with transparency/reduced opacity on top of white.
Wherever possible, we should aim to use the solid versions of our colours as tints can dilute their strength and lead to inconsistency. This helps our visual brand stay consistent and strong.
The only instance where a reduced opacity of colour is permissible is when we use our Navy blue as a semi-opaque (90% opacity) overlay on top of imagery to enable titles and text to maintain good legibility.
How to use different colour combinations
Fight for Sight Navy blue and Fight for Sight Turquoise are our core colours and should always be the predominant colours across our communications.
Navy blue
R28 G24 B54
#1C1836
C89 M86 Y30 K60
Pantone® 5255
Turquoise
R27 G251 B249
#1BFBF9
C59 M0 Y15 K0
Pantone® 3255
Colour usage ratios
Follow this guide to get the overall colour emphasis right. Navy and Turquoise must always be the dominant colours. The other colours in our palette can support them but with lesser degrees of emphasis. This ensures that all our communications are instantly recognisable as coming from Fight for Sight.
The ratios are as follows:
- Dark blue 48%
- Bright blue 17%
- Off-white 8%
- The remaining 27% is evenly divided between the remaining colours.
How to apply the colours for optimum accessibility
Colour plays a key role in understanding information regardless of the medium and application. When colours are insufficiently distinct, whether in brightness or difference in hue, users might have difficulty discerning letters and graphical elements.
Colour contrast
Colour contrast is very important to legibility. To meet current accessibility standards, use only approved colour combinations. Take special care with reverse type and type overlays, especially if your audience tends to be middle-aged or older.
Excellent contrast
Colour combinations that meet AAA accessibility standards
Dark blue (#1C1836) on white (#FFFFFF)
Dark blue (#1C1836) on bright blue (#1BFBF9)
Dark blue (#1C1836) on light purple (#BB98F8)
Dark blue (#1C1836) on lime (#D8FC7F)
White (#FFFFFF) on dark blue (#1C1836)
Bright blue (#1BFBF9) on dark blue (#1C1836)
Light Purple (#BB98F8) on dark blue (#1C1836)
Good contrast
Colour combinations that meet AA accessibility standards
White (#FFFFFF) on teal (#00829B)
White (#FFFFFF) on purple (#6638D1)
White (#FFFFFF) on olive (#78A000)
Teal (#00829B) on white (#FFFFFF)
