Turbo IT

"Building something great..."

Manchester-based · Worldwide reach

Brand & Customise

Choose Your Site Colours

Primary, secondary, and background colours — how they cascade through every component, with WCAG contrast guidance.

Updated 22 May 20265 min read

Three colour values drive the entire storefront theme. Pick them carefully — they cascade through every button, link, hover state, and accent on the site.

Where to set them

Raffle admin → Brand. Three hex inputs:

  • Primary (brand) colour— used for primary buttons, links, active nav items, and the “buy ticket” CTA. The single most visible colour on the site.
  • Secondary colour — used for hover states, glow effects, ambient lighting on game previews, and accent borders. Looks best as a complementary or analogous hue to your primary.
  • Background colour — the dark canvas behind everything. We default to a near-black (#0a0a0a). You can pick any dark hue, but stay dark — the storefront UI is built for dark-mode contrast.

Quick combos that work

If you’re not a designer, here are five proven combinations from sites we’ve shipped:

  • Lucky Turbo — Primary #00B0F0 (electric cyan) · Secondary #3B82F6 (cobalt) · Background #0a0a0a
  • Mr XCA — Primary #FF6B35 (vivid orange) · Secondary #FFB700 (gold) · Background #0F0F12
  • Pink Raffles (test tenant) — Primary #EC4899 · Secondary #A855F7 · Background #0a0a0a
  • Emerald — Primary #10B981 · Secondary #06B6D4 · Background #0a0a0a
  • Gold-on-black — Primary #EAB308 · Secondary #F97316 · Background #0a0a0a

WCAG contrast (don’t skip this)

Your primary colour must be readable as a link on the background. Aim for a contrast ratio of at least 4.5:1(WCAG AA for body text) — most bright saturated colours pass easily on a dark background, but if you want a deep navy primary on a near- black background you’ll fail it.

Test your combination at WebAIM Contrast Checker. If it fails AA, your CTAs will be hard to read for older customers and you’ll lose conversions you don’t know you’re losing.

How changes propagate

Saving in Brand writes to your tenant_configrow, which the storefront reads on every page render. There’s no rebuild step — colour changes are visible to your customers within a second.

Server-rendered emails use the same primary colour for their button styles, so colour changes also affect new transactional emails going forward.

If you change your mind later

Edit and save again — there’s no version history on colour choices today. If you’re running ads pointing to your site, give creative previews a re-render after a colour change to spot any contrast regressions in your specific ad-image overlays.

Next: Create Your First Competition.