ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/App UI

Gaming HUD Crimson

Aggressive esports companion app and telemetry interface with ruby red alert triggers and pitch-black framing.

#App UI#Gaming#UI#Bold#Dark
Open in Generator
COLOR 1
#0D0D12
Obsidian Black
COLOR 2
#1F1F2E
Kachiiro Victory Blue
COLOR 3
#DC2626
Poppy Red
COLOR 4
#F87171
Begonia
COLOR 5
#FEF2F2
Lavender Blush

Color Values & Codes

HEX · RGB · HSL
rgb(13, 13, 18)hsl(240, 16%, 6%)Color details →
rgb(31, 31, 46)hsl(240, 19%, 15%)Color details →
Poppy Red
#DC2626
rgb(220, 38, 38)hsl(0, 72%, 51%)Color details →
Begonia
#F87171
rgb(248, 113, 113)hsl(0, 91%, 71%)Color details →
rgb(254, 242, 242)hsl(0, 86%, 97%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
App UI Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #0D0D12;
  --color-2: #1F1F2E;
  --color-3: #DC2626;
  --color-4: #F87171;
  --color-5: #FEF2F2;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#0D0D12 on #F871717.01:1
Normal Text AA Pass
Sample Text
#0D0D12 on #FEF2F217.72:1
Normal Text AA Pass
Sample Text
#1F1F2E on #F871715.87:1
Normal Text AA Pass
Sample Text
#1F1F2E on #FEF2F214.84:1
Normal Text AA Pass
Sample Text
#DC2626 on #F871711.75:1
Large Text Only (Fail)
Sample Text
#DC2626 on #FEF2F24.41:1
Large Text Only (Pass)

Related Palettes in App UI

Explore App UI
#0F172ACopy
#1E293BCopy
#2563EBCopy
#38BDF8Copy
#F8FAFCCopy
cp-featured-01Technology
SaaS Velocity Blue
TechModernCool
#050505Copy
#00FF66Copy
#00F0FFCopy
#FF0055Copy
#FFE600Copy
cp-featured-04Gaming
Cyber Glitch Protocol
GamingFuturisticNeon
#180F33Copy
#491F79Copy
#7C3AEDCopy
#A78BFACopy
#F5F3FFCopy
cp-featured-05App UI
Fluid iOS Violet
App UICreative
#0B0B0BCopy
#1C1917Copy
#B45309Copy
#D97706Copy
#FDE68ACopy
cp-featured-06Luxury
Haute Couture Noir & Gold
LuxuryDarkFashion