Website Colours
Website Colours
| Website Documentation / Tyndale BrandColour Pallet Reference
The following are the colour options available for use on the website. Each colour value is documented by HEX code and HSL value. The named custom property is also documented here. Utility classes to alter the text and background colours are based on the color name: ex. color-blue-400 -or- bg-color-blue-400.
Blue 400 - Brand
HSL: 255, 67, 20
--color-blue-400
Blue 300
HSL: 255, 67, 30
--color-blue-300
Blue 200 - Link
HSL: 224, 76, 48
--color-blue-200
Blue 100
HSL: 255, 67, 80
--color-blue-100
Blue 50
HSL: 255, 67, 91
--color-blue-50
Gold 400 - Brand
HSL: 43, 100, 47
--color-gold-400
Gold 300
HSL: 43, 100, 57
--color-gold-300
Gold 100
HSL: 43, 75, 95
--color-gold-100
Red 400 - Brand
HSL: 0, 69, 43
--color-red-400
Green 400
HSL: 135, 67, 20
--color-green-400
Grey 700
HSL: 0, 0, 10
--color-grey-700
Grey 600 - Text
HSL: 0, 0, 20
--color-grey-600
Grey 500
HSL: 0, 0, 42
--color-grey-500
Grey 400
HSL: 0, 0, 75
--color-grey-400
Grey 350
HSL: 0, 0, 86
--color-grey-350
Grey 300
HSL: 0, 0, 94
--color-grey-300
Grey 200
HSL: 0, 0, 97
--color-grey-200
Grey 100 - White
HSL: 0, 0, 100
--color-grey-100
Background Colour Examples
The following are the website colours used as backgrounds with the automatic text and link colours displayed.
bg-color-grey-100 (white) Link
bg-color-grey-200 Link
bg-color-grey-300 Link
bg-color-grey-350 Link
bg-color-grey-400 Link
bg-color-grey-500 Link
bg-color-grey-600 Link
.bg-color-grey-700 Link
.bg-color-red-400 Link
.bg-color-green-400 Link
.bg-color-gold-400 Link
.bg-color-gold-300 Link
.bg-color-gold-100 Link
.bg-color-blue-200 Link
.bg-color-blue-300 Link
.bg-color-blue-400 Link