Colour palette

The TouchBasePro colour palette balances clarity and confidence with a hint of cheeky vibrance. It includes a Primary colour, a Secondary accent, Neutral tones, and space for future Tertiary colours.

1. Primary Colour

Orange

This is the hero colour — used for key buttons, highlights, logos, icons, and playful visual cues across brand touchpoints.

  • HEX: #EB9822
  • RGB: 235, 152, 34
  • CMYK: 0, 46, 100, 0

 

2. Primary Colour Spectrum

#ffffff #fbecd7 #f7d8aa #f3c27c #efad4e #eb9822 #bb7a1a #8c5a14 #5c3d0f #2c1d07 #121212

Use these supporting tones to create depth and hierarchy while remaining on-brand.

  • From tinted peach through core orange (#EB9822) to burnt umber and near-black
  • Use lighter tones for backgrounds or UI panels
  • Use darker tones for text accents, contrast, and hierarchy

 

3. Secondary Colour

Cool Accent Blue

Use as a balancing accent in charts, CTAs, infographics, or banners — especially where cool contrast is needed. This shade plays well with off-white or charcoal backgrounds.

  • HEX: #2285EB
  • RGB: 34, 133, 235
  • CMYK: 86, 45, 0, 11

 

4. Neutral Colours

These colours form the quiet backbone of the brand — ideal for layouts, backgrounds, and balance.

Swatch Name HEX RGB CMYK Usage
White #FFFFFF 255, 255, 255 0, 0, 0, 0 Backgrounds, large content areas
Charcoal #3F3F3F 63, 63, 63 0, 0, 0, 75 Body text, borders, contrast

5. Tertiary Colour Palette

 

Swatch HEX Usage
#457EA1 Charts, infographics, secondary buttons
#71CCD8 Data visualisation, badges, analytics UI
#5EC5AB Infographics, success states, charts
#FBCE5E Alerts, highlights, tooltips
#F79738 Analytics accents, iconography, charts
#E44F58 Warning states, data trends, heatmaps
#8B1740 Depth in data, critical events, tags

These colours are used sparingly to support the core brand palette — typically in data visualisation, analytics dashboards, charts, infographics, and UI components that require colour differentiation. They aren’t meant for primary branding but offer useful contrast in complex visual systems. The palette maintains visual clarity while staying in harmony with the core brand colours.

 

6. Usage Guidance

Primary vs Accent Roles:

Element Colour Role
CTA Buttons Primary Orange
Links / Highlights Accent Blue
Background Blocks Neutrals
Charts / Illustrations Accent Blue or Tertiary
Icons & UI States Orange or Spectrum