Performance Sport Color Psychology & Meaning
Performance sport is the palette of biometric displays and carbon fiber — near-black with electric green signals that this equipment is serious and the data is real-time.
#0A0A0A
#00FF88
#FFFFFF
#888888
Background
Primary Accent
Secondary
Body Text
Performance Sport
energeticmodernathletic all sportbrandingfitness
AA
WCAG Grade
5.6:1
Contrast Ratio
2,700
Saves
7,200
AI Copies
Use #0A0A0A as the background. Use #00FF88 as the primary accent. Use #FFFFFF as secondary. Use #888888 as body text/supporting color. Palette mood: Performance Sport — energetic, modern, athletic.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Performance Sport color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 0.3% | 10, 10, 10 | 0%, 0%, 0%, 96% | 0°, 0%, 4% | ||
| Primary Accent Luminance: 73.3% | 0, 255, 136 | 100%, 0%, 47%, 0% | 152°, 100%, 50% | ||
| Secondary Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Body Text Luminance: 24.6% | 136, 136, 136 | 0%, 0%, 0%, 47% | 0°, 0%, 53% |
Color Harmony: Split-Complementary Scheme
The Performance Sport palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Performance sports branding evolved significantly with the rise of sports science and wearable technology. The dark-neon system signals precision measurement and elite performance.
Best Design Use Cases
Near-black for all surfaces. Electric green for performance metrics, active states, and primary CTAs. White for content. Gray for secondary information.
Industries This Palette Suits
Sports technology, athletic brands, fitness apps, performance equipment, gym brands.
How to Implement the Performance Sport Color Scheme
To use this Performance Sport color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #0A0A0A for the main background and #00FF88 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #888888 and #0A0A0A is 5.58:1 (AA). Ensure your body text remains legible.