Plum#5B214A
Goldenrod#D4A72C
Olive#75855C
Rose Dust#B48E94
Muted Brown#6A4F3D
Palette direction

Plum Gold Cozy Color Palette

This palette channels the warm, rich, and inviting atmosphere of the image with deep plums, golden yellows, and complementary muted greens, balanced by soft neutrals for versatility and readability. It captures the nighttime hospitality feel with cozy and sophisticated contrasts.

CustomHospitality Eventsplumgoldcozywarm
palette-preview.example
Hospitality Events color direction

Plum Gold Cozy Color Palette

This palette channels the warm, rich, and inviting atmosphere of the image with deep plums, golden yellows, and complementary muted greens, balanced by soft neutrals for versatility and readability. It captures the nighttime hospitality feel with cozy and sophisticated contrasts.

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 Plum #5B214A11.9:1 Excellent
Logo Charcoal #2E2E2Eon Goldenrod #D4A72C6.1:1 Strong
Logo Charcoal #2E2E2Eon Pure White #FFFFFF13.6:1 Excellent
Logo Charcoal #2E2E2Eon Rose Dust #B48E944.7:1 Strong
Icon color
BackgroundPlum#5B214ATextPure White#FFFFFF
Primary Button11.92:1
AAA

Best for the main action users should notice first.

BackgroundGoldenrod#D4A72CTextCharcoal#2E2E2E
Secondary Button6.05:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextOlive#75855C
Outlined Button3.99:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextPlum#5B214A
Text Button11.92:1
AAA

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

Palette composition8 colorsCustom color relationship
9:41Plum Gold Cozy 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.

CPlum Gold Cozy Color PaletteHospitality Events brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a rich Plum as the primary brand foundation with a warm Goldenrod and a muted Olive as complementary accents to create a balanced, cozy, and elegant palette.

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.Plum #5B214A
HeadlineUsed for main titles and key messages.Goldenrod #D4A72C
LinkUsed for links and interactive text.Plum #5B214A

Buttons

Primary Button
BackgroundPlum #5B214A
TextPure White #FFFFFF
Secondary Button
BackgroundGoldenrod #D4A72C
TextCharcoal #2E2E2E
Outlined Button
BackgroundOlive #75855C
TextOlive #75855C

Interface

TextDefault readable body text.Charcoal #2E2E2E
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ivory #F2EFEA
IconSmall interface icons and marks.Rose Dust #B48E94
BorderCards, inputs, and component borders.Rose Dust #B48E94
DividerSubtle separators between content.Rose Dust #B48E94
OutlineFocus rings and emphasis outlines.Rose Dust #B48E94

Palette Colors

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

Main (Brand) Colors

The main colors combine a rich Plum as the primary brand foundation with a warm Goldenrod and a muted Olive as complementary accents to create a balanced, cozy, and elegant palette.

PrimaryPlum

RolesLogo, Link, Btn Primary Bg

Plum provides a deep, elegant foundation that feels luxurious and comforting, anchoring the palette.

HEX#5B214A
RGB91, 33, 74
HSL318, 47, 24
CMYK0, 64, 19, 64
SecondaryGoldenrod

RolesBtn Secondary Bg, Headline

Goldenrod adds warmth and vibrancy that conveys friendliness and hospitality, contrasting well with Plum.

HEX#D4A72C
RGB212, 167, 44
HSL44, 66, 50
CMYK0, 21, 79, 17
TertiaryOlive

RolesBtn Outlined Border, Btn Outlined Text

Olive introduces a natural muted green that balances the richness of Plum and the brightness of Goldenrod, providing subtle harmony.

HEX#75855C
RGB117, 133, 92
HSL83, 18, 44
CMYK12, 0, 31, 48

Support Colors

The accent colors extend the main palette with gentle rose and muted brown tones, enhancing warmth and depth without overpowering the main colors.

Rose Dust

RolesIcon, Border, Divider, Outline

Rose Dust offers a soft, muted pinkish tone that gently supports Plum without competing for attention.

HEX#B48E94
RGB180, 142, 148
HSL351, 20, 63
CMYK0, 21, 18, 29
Muted Brown

Muted Brown adds grounded earthy undertones that complement both warm and cool colors, reinforcing the cozy feel.

HEX#6A4F3D
RGB106, 79, 61
HSL24, 27, 33
CMYK0, 25, 42, 58

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#F2EFEA
RGB242, 239, 234
HSL38, 24, 93
CMYK0, 1, 3, 5
Charcoal

RolesText, Btn Secondary Text

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

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-plum: #5B214A;
  --color-goldenrod: #D4A72C;
  --color-olive: #75855C;
  --color-rose-dust: #B48E94;
  --color-muted-brown: #6A4F3D;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F2EFEA;
  --color-charcoal: #2E2E2E;
}

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: #5B214A;
  --role-link: #5B214A;
  --role-btn-primary-bg: #5B214A;
  --role-btn-secondary-bg: #D4A72C;
  --role-headline: #D4A72C;
  --role-btn-outlined-border: #75855C;
  --role-btn-outlined-text: #75855C;
  --role-icon: #B48E94;
  --role-border: #B48E94;
  --role-divider: #B48E94;
  --role-outline: #B48E94;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F2EFEA;
  --role-text: #2E2E2E;
  --role-btn-secondary-text: #2E2E2E;
}

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.
{
    "plum": "#5B214A",
    "goldenrod": "#D4A72C",
    "olive": "#75855C",
    "rose-dust": "#B48E94",
    "muted-brown": "#6A4F3D",
    "pure-white": "#FFFFFF",
    "ivory": "#F2EFEA",
    "charcoal": "#2E2E2E"
}
Press Space to load new palette