Goldenrod Yellow#FFB300
Crimson Red#D62828
Charcoal Black#1B1B1B
Persimmon Orange#FF6F3C
Slate Gray#4A4946
Palette direction

Sunpride Vibrant Contrast Color Palette

This palette draws inspiration from the vibrant contrasts and energetic warmth of the image, balancing intense yellows and reds with grounding blacks and soft neutrals to create a brand identity that feels dynamic, bold, and reliable.

AnalogousFood Beverageyellowredblackvibrant
palette-preview.example
Food Beverage color direction

Sunpride Vibrant Contrast Color Palette

This palette draws inspiration from the vibrant contrasts and energetic warmth of the image, balancing intense yellows and reds with grounding blacks and soft neutrals to create a brand identity that feels dynamic, bold, and reliable.

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 Charcoal Black #1B1B1B17.2:1 Excellent
Logo Jet Black #0D0D0Don Goldenrod Yellow #FFB30010.8:1 Excellent
Logo Pure White #FFFFFFon Crimson Red #D628285.0:1 Strong
Logo Jet Black #0D0D0Don Pure White #FFFFFF19.4:1 Excellent
Icon color
BackgroundGoldenrod Yellow#FFB300TextJet Black#0D0D0D
Primary Button10.83:1
AAA

Best for the main action users should notice first.

BackgroundCrimson Red#D62828TextPure White#FFFFFF
Secondary Button5.01:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextGoldenrod Yellow#FFB300
Outlined Button1.79:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextGoldenrod Yellow#FFB300
Text Button1.79:1
Low

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

Palette composition8 colorsAnalogous color relationship
9:41Sunpride Vibrant Contrast 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.

CSunpride Vibrant Contrast Color PaletteFood Beverage brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors leverage a complementary scheme combining vivid yellow and strong red, enhanced by a deep black to create a striking and memorable brand identity.

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.Goldenrod Yellow #FFB300
HeadlineUsed for main titles and key messages.Crimson Red #D62828
LinkUsed for links and interactive text.Goldenrod Yellow #FFB300

Buttons

Primary Button
BackgroundGoldenrod Yellow #FFB300
TextJet Black #0D0D0D
Secondary Button
BackgroundCrimson Red #D62828
TextPure White #FFFFFF
Outlined Button
BackgroundGoldenrod Yellow #FFB300
TextGoldenrod Yellow #FFB300

Interface

TextDefault readable body text.Jet Black #0D0D0D
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Snow White #F7F7F7
IconSmall interface icons and marks.Persimmon Orange #FF6F3C
BorderCards, inputs, and component borders.Persimmon Orange #FF6F3C
DividerSubtle separators between content.Persimmon Orange #FF6F3C
OutlineFocus rings and emphasis outlines.Persimmon Orange #FF6F3C

Palette Colors

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

Main (Brand) Colors

The main colors leverage a complementary scheme combining vivid yellow and strong red, enhanced by a deep black to create a striking and memorable brand identity.

PrimaryGoldenrod Yellow

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

Goldenrod Yellow evokes warmth, energy, and optimism, making it eye-catching and suitable for primary brand elements.

HEX#FFB300
RGB255, 179, 0
HSL42, 100, 50
CMYK0, 30, 100, 0
SecondaryCrimson Red

RolesHeadline, Btn Secondary Bg

Crimson Red delivers passion and vitality, providing a strong complementary contrast to the yellow for emphasis and attention.

HEX#D62828
RGB214, 40, 40
HSL0, 69, 50
CMYK0, 81, 81, 16
TertiaryCharcoal Black

Charcoal Black grounds the palette with sophistication and offers high contrast for readability, especially on bright backgrounds.

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

Support Colors

Support colors add depth and balance through subtle gradients of orange and muted darks, reinforcing the warmth and strength without overpowering the main colors.

Persimmon Orange

RolesIcon, Border, Divider, Outline

Persimmon Orange offers a softer orange tone that complements the yellow and red, providing visual interest while remaining harmonious.

HEX#FF6F3C
RGB255, 111, 60
HSL16, 100, 62
CMYK0, 56, 76, 0
Slate Gray

Slate Gray serves as a subdued accent color that stabilizes the brightness of the main colors, supporting clear separation and balance.

HEX#4A4946
RGB74, 73, 70
HSL45, 3, 28
CMYK0, 1, 5, 71

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
Snow White

RolesBg Dark

HEX#F7F7F7
RGB247, 247, 247
HSL0, 0, 97
CMYK0, 0, 0, 3
Jet Black

RolesText, Btn Primary Text

HEX#0D0D0D
RGB13, 13, 13
HSL0, 0, 5
CMYK0, 0, 0, 95

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-goldenrod-yellow: #FFB300;
  --color-crimson-red: #D62828;
  --color-charcoal-black: #1B1B1B;
  --color-persimmon-orange: #FF6F3C;
  --color-slate-gray: #4A4946;
  --color-pure-white: #FFFFFF;
  --color-snow-white: #F7F7F7;
  --color-jet-black: #0D0D0D;
}

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: #FFB300;
  --role-link: #FFB300;
  --role-btn-primary-bg: #FFB300;
  --role-btn-outlined-border: #FFB300;
  --role-btn-outlined-text: #FFB300;
  --role-headline: #D62828;
  --role-btn-secondary-bg: #D62828;
  --role-icon: #FF6F3C;
  --role-border: #FF6F3C;
  --role-divider: #FF6F3C;
  --role-outline: #FF6F3C;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F7F7F7;
  --role-text: #0D0D0D;
  --role-btn-primary-text: #0D0D0D;
}

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.
{
    "goldenrod-yellow": "#FFB300",
    "crimson-red": "#D62828",
    "charcoal-black": "#1B1B1B",
    "persimmon-orange": "#FF6F3C",
    "slate-gray": "#4A4946",
    "pure-white": "#FFFFFF",
    "snow-white": "#F7F7F7",
    "jet-black": "#0D0D0D"
}
Press Space to load new palette