OCJC Branding

Colours The various different colours that I use.


This page sometimes refers to "Text Style". This means the style that any text on a background of that colour should use. For example, "Dark" means that you should use a dark text colour against that colour background.
If multiple styles are given, they are all acceptable, but priority is given in the order that they are listed. For example "Light, Dark" means that either light or dark text is acceptible, but that light text is preferred and should be used where possible.


All of these colours pass the following accessibility guidelines, when the background is the colour and the foreground is determined by the text style:

  • WCAG AA for normal text
  • WCAG AA for large text
  • WCAG AAA for large text
  • WCAG AA for graphical objects and user interface components

Additionally, most (but not all) of these colours also pass the WCAG AAA guidelines for normal text.
Please note that, if multiple text styles are specified, only the first one has been tested to meet these guidelines. For light text styles, the text colour used was Whiter Than Light Mode White, and for dark text styles, Very Black was used.
If you are concerned about accessibility (which you should be), you should make sure to test any other styles yourself before using them.

Not Quite Black

Hex: #343A40
RGB: R52 G56 B64
HSL: H210 S10 L23
CMYK: C19 M9 Y0 K75
Text Style: Light

Signature Cyan

Hex: #00CCFF
RGB: R0 G204 B255
HSL: H192 S100 L50
CMYK: C100 M20 Y0 K0
Text Style: Dark

Somewhat Dark Blue

Hex: #0064FF
RGB: R0 G100 B255
HSL: H216 S100 L50
CMYK: C100 M61 Y0 K0
Text Style: Light

Very Black

Hex: #000000
RGB: R0 G0 B0
HSL: H0 S0 L0
CMYK: C0 M0 Y0 K100
Text Style: Light

Success Green

Hex: #5CB85C
RGB: R92 G184 B92
HSL: H120 S39 L54
CMYK: C50 M0 Y50 K28
Text Style: Dark, Light

Warning Orange

Hex: #F0AD4E
RGB: R240 G173 B78
HSL: H35 S84 L62
CMYK: C0 M28 Y67 K6
Text Style: Dark, Light

Danger Red

Hex: #D9534F
RGB: R217 G83 B79
HSL: H2 S64 L58
CMYK: C0 M62 Y64 K15
Text Style: Dark, Light

Deep Green

Hex: #006400
RGB: R0 G100 B0
HSL: H120 S100 L20
CMYK: C100 M0 Y100 K61
Text Style: Light

Vibrant Green

Hex: #00CC00
RGB: R0 G204 B0
HSL: H120 S100 L40
CMYK: C100 M0 Y100 K20
Text Style: Dark

Darkish Red

Hex: #CC0000
RGB: R204 G0 B0
HSL: H0 S100 L40
CMYK: C0 M100 Y100 K20
Text Style: Light

Maybe Too Red

Hex: #990000
RGB: R153 G0 B0
HSL: H0 S100 L30
CMYK: C0 M100 Y100 K40
Text Style: Light

Definitely Too Red

Hex: #770000
RGB: R119 G0 B0
HSL: H0 S100 L23
CMYK: C0 M100 Y100 K53
Text Style: Light

Almost Black

Hex: #232323
RGB: R35 G35 B35
HSL: H0 S0 L14
CMYK: C0 M0 Y0 K86
Text Style: Light

Purple But Almost Blue

Hex: #3F51B5
RGB: R63 G81 B181
HSL: H231 S48 L48
CMYK: C65 M55 Y0 K29
Text Style: Light

Actually Purple

Hex: #512DA8
RGB: R81 G45 B168
HSL: H258 S58 L42
CMYK: C52 Y73 M0 K34
Text Style: Light

Balanced Grey

Hex: #757575
RGB: R117 G117 B117
HSL: H0 S0 L46
CMYK: C0 M0 Y0 K54
Text Style: Light, Dark

Watery Teal

Hex: #00BCD4
RGB: R0 G188 B212
HSL: H187 S100 L42
CMYK: C100 M11 Y0 K17
Text Style: Dark, Light

Whiter Than Light Mode White

RGB: R255 G255 B255
HSL: H0 S0 L100
CMYK: C0 M0 Y0 K0
Text Style: Dark

Primary Blue

Hex: #0275D8
RGB: R2 G117 B216
HSL: H208 S98 L43
CMYK: C99 M46 Y0 K15
Text Style: Light, Dark

Informational Aqua

Hex: #5BC0DE
RGB: R91 G192 B222
HSL: H194 S66 L61
CMYK: C59 M14 Y0 K13
Text Style: Dark