COLOURS

Fairfax & Favor are instantly identifiable with their signature navy and gold theme. The simple but striking and complimentary colours build on brand recognition formed by the shield and crown logo. Fairfax & Favour use off-black within their logo, and this colour is carried through in all their design work and website.

Brand Colours

OFF-BLACK
HEX #231f20

RGB

R / 35
G / 31
B / 32

CYMK

C / 0
M / 0
Y / 0
K / 100

How to: Background colour | Text colour

<div class="bg-sg-off-black">
	<!-- ... -->
</div>

<span class="text-sg-off-black">
	This text will appear as off-black in colour.
</span>

NAVY
HEX #1F2A44

RGB

R / 31
G / 42
B / 68

CYMK

C / 91
M / 81
Y / 46
K / 47

How to: Background colour | Text colour

<div class="bg-sg-navy">
	<!-- ... -->
</div>

<span class="text-sg-navy">
	This text will appear as brand navy in colour.
</span>

GOLD
HEX #976C41

RGB

R / 151
G / 108
B / 65

CYMK

C / 34
M / 55
Y / 81
K / 17

How to: Background colour | Text colour

<div class="bg-sg-gold">
	<!-- ... -->
</div>

<span class="text-sg-gold">
	This text will appear as brand gold in colour.
</span>

Functional Colours

Also known as supporting colours, they are not within the brand/logo but they support and compliment the brand colours and build on the brand recognition. The darker two colours are used for impact and calls to action, the lighter is more subtle and less relevant information.

PURE BLACK

HEX #000000
RGB 0 / 0 / 0
CMYK 75 / 68 / 67 / 90

DARK GREY

HEX #555555
RGB 85 / 85 / 85
CMYK 64 / 56 / 55 / 31

LIGHT GREY

HEX #ebebeb
RGB 235 / 235 / 235
CMYK 7 / 5 / 5 / 0

How to: Background colours | Text colours

<div class="bg-black">
	<!-- ... -->
</div>
<div class="bg-sg-dark-grey">
	<!-- ... -->
</div>
<div class="bg-sg-light-grey">
	<!-- ... -->
</div>

<span class="text-black">
	This text will appear as pure black in colour.
</span>

<span class="text-sg-dark-grey">
	This text will appear as dark grey in colour.
</span>

Feedback Colours

These feedback colours are used in web-only, usually after a form is submitted to indicate success or fail/error. Therefore colours are provided in HEX only.

SUCCESS GREEN

BACKGROUND #EEF9EE
BORDER #008A17
TEXT #739C69

ERROR RED

BACKGROUND #FFF5F6
BORDER #CC0000
TEXT #B16666

How to: Success Messages | Error/Fail Messages

<div class="text-sg-green bg-sg-light-green border-l-4 border-sg-dark-green p-4">
	This text will appear as green in colour.
</div>

<div class="text-sg-red bg-sg-light-red border-l-4 border-sg-dark-red p-4">
	This text will appear as red in colour.
</div>

For typeface colours, please reference our dedicated section.