Prussian Blue#004e8c
Vermilion#e94b35
Imperial Purple#5b287a
Blue Green#56b1c8
Indigo#3c2a58
Palette direction

Vibrant Sunset Custom Color Palette

This vibrant color palette is inspired by the dynamic blend of warm and cool tones in the image, creating a balanced yet striking system. The main colors use bold blues, warm reds, and rich purples to convey energy and depth, while the support colors soften these effects with lighter turquoise and muted indigo shades. Neutrals provide essential contrast and balance with pure white, off-white, and near-black tones, ensuring readability and versatility across brand applications.

ComplementaryCreativevibrantsunsetcolorpalette
palette-preview.example
Creative color direction

Vibrant Sunset Custom Color Palette

This vibrant color palette is inspired by the dynamic blend of warm and cool tones in the image, creating a balanced yet striking system. The main colors use bold blues, warm reds, and rich purples to convey energy and depth, while the support colors soften these effects with lighter turquoise and muted indigo shades. Neutrals provide essential contrast and balance with pure white, off-white, and near-black tones, ensuring readability and versatility across brand applications.

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 Imperial Purple #5B287A10.3:1 Excellent
Logo Raisin Black #232323on White #FFFFFF15.7:1 Excellent
Logo Raisin Black #232323on Blue Green #56B1C86.4:1 Strong
Icon color
BackgroundPrussian Blue#004e8cTextWhite#ffffff
Primary Button8.51:1
AAA

Best for the main action users should notice first.

BackgroundVermilion#e94b35TextRaisin Black#232323
Secondary Button4.13:1
Large text

Useful for softer choices and secondary paths.

BackgroundWhite#ffffffTextPrussian Blue#004e8c
Outlined Button8.51:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#ffffffTextPrussian Blue#004e8c
Text Button8.51:1
AAA

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

Palette composition8 colorsComplementary color relationship
9:41Vibrant Sunset Custom Color Palette Color role balance
Complementary 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.

CVibrant Sunset Custom Color PaletteCreative brand direction ColorFly.design
Strategic palette preview

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.Prussian Blue #004e8c
HeadlineUsed for main titles and key messages.Vermilion #e94b35
LinkUsed for links and interactive text.Prussian Blue #004e8c

Buttons

Primary Button
BackgroundPrussian Blue #004e8c
TextWhite #ffffff
Secondary Button
BackgroundVermilion #e94b35
TextRaisin Black #232323
Outlined Button
BackgroundPrussian Blue #004e8c
TextPrussian Blue #004e8c

Interface

TextDefault readable body text.Raisin Black #232323
Bg LightLight page or section background.White #ffffff
Bg DarkDark page or section background.Cultured #f0f0f0
IconSmall interface icons and marks.Blue Green #56b1c8
BorderCards, inputs, and component borders.Blue Green #56b1c8
DividerSubtle separators between content.Blue Green #56b1c8
OutlineFocus rings and emphasis outlines.Blue Green #56b1c8

Palette Colors

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

Main (Brand) Colors

The main colors combine bold blue, fiery red, and rich purple hues that create a vivid, recognizable system with strong emotional resonance.

PrimaryPrussian Blue

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

Prussian Blue brings depth and trustworthiness while grounding the palette in a strong visual anchor.

HEX#004e8c
RGB0, 78, 140
HSL207, 100, 27
CMYK100, 44, 0, 45
SecondaryVermilion

RolesBtn Secondary Bg, Headline

Vermilion adds energetic warmth and passion, making secondary elements stand out with vibrance.

HEX#e94b35
RGB233, 75, 53
HSL7, 80, 56
CMYK0, 68, 77, 9
TertiaryImperial Purple

Imperial Purple offers a rich, elegant accent that complements the primary colors and enhances visual interest.

HEX#5b287a
RGB91, 40, 122
HSL277, 51, 32
CMYK25, 67, 0, 52

Support Colors

Support colors extend the palette with a lighter turquoise and muted indigo to soften the main colors and maintain harmony without competing for attention.

Blue Green

RolesIcon, Border, Divider, Outline

Blue Green brightens the palette subtly, balancing the heavier main hues with refreshing vibrancy.

HEX#56b1c8
RGB86, 177, 200
HSL192, 51, 56
CMYK57, 12, 0, 22
Indigo

Indigo deepens the palette with a muted tone that harmonizes particularly with the Imperial Purple, offering structural support.

HEX#3c2a58
RGB60, 42, 88
HSL263, 35, 25
CMYK32, 52, 0, 65

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#ffffff
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Cultured

RolesBg Dark

HEX#f0f0f0
RGB240, 240, 240
HSL0, 0, 94
CMYK0, 0, 0, 6
Raisin Black

RolesText, Btn Secondary Text

HEX#232323
RGB35, 35, 35
HSL0, 0, 14
CMYK0, 0, 0, 86

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-prussian-blue: #004e8c;
  --color-vermilion: #e94b35;
  --color-imperial-purple: #5b287a;
  --color-blue-green: #56b1c8;
  --color-indigo: #3c2a58;
  --color-white: #ffffff;
  --color-cultured: #f0f0f0;
  --color-raisin-black: #232323;
}

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: #004e8c;
  --role-link: #004e8c;
  --role-btn-primary-bg: #004e8c;
  --role-btn-outlined-border: #004e8c;
  --role-btn-outlined-text: #004e8c;
  --role-btn-secondary-bg: #e94b35;
  --role-headline: #e94b35;
  --role-icon: #56b1c8;
  --role-border: #56b1c8;
  --role-divider: #56b1c8;
  --role-outline: #56b1c8;
  --role-bg-light: #ffffff;
  --role-btn-primary-text: #ffffff;
  --role-bg-dark: #f0f0f0;
  --role-text: #232323;
  --role-btn-secondary-text: #232323;
}

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.
{
    "prussian-blue": "#004e8c",
    "vermilion": "#e94b35",
    "imperial-purple": "#5b287a",
    "blue-green": "#56b1c8",
    "indigo": "#3c2a58",
    "white": "#ffffff",
    "cultured": "#f0f0f0",
    "raisin-black": "#232323"
}
Press Space to load new palette