Lemon Yellow#FFDD00
Rich Black#000000
Muted Gold#CCB800
Cool Gray#7F7F7F
Palette direction

Black Yellow Bold Color Palette

This palette draws inspiration from the bold, high-contrast black and yellow branding evident in the image, combining strong visual impact with readability and clarity. The main colors establish a dynamic and energetic system, while the supporting colors provide balance and subtlety. The neutral colors maintain the essential contrast for text and backgrounds, ensuring accessibility and a professional appearance.

MonochromaticCreativeblackyellowboldcontrast
palette-preview.example
Creative color direction

Black Yellow Bold Color Palette

This palette draws inspiration from the bold, high-contrast black and yellow branding evident in the image, combining strong visual impact with readability and clarity. The main colors establish a dynamic and energetic system, while the supporting colors provide balance and subtlety. The neutral colors maintain the essential contrast for text and backgrounds, ensuring accessibility and a professional appearance.

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 Pure White #FFFFFFon Rich Black #00000021.0:1 Excellent
Logo Rich Black #000000on Lemon Yellow #FFDD0015.6:1 Excellent
Logo Rich Black #000000on Pure White #FFFFFF21.0:1 Excellent
Logo Rich Black #000000on Muted Gold #CCB80010.4:1 Excellent
Icon color
BackgroundLemon Yellow#FFDD00TextDark Charcoal#1A1A1A
Primary Button12.92:1
AAA

Best for the main action users should notice first.

BackgroundRich Black#000000TextPure White#FFFFFF
Secondary Button21.00:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextLemon Yellow#FFDD00
Outlined Button1.35:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextLemon Yellow#FFDD00
Text Button1.35:1
Low

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

Palette composition7 colorsMonochromatic color relationship
9:41Black Yellow Bold 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.

CBlack Yellow Bold Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The black and yellow colors create a recognizable complementary color scheme that balances high energy with strong readability ideal for attention-grabbing branding.

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.Lemon Yellow #FFDD00
HeadlineUsed for main titles and key messages.Lemon Yellow #FFDD00
LinkUsed for links and interactive text.Lemon Yellow #FFDD00

Buttons

Primary Button
BackgroundLemon Yellow #FFDD00
TextDark Charcoal #1A1A1A
Secondary Button
BackgroundRich Black #000000
TextPure White #FFFFFF
Outlined Button
BackgroundLemon Yellow #FFDD00
TextLemon Yellow #FFDD00

Interface

TextDefault readable body text.Dark Charcoal #1A1A1A
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Light Gray #F5F5F5
IconSmall interface icons and marks.Muted Gold #CCB800
BorderCards, inputs, and component borders.Muted Gold #CCB800
DividerSubtle separators between content.Muted Gold #CCB800
OutlineFocus rings and emphasis outlines.Muted Gold #CCB800

Palette Colors

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

Main (Brand) Colors

The black and yellow colors create a recognizable complementary color scheme that balances high energy with strong readability ideal for attention-grabbing branding.

PrimaryLemon Yellow

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

Lemon Yellow energizes the palette with vibrancy and catches attention immediately, fueling brand recall.

HEX#FFDD00
RGB255, 221, 0
HSL52, 100, 50
CMYK0, 13, 100, 0
PrimaryRich Black

RolesBtn Secondary Bg

Rich Black grounds the palette with depth and ensures maximum contrast and readability in text.

HEX#000000
RGB0, 0, 0
HSL0, 0, 0
CMYK0, 0, 0, 100

Support Colors

The supporting colors extend the palette with a muted gold and a soft gray to complement the main colors, creating harmony and providing subtle contrast for icons, borders, and dividers without overpowering the primary hues.

Muted Gold

RolesIcon, Border, Divider, Outline

Muted Gold adds a refined subtlety that harmonizes with Lemon Yellow without diminishing its brightness.

HEX#CCB800
RGB204, 184, 0
HSL54, 100, 40
CMYK0, 10, 100, 20
Cool Gray

Cool Gray offers a balanced neutral that supports the black and yellow by softening transitions and framing content.

HEX#7F7F7F
RGB127, 127, 127
HSL0, 0, 50
CMYK0, 0, 0, 50

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Gray

RolesBg Dark

HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Dark Charcoal

RolesText, Btn Primary Text

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

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-lemon-yellow: #FFDD00;
  --color-rich-black: #000000;
  --color-muted-gold: #CCB800;
  --color-cool-gray: #7F7F7F;
  --color-pure-white: #FFFFFF;
  --color-light-gray: #F5F5F5;
  --color-dark-charcoal: #1A1A1A;
}

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: #FFDD00;
  --role-link: #FFDD00;
  --role-btn-primary-bg: #FFDD00;
  --role-btn-outlined-border: #FFDD00;
  --role-btn-outlined-text: #FFDD00;
  --role-headline: #FFDD00;
  --role-btn-secondary-bg: #000000;
  --role-icon: #CCB800;
  --role-border: #CCB800;
  --role-divider: #CCB800;
  --role-outline: #CCB800;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F5F5F5;
  --role-text: #1A1A1A;
  --role-btn-primary-text: #1A1A1A;
}

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.
{
    "lemon-yellow": "#FFDD00",
    "rich-black": "#000000",
    "muted-gold": "#CCB800",
    "cool-gray": "#7F7F7F",
    "pure-white": "#FFFFFF",
    "light-gray": "#F5F5F5",
    "dark-charcoal": "#1A1A1A"
}
Press Space to load new palette