FromSoftware color palette
GamingFromSoftware's brand identity is defined by a stark, minimalist palette dominated by black, white, and muted grays, reflecting its dark, atmospheric game worlds. The color system emphasizes clarity and contrast, with rare use of accent golds for highlights.
fromsoftware.jpFromSoftware colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- FromSoftware BlackPrimary0, 0, 0
- FromSoftware WhiteSecondary255, 255, 255
- FromSoftware GoldAccent200, 181, 96
Surfaces
Page, cards and dividers.- FromSoftware CharcoalBackground24, 24, 24
- FromSoftware Deep GraySurface34, 34, 34
- FromSoftware Border GrayBorder68, 68, 68
Text
Three tiers of copy.- FromSoftware Text WhiteText255, 255, 255
- FromSoftware Text GraySecondary text204, 204, 204
- FromSoftware Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- FromSoftware Success GreenSuccess123, 182, 97
- FromSoftware Warning GoldWarning229, 192, 123
- FromSoftware Error RedError217, 83, 79
- FromSoftware Info BlueInfo91, 192, 222
Use FromSoftware's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
fromsoftware-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5BC0DE;
--error: #D9534F;
--accent: #C8B560;
--border: #444444;
--primary: #000000;
--success: #7BB661;
--surface: #222222;
--warning: #E5C07B;
--secondary: #FFFFFF;
--text-muted: #888888;
--background: #181818;
--text-primary: #FFFFFF;
--text-secondary: #CCCCCC;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
11.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.9:1
Pass
Muted text on background
Needs 3:1 for large text
5.0:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
FromSoftware gray, dark and neutral colors
FromSoftware 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.
- FromSoftware CharcoalBackground
- HEX
- RGB
- HSL
- FromSoftware Deep GraySurface
- HEX
- RGB
- HSL
- FromSoftware Border GrayBorder
- HEX
- RGB
- HSL
- FromSoftware Text WhiteText
- HEX
- RGB
- HSL
- FromSoftware Text GraySecondary text
- HEX
- RGB
- HSL
- FromSoftware Muted GrayMuted text
- HEX
- RGB
- HSL
About FromSoftware's colors
FromSoftware uses a restrained, high-contrast palette to evoke mood and clarity, with black and white dominating both web and game UI. Gold is used sparingly for emphasis and prestige.
Primary black contrasts with white for legibility.
Gold accent highlights key elements or awards.
Muted grays provide depth and hierarchy.
Psychology
The dominance of black and gray conveys seriousness, mystery, and intensity, aligning with the studio's game themes. Gold accents suggest achievement and value.
Evolution
FromSoftware's palette has remained consistent, with black and white as core elements since the early 2000s. Occasional accent colors like gold have been introduced for special highlights but the overall system is stable.
Where FromSoftware uses each color
- Primary
Used for the logo, navigation bars, and main backgrounds.
- Secondary
Applied to text, icons, and negative space for contrast.
- Accent
Gold appears in award badges, call-to-action highlights, and premium content.
- Backgrounds
Charcoal and deep gray are used for web and menu backgrounds.
- Text
White and gray tones are used for primary and secondary text throughout digital interfaces.
- Semantic
Green, gold, red, and blue are reserved for status indicators, alerts, and informational messages in UI.
FromSoftware color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official primary brand color is FromSoftware Black, hex code #000000.
FromSoftware Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
FromSoftware uses Charcoal (#181818), Deep Gray (#222222), Border Gray (#444444), and Muted Gray (#888888) as its primary neutrals.
Use black and white for primary layouts and text, with gold reserved for accents and highlights. Grays provide structure and hierarchy in backgrounds and borders.
The secondary color is FromSoftware White, #FFFFFF, and the accent is FromSoftware Gold, #C8B560. 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 FromSoftware's colors consistently when it generates UI.
Make something in the spirit of FromSoftware
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.