Epic Games Color Psychology & Meaning
Epic Games' near-black and blue signals premium gaming — this is where blockbuster games live. The blue is confident without trying to be edgy.
#0D0D0D
#2196F3
#FFFFFF
#555555
Background
Primary Accent
Secondary
Body Text
Epic Games
darkboldgaming all gamingappbranding
Fail
WCAG Grade
2.6:1
Contrast Ratio
2,800
Saves
7,400
AI Copies
Use #0D0D0D as the background. Use #2196F3 as the primary accent. Use #FFFFFF as secondary. Use #555555 as body text/supporting color. Palette mood: Epic Games — dark, bold, gaming.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Epic Games 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.4% | 13, 13, 13 | 0%, 0%, 0%, 95% | 0°, 0%, 5% | ||
| Primary Accent Luminance: 28.6% | 33, 150, 243 | 86%, 38%, 0%, 5% | 207°, 90%, 54% | ||
| Secondary Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Body Text Luminance: 9.1% | 85, 85, 85 | 0%, 0%, 0%, 67% | 0°, 0%, 33% |
Color Harmony: Split-Complementary Scheme
The Epic Games 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
Epic Games was founded in 1991 and became a household name with Fortnite in 2017. The dark identity reflects the cinematic quality of their game releases.
Best Design Use Cases
Near-black for all surfaces. Blue for interactive elements, download CTAs, and brand moments. White for primary content. Gray for secondary info.
Industries This Palette Suits
Game development, gaming platforms, digital storefronts, entertainment.
How to Implement the Epic Games Color Scheme
To use this Epic Games 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 #0D0D0D for the main background and #2196F3 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #555555 and #0D0D0D is 2.61:1 (Fail). Ensure your body text remains legible.