Tyndale Website Colors

The following colours are the official Tyndale brand colours and other colours used on Tyndale websites. The main colours have been reviewed using the Accessible Colors service. The required Contrast Ratio to meet the WCAG 2.0 guidelines for contrast accessibility level AA is 4.5. Each colour has been tested with both white (#FFF) and dark (#222) text with the resulting contrast ratios recorded below with either a (P)ass or (F)ail indicated.

Main Colours

Royal Blue

#215 • (34,17,85)
White Text
Contrast Ratio: 16.41 (P)
Dark Text
Contrast Ratio: 1.03 (F)

Red

#B22 • (187,34,34)
White Text
Contrast Ratio: 6.24 (P)
Dark Text
Contrast Ratio: 2.55 (F)

Gold

#EA0 • (238,170,0)
White Text
Contrast Ratio: 2.02 (F)
Dark Text
Contrast Ratio: 7.87 (P)

Green

#790 • (119,153,0)
White Text
Contrast Ratio: 3.31 (F)
Dark Text
Contrast Ratio: 4.8 (P)

Orange

#C31 • (204,51,17)
White Text
Contrast Ratio: 5.19 (P)
Dark Text
Contrast Ratio: 3.07 (F)

Aqua

#3BB • (51,187,187)
White Text
Contrast Ratio: 2.34 (F)
Dark Text
Contrast Ratio: 6.79 (P)

Beige

#EAE4A9 • (234,228,169)
White Text
Contrast Ratio: 1.3 (F)
Dark Text
Contrast Ratio: 12.25 (P)

Light

#EFEFEF • (239,239,239)
White Text
Contrast Ratio: 1.15 (F)
Dark Text
Contrast Ratio: 13.84 (P)

Dark

#222 • (34,34,34)
White Text
Contrast Ratio: 15.91 (P)
Dark Text
Contrast Ratio: 0 (F)

White

#FFF • (255,255,255)
White Text
Contrast Ratio: 0 (F)
Dark Text
Contrast Ratio: 15.91 (P)

Blue Medium (link-color)

#0062A0 • (0,98,160)
White Text
Contrast Ratio: 6.45 (P)
Dark Text
Contrast Ratio: 2.47 (F)

Other Colours Used

Grey Lighter

#DDD

Grey Light

#CCC

Grey Medium Light

#999

Grey Medium

#777

Grey Dark

#555

Black

#000

Yellow

#FF9

Yellow Bright

#FF0

Mustard

#ED0

Gradients

Royal Blue Gradient

Base Colour: #215
Linear Gradient to right
#221155 0% → #1e1c8e 100%

Red Gradient

Base Colour: #B22
Linear Gradient to right
#b22 0% → #e22 100%

Gold Gradient

Base Colour: #EA0
Linear Gradient to right
#EA0 0% → #F7C14A 100%

Green Gradient

Base Colour: #790
Linear Gradient to right
#617c01 0% → #790 100%

Dark Gradient

Base Colour: #222
Linear Gradient to right
#222 0% → #666 100%

Blue Medium Gradient

Base Colour: #0062A0
Linear Gradient to right
#024672 0% → #0062A0 100%

Light Gradient

Base Colour: #EFEFEF
Linear Gradient to right
#CCC 0% → #EFEFEF 100%

Please note: these gradients have not been added as utility classes at this point... thinking through how to implement. These gradient values are here for general documentation to keep gradients consistent.

// example use
.gradient-blue { background: linear-gradient(to right, #221155 0%,#1e1c8e 100%); }