Unreal Engine color palette
GamingUnreal Engine's color identity is defined by a deep, sophisticated navy paired with a minimal, grayscale UI. The palette emphasizes clarity and professionalism, supporting its role as a leading game development platform.
unrealengine.comUnreal Engine colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Unreal NavyPrimary14, 17, 40
- Editor Deep GraySecondary28, 32, 60
- Blueprint CyanAccent28, 176, 246
Surfaces
Page, cards and dividers.- Viewport BlackBackground24, 26, 32
- Panel CharcoalSurface35, 37, 58
- Outline SlateBorder58, 61, 77
Text
Three tiers of copy.- Engine WhiteText255, 255, 255
- UI GraySecondary text178, 181, 194
- Muted LabelMuted text109, 112, 130
Semantic
Feedback and state colors.- Compile GreenSuccess76, 217, 100
- Warning YellowWarning255, 214, 0
- Error RedError255, 59, 48
- Info BlueInfo90, 200, 250
Use Unreal Engine's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
unreal-engine-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5AC8FA;
--error: #FF3B30;
--accent: #1CB0F6;
--border: #3A3D4D;
--primary: #0E1128;
--success: #4CD964;
--surface: #23253A;
--warning: #FFD600;
--secondary: #1C203C;
--text-muted: #6D7082;
--background: #181A20;
--text-primary: #FFFFFF;
--text-secondary: #B2B5C2;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.6:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Unreal Engine background, border and text colors
Unreal Engine runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Viewport BlackBackground
- HEX
- RGB
- HSL
- Panel CharcoalSurface
- HEX
- RGB
- HSL
- Outline SlateBorder
- HEX
- RGB
- HSL
- Engine WhiteText
- HEX
- RGB
- HSL
- UI GraySecondary text
- HEX
- RGB
- HSL
- Muted LabelMuted text
- HEX
- RGB
- HSL
About Unreal Engine's colors
Unreal Engine's palette is anchored by a dark navy, complemented by cool grays and a signature cyan accent. This creates a modern, high-contrast interface that emphasizes usability and focus.
Primary navy pairs with grayscale neutrals for clarity.
Accent cyan highlights interactive elements and links.
Success, warning, and error colors provide clear status feedback.
Psychology
The deep navy conveys professionalism, stability, and technical sophistication. Cyan accents add energy and highlight innovation within the interface.
Evolution
Unreal Engine's palette has remained consistent, focusing on dark themes and minimal color for years. The accent cyan and status colors have been refined to improve accessibility and clarity.
Where Unreal Engine uses each color
- Primary
Used for the Unreal Engine logo, main navigation backgrounds, and splash screens.
- Secondary
Appears in editor sidebars, tool panels, and modal backgrounds.
- Accent
Highlights active tabs, buttons, and links within the editor UI.
- Backgrounds
Viewport and workspace backgrounds use the darkest neutral for reduced eye strain.
- Text
White and light gray tones are used for primary and secondary text throughout the interface.
- Semantic
Green, yellow, and red are used for compile status, warnings, and errors in the editor.
Unreal Engine color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Unreal Engine primary color is #0E1128. This deep navy is used across the brand's core assets and UI.
Unreal Navy (#0E1128) is RGB(14, 17, 40) and CMYK(65, 58, 0, 84). Always use the hex code for digital applications.
Unreal Engine uses a range of dark grays such as #1C203C (Editor Deep Gray) and #23253A (Panel Charcoal) for backgrounds and panels. These neutrals provide contrast and reduce visual fatigue.
Use Unreal Navy (#0E1128) for primary branding and navigation, with Blueprint Cyan (#1CB0F6) for accents and highlights. Grayscale tones structure the interface, while semantic colors are reserved for status and feedback.
The secondary color is Editor Deep Gray, #1C203C, and the accent is Blueprint Cyan, #1CB0F6. Together with the primary they make up the three brand colors at the top of this page.
6 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Unreal Engine's colors consistently when it generates UI.
Make something in the spirit of Unreal Engine
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.