Jack Black#0A0A0A
Erd#9F3824
Olive Drab#6B7B55
Steel Gray#7A8B99
Palette direction

Jack Black Erd Color Palette

This palette features strong, confident main colors including a deep Jack Black and a warm Erd. The main colors create a distinctive custom harmony, with support colors providing subtle balance through neutral steel gray and olive accents. Neutrals range from pure white to near-black for versatile usage across backgrounds, text, and UI elements, ensuring clear legibility and strong visual hierarchy.

AnalogousFashion Beautyjack blackerdfashion beautybranding
palette-preview.example
Fashion Beauty color direction

Jack Black Erd Color Palette

This palette features strong, confident main colors including a deep Jack Black and a warm Erd. The main colors create a distinctive custom harmony, with support colors providing subtle balance through neutral steel gray and olive accents. Neutrals range from pure white to near-black for versatile usage across backgrounds, text, and UI elements, ensuring clear legibility and strong visual hierarchy.

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 White #FFFFFFon Jack Black #0A0A0A19.8:1 Excellent
Logo White #FFFFFFon Olive Drab #6B7B554.6:1 Strong
Logo Jack Black #0A0A0Aon White #FFFFFF19.8:1 Excellent
Logo Jack Black #0A0A0Aon Steel Gray #7A8B995.6:1 Strong
Icon color
BackgroundJack Black#0A0A0ATextWhite#FFFFFF
Primary Button19.80:1
AAA

Best for the main action users should notice first.

BackgroundErd#9F3824TextWhite#FFFFFF
Secondary Button6.85:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextJack Black#0A0A0A
Outlined Button19.80:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextJack Black#0A0A0A
Text Button19.80:1
AAA

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

Palette composition7 colorsAnalogous color relationship
9:41Jack Black Erd Color Palette Color role balance
Analogous 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.

CJack Black Erd Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The combination of Jack Black's deep richness and Erd's warm, earthy red creates a distinctive and memorable brand foundation distinguished by its strong contrast and complementary warmth.

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.Jack Black #0A0A0A
HeadlineUsed for main titles and key messages.Erd #9F3824
LinkUsed for links and interactive text.Jack Black #0A0A0A

Buttons

Primary Button
BackgroundJack Black #0A0A0A
TextWhite #FFFFFF
Secondary Button
BackgroundErd #9F3824
TextWhite #FFFFFF
Outlined Button
BackgroundJack Black #0A0A0A
TextJack Black #0A0A0A

Interface

TextDefault readable body text.Charcoal #1B1B1B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F7F6F5
IconSmall interface icons and marks.Olive Drab #6B7B55
BorderCards, inputs, and component borders.Olive Drab #6B7B55
DividerSubtle separators between content.Olive Drab #6B7B55
OutlineFocus rings and emphasis outlines.Olive Drab #6B7B55

Palette Colors

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

Main (Brand) Colors

The combination of Jack Black's deep richness and Erd's warm, earthy red creates a distinctive and memorable brand foundation distinguished by its strong contrast and complementary warmth.

PrimaryJack Black

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

Jack Black offers commanding depth and sophistication essential for the brand's logo and primary interactions.

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

RolesBtn Secondary Bg, Headline

Erd provides a warm, grounded energy that enhances headlines and secondary button backgrounds with inviting charisma.

HEX#9F3824
RGB159, 56, 36
HSL10, 63, 38
CMYK0, 65, 77, 38
TertiaryOlive Drab

RolesIcon, Border, Divider, Outline

Olive Drab introduces a muted natural tone that softly supports the main colors without overpowering them.

HEX#6B7B55
RGB107, 123, 85
HSL85, 18, 41
CMYK13, 0, 31, 52

Support Colors

Support colors extend the main palette by reinforcing the brand's serious yet approachable character, offering visual texture and balance primarily through subdued olive and steel gray.

Steel Gray

Steel Gray adds cool neutrality and subtle sophistication, balancing the warmth of Erd and grounding the black with a soft contrast.

HEX#7A8B99
RGB122, 139, 153
HSL207, 13, 54
CMYK20, 9, 0, 40

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#F7F6F5
RGB247, 246, 245
HSL30, 11, 96
CMYK0, 0, 1, 3
Charcoal

RolesText

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-jack-black: #0A0A0A;
  --color-erd: #9F3824;
  --color-olive-drab: #6B7B55;
  --color-steel-gray: #7A8B99;
  --color-white: #FFFFFF;
  --color-ivory: #F7F6F5;
  --color-charcoal: #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: #0A0A0A;
  --role-btn-primary-bg: #0A0A0A;
  --role-btn-outlined-border: #0A0A0A;
  --role-link: #0A0A0A;
  --role-btn-outlined-text: #0A0A0A;
  --role-btn-secondary-bg: #9F3824;
  --role-headline: #9F3824;
  --role-icon: #6B7B55;
  --role-border: #6B7B55;
  --role-divider: #6B7B55;
  --role-outline: #6B7B55;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F7F6F5;
  --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.
{
    "jack-black": "#0A0A0A",
    "erd": "#9F3824",
    "olive-drab": "#6B7B55",
    "steel-gray": "#7A8B99",
    "white": "#FFFFFF",
    "ivory": "#F7F6F5",
    "charcoal": "#1B1B1B"
}
Press Space to load new palette