Colors

Our color system reflects the vibrant, natural world we draw from. Each palette is intentionally selected to convey clarity, trust, and vitality — guiding consistent brand expression across all touchpoints.

Primary Colors

The foundation of the Vibrant Health visual identity. These colors appear most consistently across all brand communications.

VH Navy

HEX
#002C4E
CMYK
100/45/0/66
RGB
0/48/87
PANTONE
540 C

VH Green

HEX
#025F1D
CMYK
81/0/100/54
RGB
2/95/29
PANTONE
2427 C

White

HEX
#FFFFFF
CMYK
0/0/0/0
RGB
255/255/255

Secondary & Accent Colors

Supporting tints and accents that extend the palette for backgrounds, states, and decorative use. Use these sparingly to maintain brand hierarchy.

VH Light Green

HEX
#84C12F
CMYK
32/0/76/24
RGB
132/193/47

VH Turquoise

HEX
#2AC8BE
CMYK
79/0/5/22
RGB
42/200/190

Turquoise Light

HEX
#96FFF8
CMYK
41/0/3/0
RGB
150/255/248

Text on Background

Approved color combinations for text and backgrounds. These pairings ensure accessibility and visual harmony across light and dark contexts.

Note: For complete color values, reference the Web Design System

Aa Bb Cc

White on VH Navy

Primary dark background

Aa Bb Cc

VH Navy on White

Primary light background

Aa Bb Cc

VH Navy on VH Light Green 10%

Accent light background

Aa Bb Cc

VH Navy on Gradient / Light Green

Gradient light background

Color Usage Guidelines

Do
  • Use VH Navy as the dominant color for brand authority
  • Pair VH Light Green with white for fresh, energetic layouts
  • Reserve VH Turquoise for digital accents
  • Maintain sufficient contrast ratios for accessibility (WCAG AA minimum)
  • Use approved gradient pairs — never mix gradients from different families
Don't
  • Don't combine VH Navy with VH Green directly — they clash at equal weight
  • Don't use Accents as a primary color — it's reserved for specialty contexts
  • Don't apply multiple brand colors in the same layout without hierarchy
  • Don't place VH Light Green text on white — low contrast
  • Don't use gradients as text color