Krafton color palette
GamingKrafton's brand identity is defined by a bold, high-contrast monochrome palette, anchored by its signature deep blue and black tones. The color system is minimal and modern, reflecting the company's focus on immersive gaming experiences.
krafton.comKrafton colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Krafton Deep BluePrimary20, 33, 61
- Krafton BlackSecondary0, 0, 0
- Krafton OrangeAccent252, 163, 17
Surfaces
Page, cards and dividers.- Krafton WhiteBackground255, 255, 255
- Krafton Dark SurfaceSurface26, 26, 26
- Krafton Light BorderBorder229, 229, 229
Text
Three tiers of copy.- Krafton Deep Blue TextText20, 33, 61
- Krafton Gray TextSecondary text108, 108, 108
- Krafton Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Krafton Success GreenSuccess39, 174, 96
- Krafton Warning OrangeWarning242, 153, 74
- Krafton Error RedError235, 87, 87
- Krafton Info BlueInfo45, 156, 219
Use Krafton's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
krafton-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D9CDB;
--error: #EB5757;
--accent: #FCA311;
--border: #E5E5E5;
--primary: #14213D;
--success: #27AE60;
--surface: #1A1A1A;
--warning: #F2994A;
--secondary: #000000;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #14213D;
--text-secondary: #6C6C6C;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.0:1
Pass
Text on surface
Needs 4.5:1 for body text
1.1:1
Fail
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
3.3:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
9.3:1
Pass
Krafton background, border and text colors
The quiet part of the Krafton palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Krafton WhiteBackground
- HEX
- RGB
- HSL
- Krafton Dark SurfaceSurface
- HEX
- RGB
- HSL
- Krafton Light BorderBorder
- HEX
- RGB
- HSL
- Krafton Deep Blue TextText
- HEX
- RGB
- HSL
- Krafton Gray TextSecondary text
- HEX
- RGB
- HSL
- Krafton Muted GrayMuted text
- HEX
- RGB
- HSL
About Krafton's colors
Krafton's palette is built around a deep blue primary and strong monochrome contrasts, with a single orange accent for highlights. The system is designed for clarity, legibility, and a modern, immersive feel.
Primary blue and black provide a strong, authoritative foundation.
Orange accent is used sparingly for calls to action and highlights.
Neutral grays balance the dark and light extremes for UI clarity.
Psychology
Deep blue conveys trust, stability, and professionalism, while black adds intensity and focus. The orange accent introduces energy and draws attention to key elements.
Evolution
Krafton's palette has remained consistent, focusing on minimalism and contrast since its rebranding. The use of orange as an accent has become more prominent in recent years for interactive elements.
Where Krafton uses each color
- Primary
Used in the logo, navigation bars, and major headings.
- Secondary
Applied as backgrounds for footers, overlays, and dark UI sections.
- Accent
Used for buttons, links, and important highlights.
- Backgrounds
White is the default background for most pages and content areas.
- Text
Deep blue is used for primary text, with gray for secondary and muted content.
- Semantic
Green, orange, red, and blue are reserved for status indicators and alerts.
Krafton color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Krafton brand color is Krafton Deep Blue, hex code #14213D.
Krafton Deep Blue (#14213D) is RGB(20, 33, 61) and CMYK(67, 46, 0, 76).
Krafton uses #1A1A1A (Krafton Dark Surface) for dark UI backgrounds and #6C6C6C (Krafton Gray Text) for secondary text.
Use Krafton Deep Blue (#14213D) for primary branding and navigation, Krafton Orange (#FCA311) for accents, and neutral grays for backgrounds and secondary elements.
The secondary color is Krafton Black, #000000, and the accent is Krafton Orange, #FCA311. Together with the primary they make up the three brand colors at the top of this page.
3 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 Krafton's colors consistently when it generates UI.
Make something in the spirit of Krafton
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.