Magenta#AE2C6F
Amethyst#6D3A89
Royal Blue#2C4B7F
Pale Plum#C084B7
Lavender Gray#A5B1D1
Palette direction

Sunset Mountain Creative Color Palette

This palette draws from the vibrant sunset tones and the cool mountain hues in the image, creating a balanced yet striking color system. The main colors capture the warm pinks and purples of the sunset alongside the deep blues of the mountain shadows, while the support colors complement these with softer shades that maintain harmony. The neutrals anchor the palette for strong readability and versatility across digital interfaces and branding.

CustomCreativesunsetmountainpurpleblue
palette-preview.example
Creative color direction

Sunset Mountain Creative Color Palette

This palette draws from the vibrant sunset tones and the cool mountain hues in the image, creating a balanced yet striking color system. The main colors capture the warm pinks and purples of the sunset alongside the deep blues of the mountain shadows, while the support colors complement these with softer shades that maintain harmony. The neutrals anchor the palette for strong readability and versatility across digital interfaces and branding.

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 #F9F8F6on Royal Blue #2C4B7F8.2:1 Excellent
Logo Charcoal #2E2E2Eon Ivory #F9F8F612.8:1 Excellent
Logo Charcoal #2E2E2Eon Lavender Gray #A5B1D16.3:1 Strong
Logo Charcoal #2E2E2Eon Pale Plum #C084B74.7:1 Strong
Icon color
BackgroundMagenta#AE2C6FTextIvory#F9F8F6
Primary Button5.84:1
AA

Best for the main action users should notice first.

BackgroundAmethyst#6D3A89TextIvory#F9F8F6
Secondary Button7.56:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#F9F8F6TextRoyal Blue#2C4B7F
Outlined Button8.18:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F9F8F6TextMagenta#AE2C6F
Text Button5.84:1
AA

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

Palette composition8 colorsCustom color relationship
9:41Sunset Mountain Creative 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 Mountain Creative Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine warm pinks and purples with deep blue, reflecting the natural progression of sunset hues and mountain shadows for a cohesive visual experience.

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.Magenta #AE2C6F
HeadlineUsed for main titles and key messages.Amethyst #6D3A89
LinkUsed for links and interactive text.Magenta #AE2C6F

Buttons

Primary Button
BackgroundMagenta #AE2C6F
TextIvory #F9F8F6
Secondary Button
BackgroundAmethyst #6D3A89
TextIvory #F9F8F6
Outlined Button
BackgroundRoyal Blue #2C4B7F
TextRoyal Blue #2C4B7F

Interface

TextDefault readable body text.Charcoal #2E2E2E
Bg LightLight page or section background.Ivory #F9F8F6
Bg DarkDark page or section background.Slate #3F3F3F
IconSmall interface icons and marks.Pale Plum #C084B7
BorderCards, inputs, and component borders.Pale Plum #C084B7
DividerSubtle separators between content.Pale Plum #C084B7
OutlineFocus rings and emphasis outlines.Pale Plum #C084B7

Palette Colors

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

Main (Brand) Colors

The main colors combine warm pinks and purples with deep blue, reflecting the natural progression of sunset hues and mountain shadows for a cohesive visual experience.

PrimaryMagenta

RolesLogo, Link, Btn Primary Bg

Rich magenta evokes passion and creativity, capturing the intense sunset glow at the mountain peaks.

HEX#AE2C6F
RGB174, 44, 111
HSL329, 60, 43
CMYK0, 75, 36, 32
SecondaryAmethyst

RolesBtn Secondary Bg, Headline

Amethyst offers a sophisticated purple tone that adds depth and balance to the energetic magenta.

HEX#6D3A89
RGB109, 58, 137
HSL279, 41, 38
CMYK20, 58, 0, 46
TertiaryRoyal Blue

RolesBtn Outlined Border, Btn Outlined Text

Royal Blue mirrors the cool mountain shadows, providing a calming contrast and structural stability to the palette.

HEX#2C4B7F
RGB44, 75, 127
HSL218, 49, 34
CMYK65, 41, 0, 50

Support Colors

The support colors provide a muted, pastel extension of the main palette, softening the overall look while maintaining harmony and usability in UI elements.

Pale Plum

RolesIcon, Border, Divider, Outline

Pale Plum is a soft, muted purple that complements the main colors without overwhelming, ideal for subtle UI detailing.

HEX#C084B7
RGB192, 132, 183
HSL309, 32, 64
CMYK0, 31, 5, 25
Lavender Gray

Lavender Gray adds a gentle cool tone that balances the warmth while enhancing the overall sophistication of the palette.

HEX#A5B1D1
RGB165, 177, 209
HSL224, 32, 73
CMYK21, 15, 0, 18

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F9F8F6
RGB249, 248, 246
HSL40, 20, 97
CMYK0, 0, 1, 2
Charcoal

RolesText

HEX#2E2E2E
RGB46, 46, 46
HSL0, 0, 18
CMYK0, 0, 0, 82
Slate

RolesBg Dark

HEX#3F3F3F
RGB63, 63, 63
HSL0, 0, 25
CMYK0, 0, 0, 75

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-magenta: #AE2C6F;
  --color-amethyst: #6D3A89;
  --color-royal-blue: #2C4B7F;
  --color-pale-plum: #C084B7;
  --color-lavender-gray: #A5B1D1;
  --color-ivory: #F9F8F6;
  --color-charcoal: #2E2E2E;
  --color-slate: #3F3F3F;
}

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: #AE2C6F;
  --role-link: #AE2C6F;
  --role-btn-primary-bg: #AE2C6F;
  --role-btn-secondary-bg: #6D3A89;
  --role-headline: #6D3A89;
  --role-btn-outlined-border: #2C4B7F;
  --role-btn-outlined-text: #2C4B7F;
  --role-icon: #C084B7;
  --role-border: #C084B7;
  --role-divider: #C084B7;
  --role-outline: #C084B7;
  --role-bg-light: #F9F8F6;
  --role-btn-primary-text: #F9F8F6;
  --role-btn-secondary-text: #F9F8F6;
  --role-text: #2E2E2E;
  --role-bg-dark: #3F3F3F;
}

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.
{
    "magenta": "#AE2C6F",
    "amethyst": "#6D3A89",
    "royal-blue": "#2C4B7F",
    "pale-plum": "#C084B7",
    "lavender-gray": "#A5B1D1",
    "ivory": "#F9F8F6",
    "charcoal": "#2E2E2E",
    "slate": "#3F3F3F"
}
Press Space to load new palette