Crimson#F12543
Royal Blue#4269BA
Warm Mustard#F2E366
Sage Green#A4D9A9
Soft Rose#F3B7C3
Palette direction

Vibrant Harmony Creative Color Palette

This color palette is inspired by the vibrant and diverse hues from the image, combining bold and energetic main colors with softer support hues and balanced neutrals for a dynamic yet harmonious brand identity.

Split ComplementaryCreativevibrantenergeticcreativeharmonious
palette-preview.example
Creative color direction

Vibrant Harmony Creative Color Palette

This color palette is inspired by the vibrant and diverse hues from the image, combining bold and energetic main colors with softer support hues and balanced neutrals for a dynamic yet harmonious brand identity.

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 Charcoal #2A2A2Aon Warm Mustard #F2E36610.9:1 Excellent
Logo Pure White #FFFFFFon Royal Blue #4269BA5.3:1 Strong
Logo Charcoal #2A2A2Aon Pure White #FFFFFF14.4:1 Excellent
Logo Pure White #FFFFFFon Charcoal #2A2A2A14.4:1 Excellent
Icon color
BackgroundCrimson#F12543TextPure White#FFFFFF
Primary Button4.13:1
Large text

Best for the main action users should notice first.

BackgroundRoyal Blue#4269BATextPure White#FFFFFF
Secondary Button5.30:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextWarm Mustard#F2E366
Outlined Button1.32:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCrimson#F12543
Text Button4.13:1
Large text

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

Palette composition8 colorsSplit Complementary color relationship
9:41Vibrant Harmony Creative Color Palette Color role balance
Split 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 Harmony Creative Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine vivid complementary and analogous hues to create a lively, memorable palette that conveys creativity and energy while maintaining balance.

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 #F12543
HeadlineUsed for main titles and key messages.Royal Blue #4269BA
LinkUsed for links and interactive text.Crimson #F12543

Buttons

Primary Button
BackgroundCrimson #F12543
TextPure White #FFFFFF
Secondary Button
BackgroundRoyal Blue #4269BA
TextPure White #FFFFFF
Outlined Button
BackgroundWarm Mustard #F2E366
TextWarm Mustard #F2E366

Interface

TextDefault readable body text.Charcoal #2A2A2A
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Charcoal #2A2A2A
IconSmall interface icons and marks.Sage Green #A4D9A9
BorderCards, inputs, and component borders.Sage Green #A4D9A9
DividerSubtle separators between content.Sage Green #A4D9A9
OutlineFocus rings and emphasis outlines.Sage Green #A4D9A9

Palette Colors

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

Main (Brand) Colors

The main colors combine vivid complementary and analogous hues to create a lively, memorable palette that conveys creativity and energy while maintaining balance.

PrimaryCrimson

RolesLogo, Btn Primary Bg, Link

Crimson brings strong energy and passion, making it an assertive choice for brand recognition and key interactive elements.

HEX#F12543
RGB241, 37, 67
HSL351, 88, 55
CMYK0, 85, 72, 5
SecondaryRoyal Blue

RolesBtn Secondary Bg, Headline

Royal Blue adds a trustworthy and calm quality that balances the vibrancy of crimson and anchors the palette.

HEX#4269BA
RGB66, 105, 186
HSL221, 48, 49
CMYK65, 44, 0, 27
TertiaryWarm Mustard

RolesBtn Outlined Border, Btn Outlined Text

Warm Mustard enhances the palette with a bright accent that complements both red and blue, improving visual interest and interaction cues.

HEX#F2E366
RGB242, 227, 102
HSL54, 84, 67
CMYK0, 6, 58, 5

Support Colors

The support colors provide softer, muted tones that extend the palette without overpowering the vivid main colors, ensuring versatile application across UI and branding.

Sage Green

RolesIcon, Border, Divider, Outline

Sage Green offers a gentle, natural feel that complements the energetic main colors by providing visual rest and balance.

HEX#A4D9A9
RGB164, 217, 169
HSL126, 41, 75
CMYK24, 0, 22, 15
Soft Rose

Soft Rose brings subtle warmth and softness, harmonizing with crimson and mustard while supporting the overall palette's friendliness.

HEX#F3B7C3
RGB243, 183, 195
HSL348, 71, 84
CMYK0, 25, 20, 5

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F9F6F5
RGB249, 246, 245
HSL15, 25, 97
CMYK0, 1, 2, 2
Charcoal

RolesBg Dark, Text

HEX#2A2A2A
RGB42, 42, 42
HSL0, 0, 16
CMYK0, 0, 0, 84

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: #F12543;
  --color-royal-blue: #4269BA;
  --color-warm-mustard: #F2E366;
  --color-sage-green: #A4D9A9;
  --color-soft-rose: #F3B7C3;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F9F6F5;
  --color-charcoal: #2A2A2A;
}

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: #F12543;
  --role-btn-primary-bg: #F12543;
  --role-link: #F12543;
  --role-btn-secondary-bg: #4269BA;
  --role-headline: #4269BA;
  --role-btn-outlined-border: #F2E366;
  --role-btn-outlined-text: #F2E366;
  --role-icon: #A4D9A9;
  --role-border: #A4D9A9;
  --role-divider: #A4D9A9;
  --role-outline: #A4D9A9;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #2A2A2A;
  --role-text: #2A2A2A;
}

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": "#F12543",
    "royal-blue": "#4269BA",
    "warm-mustard": "#F2E366",
    "sage-green": "#A4D9A9",
    "soft-rose": "#F3B7C3",
    "pure-white": "#FFFFFF",
    "ivory": "#F9F6F5",
    "charcoal": "#2A2A2A"
}
Press Space to load new palette