Crimson#E63946
Coral#F4A261
Plum#5A2A5E
Saddle Brown#7A4E2D
Bronze#C77D2B
Palette direction

Kevin Hart Inspired Color Palette

This palette channels Kevin Hart’s high-energy, punchy stage presence with warm, expressive color that feels bold but approachable. The system pairs a lively red-orange with a gold-orange and a deep plum accent, then anchors them with clean neutrals for sharp digital usability.

CustomCreativeKevin Hartcomedyentertainmentenergy
palette-preview.example
Creative color direction

Kevin Hart Inspired Color Palette

This palette channels Kevin Hart’s high-energy, punchy stage presence with warm, expressive color that feels bold but approachable. The system pairs a lively red-orange with a gold-orange and a deep plum accent, then anchors them with clean neutrals for sharp digital usability.

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 Plum #5A2A5E10.9:1 Excellent
Logo Charcoal #151515on Coral #F4A2618.9:1 Excellent
Logo Charcoal #151515on White #FFFFFF18.3:1 Excellent
Logo Charcoal #151515on Bronze #C77D2B5.6:1 Strong
Icon color
BackgroundCrimson#E63946TextCharcoal#151515
Primary Button4.38:1
Large text

Best for the main action users should notice first.

BackgroundCoral#F4A261TextCharcoal#151515
Secondary Button8.86:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextPlum#5A2A5E
Outlined Button10.89:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextPlum#5A2A5E
Text Button10.89:1
AAA

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

Palette composition8 colorsCustom color relationship
9:41Kevin Hart Inspired Color Palette Color role balance
Custom 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.

CKevin Hart Inspired Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors work together as a high-energy performance system: a hot red-orange leads with confidence, a warm gold-orange adds spark and warmth, and a deep plum gives the palette a more dimensional, stage-ready edge. Together they feel memorable, lively, and unmistakably personality-driven.

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 #E63946
HeadlineUsed for main titles and key messages.Coral #F4A261
LinkUsed for links and interactive text.Plum #5A2A5E

Buttons

Primary Button
BackgroundCrimson #E63946
TextCharcoal #151515
Secondary Button
BackgroundCoral #F4A261
TextCharcoal #151515
Outlined Button
BackgroundPlum #5A2A5E
TextPlum #5A2A5E

Interface

TextDefault readable body text.Charcoal #151515
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #151515
IconSmall interface icons and marks.Saddle Brown #7A4E2D
BorderCards, inputs, and component borders.Bronze #C77D2B
DividerSubtle separators between content.Bronze #C77D2B
OutlineFocus rings and emphasis outlines.Bronze #C77D2B

Palette Colors

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

Main (Brand) Colors

The main colors work together as a high-energy performance system: a hot red-orange leads with confidence, a warm gold-orange adds spark and warmth, and a deep plum gives the palette a more dimensional, stage-ready edge. Together they feel memorable, lively, and unmistakably personality-driven.

PrimaryCrimson

RolesLogo, Btn Primary Bg

Crimson delivers the loudest burst of energy and makes the brand feel fearless and instantly visible.

HEX#E63946
RGB230, 57, 70
HSL355, 78, 56
CMYK0, 75, 70, 10
SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral adds warmth and charisma, softening the intensity of the red while keeping the palette upbeat.

HEX#F4A261
RGB244, 162, 97
HSL27, 87, 67
CMYK0, 34, 60, 4
TertiaryPlum

RolesLink, Btn Outlined Border, Btn Outlined Text

Plum introduces a sharper contrast and gives the system a smarter, more premium stage presence.

HEX#5A2A5E
RGB90, 42, 94
HSL295, 38, 27
CMYK4, 55, 0, 63

Support Colors

The support colors extend the main palette with quieter, harmonizing accents that keep the system flexible without distracting from the core personality. They add structure and mood while staying subordinate to the lead red-orange and gold-orange pairing.

Saddle Brown

RolesIcon

Saddle Brown grounds icons with a warm, grounded tone that supports the lively main colors without competing with them.

HEX#7A4E2D
RGB122, 78, 45
HSL26, 46, 33
CMYK0, 36, 63, 52
Bronze

RolesBorder, Divider, Outline

Bronze reinforces the warm energy of the palette and works well for subtle UI structure and separation.

HEX#C77D2B
RGB199, 125, 43
HSL32, 64, 47
CMYK0, 37, 78, 22

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F3F0EA
RGB243, 240, 234
HSL40, 27, 94
CMYK0, 1, 4, 5
Charcoal

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#151515
RGB21, 21, 21
HSL0, 0, 8
CMYK0, 0, 0, 92

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: #E63946;
  --color-coral: #F4A261;
  --color-plum: #5A2A5E;
  --color-saddle-brown: #7A4E2D;
  --color-bronze: #C77D2B;
  --color-white: #FFFFFF;
  --color-ivory: #F3F0EA;
  --color-charcoal: #151515;
}

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: #E63946;
  --role-btn-primary-bg: #E63946;
  --role-btn-secondary-bg: #F4A261;
  --role-headline: #F4A261;
  --role-link: #5A2A5E;
  --role-btn-outlined-border: #5A2A5E;
  --role-btn-outlined-text: #5A2A5E;
  --role-icon: #7A4E2D;
  --role-border: #C77D2B;
  --role-divider: #C77D2B;
  --role-outline: #C77D2B;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #151515;
  --role-text: #151515;
  --role-btn-primary-text: #151515;
  --role-btn-secondary-text: #151515;
}

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": "#E63946",
    "coral": "#F4A261",
    "plum": "#5A2A5E",
    "saddle-brown": "#7A4E2D",
    "bronze": "#C77D2B",
    "white": "#FFFFFF",
    "ivory": "#F3F0EA",
    "charcoal": "#151515"
}
Press Space to load new palette