Colour

Colour is fundamental to Sport Wales' brand identity and user experience. Our colour system creates emotional connections, guides user attention, and ensures accessibility across all platforms.

Primary Brand Colours

These four colours form the foundation of our brand identity, representing Welsh heritage, sporting excellence, and national pride.

SW Red
#E32434
HEX #E32434
RGB 227, 36, 52
HSL 355°, 81%, 52%

Primary action, calls-to-action, alerts

SW Blue
#164B64
HEX #164B64
RGB 22, 75, 100
HSL 199°, 64%, 24%

Primary brand, navigation, headings

SW Green
#299D91
HEX #299D91
RGB 41, 157, 145
HSL 174°, 59%, 39%

Success states, featured content

SW Yellow
#F6B207
HEX #F6B207
RGB 246, 178, 7
HSL 43°, 94%, 50%

Highlights, warnings, accents

Primary Brand Colors in Action

See how our brand colours work together to create engaging user interfaces.

Extended Colour Palette

Light and dark variations of our primary colours provide flexibility while maintaining brand consistency.

Red Variations

#F7BDC2
Light
#E32434
Base
#8E0A0A
Dark

Blue Variations

#6CD0FF
Light
#164B64
Base
#001830
Dark

Green Variations

#97E9E1
Light
#299D91
Base
#005D53
Dark

Yellow Variations

#FFFFB7
Light
#F6B207
Base
#A77B00
Dark

Neutral Colours

Neutral colours provide balance and ensure content readability while supporting our brand colours.

#000000
Black
#6B7280
Gray 500
#BFBEC5
Gray
#F4F5F7
Light Gray
#FFFFFF
White

Colour Usage Guidelines

✓ Best Practices

  • • Use SW Blue for primary navigation and key information
  • • Reserve SW Red for primary actions and urgent alerts
  • • Apply SW Green for success states and featured content
  • • Use SW Yellow sparingly for highlights and warnings
  • • Maintain sufficient contrast ratios (min 4.5:1)
  • • Test colours with colourblind users and tools
  • • Use semantic colours consistently across the system

✗ Things to Avoid

  • • Don't use colour alone to convey information
  • • Avoid using brand colours for decorative purposes
  • • Don't mix different tints/shades of the same colour
  • • Avoid low contrast combinations
  • • Don't use colours outside the defined palette
  • • Avoid overusing bright accent colours
  • • Don't rely on colour for critical information