Crimson#7B0A0A
Black#0A0A0A
Charcoal#3B2F2F
Palette direction

Crimson Black Gothic Color Palette

This color palette combines deep, brooding hues with subtle dark accents and strong neutrals to evoke a dark, mysterious, and gothic atmosphere perfect for a horror games company. The main colors create a recognizable system through their complementary contrast, while the support colors add depth and nuance without overpowering the mood. The neutrals ensure high readability and balance across interfaces, enhancing usability while maintaining the eerie vibe.

MonochromaticCreativehorrorgothicdarkmysterious
palette-preview.example
Creative color direction

Crimson Black Gothic Color Palette

This color palette combines deep, brooding hues with subtle dark accents and strong neutrals to evoke a dark, mysterious, and gothic atmosphere perfect for a horror games company. The main colors create a recognizable system through their complementary contrast, while the support colors add depth and nuance without overpowering the mood. The neutrals ensure high readability and balance across interfaces, enhancing usability while maintaining the eerie vibe.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Ivory #F4F2F0on Black #0A0A0A17.7:1 Excellent
Logo Black #0A0A0Aon Ivory #F4F2F017.7:1 Excellent
Icon color
BackgroundCrimson#7B0A0ATextIvory#F4F2F0
Primary Button9.95:1
AAA

Best for the main action users should notice first.

BackgroundBlack#0A0A0ATextIvory#F4F2F0
Secondary Button17.73:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#F4F2F0TextCrimson#7B0A0A
Outlined Button9.95:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F4F2F0TextCrimson#7B0A0A
Text Button9.95:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition6 colorsMonochromatic color relationship
9:41Crimson Black Gothic Color Palette Color role balance
Monochromatic system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CCrimson Black Gothic Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors are a striking complementary pair of deep Crimson and rich Black, invoking gothic themes and strong visual recognition that resonates with horror aesthetics.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Crimson #7B0A0A
HeadlineUsed for main titles and key messages.Black #0A0A0A
LinkUsed for links and interactive text.Crimson #7B0A0A

Buttons

Primary Button
BackgroundCrimson #7B0A0A
TextIvory #F4F2F0
Secondary Button
BackgroundBlack #0A0A0A
TextIvory #F4F2F0
Outlined Button
BackgroundCrimson #7B0A0A
TextCrimson #7B0A0A

Interface

TextDefault readable body text.Jet Black #1B1B1B
Bg LightLight page or section background.Ivory #F4F2F0
Bg DarkDark page or section background.Jet Black #1B1B1B
IconSmall interface icons and marks.Charcoal #3B2F2F
BorderCards, inputs, and component borders.Charcoal #3B2F2F
DividerSubtle separators between content.Charcoal #3B2F2F
OutlineFocus rings and emphasis outlines.Charcoal #3B2F2F

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors are a striking complementary pair of deep Crimson and rich Black, invoking gothic themes and strong visual recognition that resonates with horror aesthetics.

PrimaryCrimson

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Crimson evokes blood and passion, giving a vivid, intense emotional anchor reflecting horror and gothic darkness.

HEX#7B0A0A
RGB123, 10, 10
HSL0, 85, 26
CMYK0, 92, 92, 52
SecondaryBlack

RolesHeadline, Btn Secondary Bg

Black brings depth, mystery, and darkness essential for gothic mood and strong visual grounding.

HEX#0A0A0A
RGB10, 10, 10
HSL0, 0, 4
CMYK0, 0, 0, 96

Support Colors

The support colors extend the main palette with deep, muted tones that harmonize with crimson and black, reinforcing the gothic and mysterious aura without overpowering the main colors.

Charcoal

RolesIcon, Border, Divider, Outline

Charcoal provides a muted dark brownish-black tone that adds texture and detail, softening transitions while complementing the primary reds and blacks.

HEX#3B2F2F
RGB59, 47, 47
HSL0, 11, 21
CMYK0, 20, 20, 77

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F4F2F0
RGB244, 242, 240
HSL30, 15, 95
CMYK0, 1, 2, 4
Charcoal Black
HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87
Jet Black

RolesBg Dark, Text

HEX#1B1B1B
RGB27, 27, 27
HSL0, 0, 11
CMYK0, 0, 0, 89

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-crimson: #7B0A0A;
  --color-black: #0A0A0A;
  --color-charcoal: #3B2F2F;
  --color-ivory: #F4F2F0;
  --color-charcoal-black: #222222;
  --color-jet-black: #1B1B1B;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #7B0A0A;
  --role-link: #7B0A0A;
  --role-btn-primary-bg: #7B0A0A;
  --role-btn-outlined-border: #7B0A0A;
  --role-btn-outlined-text: #7B0A0A;
  --role-headline: #0A0A0A;
  --role-btn-secondary-bg: #0A0A0A;
  --role-icon: #3B2F2F;
  --role-border: #3B2F2F;
  --role-divider: #3B2F2F;
  --role-outline: #3B2F2F;
  --role-bg-light: #F4F2F0;
  --role-btn-primary-text: #F4F2F0;
  --role-btn-secondary-text: #F4F2F0;
  --role-bg-dark: #1B1B1B;
  --role-text: #1B1B1B;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "crimson": "#7B0A0A",
    "black": "#0A0A0A",
    "charcoal": "#3B2F2F",
    "ivory": "#F4F2F0",
    "charcoal-black": "#222222",
    "jet-black": "#1B1B1B"
}
Press Space to load new palette