Royal Blue#2A3D9A
Coral Orange#EA6A47
Deep Lavender#6B3F8F
Muted Lavender#8C7AA9
Soft Apricot#F6A983
Palette direction

Sunset Sky Vivid Color Palette

This palette draws from the rich, vivid sunset hues and contrasting deep blues of the sky, creating a dynamic yet harmonious system. The main colors capture the dramatic and emotional essence of the colorful sky, with support colors reflecting the softer midtones to balance intensity, and neutrals providing the necessary grounding for text and backgrounds.

CustomCreativesunsetskyvividblue
palette-preview.example
Creative color direction

Sunset Sky Vivid Color Palette

This palette draws from the rich, vivid sunset hues and contrasting deep blues of the sky, creating a dynamic yet harmonious system. The main colors capture the dramatic and emotional essence of the colorful sky, with support colors reflecting the softer midtones to balance intensity, and neutrals providing the necessary grounding for text and backgrounds.

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 Ivory White #FCFCFCon Royal Blue #2A3D9A9.2:1 Excellent
Logo Charcoal #1C1C1Con Coral Orange #EA6A475.4:1 Strong
Logo Charcoal #1C1C1Con Ivory White #FCFCFC16.6:1 Excellent
Logo Charcoal #1C1C1Con Light Gray #E4E4E413.4:1 Excellent
Icon color
BackgroundRoyal Blue#2A3D9ATextIvory White#FCFCFC
Primary Button9.17:1
AAA

Best for the main action users should notice first.

BackgroundCoral Orange#EA6A47TextCharcoal#1C1C1C
Secondary Button5.40:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory White#FCFCFCTextRoyal Blue#2A3D9A
Outlined Button9.17:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory White#FCFCFCTextRoyal Blue#2A3D9A
Text Button9.17:1
AAA

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

Palette composition8 colorsCustom color relationship
9:41Sunset Sky Vivid 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.

CSunset Sky Vivid Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors create a bold and recognizable triadic harmony by combining deep blue with vibrant orange and a rich purple, evoking the energy and drama of a sunset sky.

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.Royal Blue #2A3D9A
HeadlineUsed for main titles and key messages.Royal Blue #2A3D9A
LinkUsed for links and interactive text.Royal Blue #2A3D9A

Buttons

Primary Button
BackgroundRoyal Blue #2A3D9A
TextIvory White #FCFCFC
Secondary Button
BackgroundCoral Orange #EA6A47
TextCharcoal #1C1C1C
Outlined Button
BackgroundRoyal Blue #2A3D9A
TextRoyal Blue #2A3D9A

Interface

TextDefault readable body text.Charcoal #1C1C1C
Bg LightLight page or section background.Ivory White #FCFCFC
Bg DarkDark page or section background.Light Gray #E4E4E4
IconSmall interface icons and marks.Muted Lavender #8C7AA9
BorderCards, inputs, and component borders.Muted Lavender #8C7AA9
DividerSubtle separators between content.Muted Lavender #8C7AA9
OutlineFocus rings and emphasis outlines.Muted Lavender #8C7AA9

Palette Colors

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

Main (Brand) Colors

The main colors create a bold and recognizable triadic harmony by combining deep blue with vibrant orange and a rich purple, evoking the energy and drama of a sunset sky.

PrimaryRoyal Blue

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

Royal Blue brings a strong, trustworthy presence that represents calm and reliability.

HEX#2A3D9A
RGB42, 61, 154
HSL230, 57, 38
CMYK73, 60, 0, 40
SecondaryCoral Orange

RolesBtn Secondary Bg

Coral Orange adds warmth and energetic vibrancy, stimulating attention without overwhelming.

HEX#EA6A47
RGB234, 106, 71
HSL13, 80, 60
CMYK0, 55, 70, 8
TertiaryDeep Lavender

Deep Lavender offers a sophisticated depth and emotional balance between the blue and orange hues.

HEX#6B3F8F
RGB107, 63, 143
HSL273, 39, 40
CMYK25, 56, 0, 44

Support Colors

The support colors extend the main palette with softer, harmonious tones that echo the sky’s natural gradient, balancing vibrancy with subtlety.

Muted Lavender

RolesIcon, Border, Divider, Outline

Muted Lavender supports the palette with a gentle tone that complements Deep Lavender and softens the overall palette.

HEX#8C7AA9
RGB140, 122, 169
HSL263, 21, 57
CMYK17, 28, 0, 34
Soft Apricot

Soft Apricot offers a lighter, more subdued warmth that balances the intensity of Coral Orange while maintaining a cohesive look.

HEX#F6A983
RGB246, 169, 131
HSL20, 86, 74
CMYK0, 31, 47, 4

Neutral Colors

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

Ivory White

RolesBg Light, Btn Primary Text

HEX#FCFCFC
RGB252, 252, 252
HSL0, 0, 99
CMYK0, 0, 0, 1
Light Gray

RolesBg Dark

HEX#E4E4E4
RGB228, 228, 228
HSL0, 0, 89
CMYK0, 0, 0, 11
Charcoal

RolesText, Btn Secondary Text

HEX#1C1C1C
RGB28, 28, 28
HSL0, 0, 11
CMYK0, 0, 0, 89

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-royal-blue: #2A3D9A;
  --color-coral-orange: #EA6A47;
  --color-deep-lavender: #6B3F8F;
  --color-muted-lavender: #8C7AA9;
  --color-soft-apricot: #F6A983;
  --color-ivory-white: #FCFCFC;
  --color-light-gray: #E4E4E4;
  --color-charcoal: #1C1C1C;
}

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: #2A3D9A;
  --role-link: #2A3D9A;
  --role-btn-primary-bg: #2A3D9A;
  --role-btn-outlined-border: #2A3D9A;
  --role-btn-outlined-text: #2A3D9A;
  --role-headline: #2A3D9A;
  --role-btn-secondary-bg: #EA6A47;
  --role-icon: #8C7AA9;
  --role-border: #8C7AA9;
  --role-divider: #8C7AA9;
  --role-outline: #8C7AA9;
  --role-bg-light: #FCFCFC;
  --role-btn-primary-text: #FCFCFC;
  --role-bg-dark: #E4E4E4;
  --role-text: #1C1C1C;
  --role-btn-secondary-text: #1C1C1C;
}

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.
{
    "royal-blue": "#2A3D9A",
    "coral-orange": "#EA6A47",
    "deep-lavender": "#6B3F8F",
    "muted-lavender": "#8C7AA9",
    "soft-apricot": "#F6A983",
    "ivory-white": "#FCFCFC",
    "light-gray": "#E4E4E4",
    "charcoal": "#1C1C1C"
}
Press Space to load new palette