Golden Saffron#F4C318
Skywash Blue#75AEEF
Deep Atlantic#1F57B8
Muted Harbor#3E66A8
Washed Sky#B9D7F2
Palette direction

Sunlit Market Lifestyle Color Palette

A sunlit market-inspired palette built around warm saffron, bright sky blue, and a grounded cobalt that feels fresh, tactile, and energetic. The colors read as a cohesive brand system because the warm-cool contrast creates instant recognition while the muted support tones keep the palette practical.

ComplementaryLuxury And Lifestylesunnymarket-inspiredfreshtactile
palette-preview.example
Luxury And Lifestyle color direction

Sunlit Market Lifestyle Color Palette

A sunlit market-inspired palette built around warm saffron, bright sky blue, and a grounded cobalt that feels fresh, tactile, and energetic. The colors read as a cohesive brand system because the warm-cool contrast creates instant recognition while the muted support tones keep the palette practical.

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 Ink Black #111111on Golden Saffron #F4C31811.4:1 Excellent
Logo Ink Black #111111on Skywash Blue #75AEEF8.1:1 Excellent
Logo Pure White #FFFFFFon Deep Atlantic #1F57B86.7:1 Strong
Logo Ink Black #111111on Pure White #FFFFFF18.9:1 Excellent
Icon color
BackgroundGolden Saffron#F4C318TextInk Black#111111
Primary Button11.39:1
AAA

Best for the main action users should notice first.

BackgroundSkywash Blue#75AEEFTextInk Black#111111
Secondary Button8.14:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextWashed Sky#B9D7F2
Outlined Button1.49:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextSkywash Blue#75AEEF
Text Button2.32:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Sunlit Market Lifestyle 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.

CSunlit Market Lifestyle Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

Warm saffron and layered blues create a vivid, recognizable contrast that feels energetic without becoming chaotic. The palette works because the yellow-led warmth and blue-led coolness reinforce each other across packaging, identity, and a

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.Golden Saffron #F4C318
HeadlineUsed for main titles and key messages.Deep Atlantic #1F57B8
LinkUsed for links and interactive text.Skywash Blue #75AEEF

Buttons

Primary Button
BackgroundGolden Saffron #F4C318
TextInk Black #111111
Secondary Button
BackgroundSkywash Blue #75AEEF
TextInk Black #111111
Outlined Button
BackgroundMuted Harbor #3E66A8
TextWashed Sky #B9D7F2

Interface

TextDefault readable body text.Ink Black #111111
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ink Black #111111
IconSmall interface icons and marks.Muted Harbor #3E66A8
BorderCards, inputs, and component borders.Washed Sky #B9D7F2
DividerSubtle separators between content.Ink Black #111111
OutlineFocus rings and emphasis outlines.Shell Linen #F6F1E7

Palette Colors

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

Main (Brand) Colors

Warm saffron and layered blues create a vivid, recognizable contrast that feels energetic without becoming chaotic. The palette works because the yellow-led warmth and blue-led coolness reinforce each other across packaging, identity, and a

PrimaryGolden Saffron

RolesLogo, Btn Primary Bg

The most attention-grabbing brand note; it brings warmth, optimism, and shelf presence.

HEX#F4C318
RGB244, 195, 24
HSL47, 91, 53
CMYK0, 20, 90, 4
SecondarySkywash Blue

RolesLink, Btn Secondary Bg

A lighter, more open blue that adds clarity and digital ease against the warmer accent.

HEX#75AEEF
RGB117, 174, 239
HSL212, 79, 70
CMYK51, 27, 0, 6
TertiaryDeep Atlantic

RolesHeadline

A confident anchor that adds structure, depth, and a more premium editorial feel.

HEX#1F57B8
RGB31, 87, 184
HSL218, 71, 42
CMYK83, 53, 0, 28

Support Colors

Soft supporting hues extend the market-inspired feel without competing with the main statement colors. They add tactile balance, subtle decoration, and usable emphasis for UI and a

Muted Harbor

RolesBtn Outlined Border, Icon

A restrained blue-gray that supports structure and reduces the intensity of the brighter blues.

HEX#3E66A8
RGB62, 102, 168
HSL217, 46, 45
CMYK63, 39, 0, 34
Washed Sky

RolesBtn Outlined Text, Border

A pale airy blue that softens outlines and keeps secondary UI elements light and calm.

HEX#B9D7F2
RGB185, 215, 242
HSL208, 69, 84
CMYK24, 11, 0, 5

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Shell Linen

RolesOutline

HEX#F6F1E7
RGB246, 241, 231
HSL40, 45, 94
CMYK0, 2, 6, 4
Ink Black

RolesBg Dark, Divider, Text, Btn Primary Text, Btn Secondary Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

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-golden-saffron: #F4C318;
  --color-skywash-blue: #75AEEF;
  --color-deep-atlantic: #1F57B8;
  --color-muted-harbor: #3E66A8;
  --color-washed-sky: #B9D7F2;
  --color-pure-white: #FFFFFF;
  --color-shell-linen: #F6F1E7;
  --color-ink-black: #111111;
}

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: #F4C318;
  --role-btn-primary-bg: #F4C318;
  --role-link: #75AEEF;
  --role-btn-secondary-bg: #75AEEF;
  --role-headline: #1F57B8;
  --role-btn-outlined-border: #3E66A8;
  --role-icon: #3E66A8;
  --role-btn-outlined-text: #B9D7F2;
  --role-border: #B9D7F2;
  --role-bg-light: #FFFFFF;
  --role-outline: #F6F1E7;
  --role-bg-dark: #111111;
  --role-divider: #111111;
  --role-text: #111111;
  --role-btn-primary-text: #111111;
  --role-btn-secondary-text: #111111;
}

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.
{
    "golden-saffron": "#F4C318",
    "skywash-blue": "#75AEEF",
    "deep-atlantic": "#1F57B8",
    "muted-harbor": "#3E66A8",
    "washed-sky": "#B9D7F2",
    "pure-white": "#FFFFFF",
    "shell-linen": "#F6F1E7",
    "ink-black": "#111111"
}
Press Space to load new palette