Color collection
Gaming Color Palettes
Gaming palettes for menus, overlays, launch pages, esports brands, and game community sites.
GamingVividDark UI
Best for: game menus, overlays, and esports landing pagesExport: CSS, Tailwind, JSON, SVGPreview: dashboard, landing, mobile UI
Gaming 1Gaming / Vivid / Dark UIQuality 97Primary
#E11428Accent#F28736Surface#211312Text#F7F3F3Support#62EA53Gaming 2Gaming / Vivid / Dark UIQuality 94Primary#E13914Accent#F2DF36Surface#241914Text#F7F4F3Support#53EA6EGaming 5Gaming / Vivid / Dark UIQuality 94Primary#DAE114Accent#3C36F2Surface#2A2E1AText#F7F7F3Support#53E5EAGaming 3Gaming / Vivid / Dark UIQuality 93Primary#E17414Accent#ADF236Surface#272016Text#F7F5F3Support#53EA99Gaming 13Gaming / Vivid / Dark UIQuality 92Primary#14A4E1Accent#F23C36Surface#283A48Text#F3F5F7Support#EA53BCGaming 7Gaming / Vivid / Dark UIQuality 91Primary#66E114Accent#36C6F2Surface#23341DText#F4F7F3Support#538FEAHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for game menus, overlays, and esports landing pages. Let high-saturation colors guide attention, then test text contrast in dark mode.
Vivid colors are limited to action and highlight roles so the palette feels energetic without overpowering UI text.
UI previewPrimary
Card
Button
Accent
CSS Variables
:root {
--primary: #E11428;
--accent: #F28736;
--surface: #211312;
--text: #F7F3F3;
--support: #62EA53;
}Text / Surface contrast: 16.35:1
FAQ
Where should I use gaming color palettes?
These palettes are designed for game menus, overlays, and esports landing pages.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Let high-saturation colors guide attention, then test text contrast in dark mode.