Cornflower Blue#6495ED
Sandy Brown#F4A460
Golden Rod#DAA520
Light Steel Blue#B0C4DE
Tan#D2B48C
Palette direction

Cornflower Blue Sandy Color Palette

This color palette draws inspiration from the image's vibrant blue sky and the warm, soft hues of the cloud. The deep Cornflower Blue anchors the brand with a friendly and trustworthy vibe, while the warm Sandy Brown captures the cloud's inviting warmth. The rich Golden Rod adds an element of optimism and hope, balancing perfectly with the cooler tones. Soft Silver and Pale Ivory neutrals provide a clean, fresh backdrop to enhance readability and support the color narrative without overpowering the main colors.

ComplementaryCreativebluesandy browngolden rodsky
palette-preview.example
Creative color direction

Cornflower Blue Sandy Color Palette

This color palette draws inspiration from the image's vibrant blue sky and the warm, soft hues of the cloud. The deep Cornflower Blue anchors the brand with a friendly and trustworthy vibe, while the warm Sandy Brown captures the cloud's inviting warmth. The rich Golden Rod adds an element of optimism and hope, balancing perfectly with the cooler tones. Soft Silver and Pale Ivory neutrals provide a clean, fresh backdrop to enhance readability and support the color narrative without overpowering the main colors.

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 Dark Slate Gray #2F4F4Fon White #FFFFFF8.9:1 Excellent
Logo White #FFFFFFon Dark Slate Gray #2F4F4F8.9:1 Excellent
Logo Dark Slate Gray #2F4F4Fon Light Steel Blue #B0C4DE5.0:1 Strong
Logo Dark Slate Gray #2F4F4Fon Tan #D2B48C4.5:1 Strong
Icon color
BackgroundCornflower Blue#6495EDTextDark Slate Gray#2F4F4F
Primary Button3.00:1
Large text

Best for the main action users should notice first.

BackgroundSandy Brown#F4A460TextDark Slate Gray#2F4F4F
Secondary Button4.39:1
Large text

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSandy Brown#F4A460
Outlined Button2.03:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCornflower Blue#6495ED
Text Button2.97:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Cornflower Blue Sandy 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.

CCornflower Blue Sandy Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The triadic combination of Cornflower Blue, Sandy Brown, and Golden Rod provides a balanced, lively, and visually dynamic brand palette that captures sky brightness and warmth.

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.Cornflower Blue #6495ED
HeadlineUsed for main titles and key messages.Cornflower Blue #6495ED
LinkUsed for links and interactive text.Cornflower Blue #6495ED

Buttons

Primary Button
BackgroundCornflower Blue #6495ED
TextDark Slate Gray #2F4F4F
Secondary Button
BackgroundSandy Brown #F4A460
TextDark Slate Gray #2F4F4F
Outlined Button
BackgroundSandy Brown #F4A460
TextSandy Brown #F4A460

Interface

TextDefault readable body text.Dark Slate Gray #2F4F4F
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ghost White #F8F8FF
IconSmall interface icons and marks.Light Steel Blue #B0C4DE
BorderCards, inputs, and component borders.Light Steel Blue #B0C4DE
DividerSubtle separators between content.Light Steel Blue #B0C4DE
OutlineFocus rings and emphasis outlines.Light Steel Blue #B0C4DE

Palette Colors

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

Main (Brand) Colors

The triadic combination of Cornflower Blue, Sandy Brown, and Golden Rod provides a balanced, lively, and visually dynamic brand palette that captures sky brightness and warmth.

PrimaryCornflower Blue

RolesLogo, Link, Btn Primary Bg, Headline

Cornflower Blue brings trust and friendliness, establishing brand recognition with a fresh and engaging presence.

HEX#6495ED
RGB100, 149, 237
HSL219, 79, 66
CMYK58, 37, 0, 7
SecondarySandy Brown

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Sandy Brown adds warmth and approachability, creating contrast and balance with the cooler blues.

HEX#F4A460
RGB244, 164, 96
HSL28, 87, 67
CMYK0, 33, 61, 4
TertiaryGolden Rod

Golden Rod injects optimism and energy, complementing the palette with a bright and hopeful accent.

HEX#DAA520
RGB218, 165, 32
HSL43, 74, 49
CMYK0, 24, 85, 15

Support Colors

These support colors gently extend the palette with subdued natural hues echoing cloud softness and sky shadows, reinforcing the primary colors without stealing focus.

Light Steel Blue

RolesIcon, Border, Divider, Outline

Light Steel Blue supports the main blue with a softer tone, ideal for subtle interface elements.

HEX#B0C4DE
RGB176, 196, 222
HSL214, 41, 78
CMYK21, 12, 0, 13
Tan

Tan gently complements Sandy Brown by adding a muted earthy note, useful for backgrounds or secondary headlines.

HEX#D2B48C
RGB210, 180, 140
HSL34, 44, 69
CMYK0, 14, 33, 18

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ghost White

RolesBg Dark

HEX#F8F8FF
RGB248, 248, 255
HSL240, 100, 99
CMYK3, 3, 0, 0
Dark Slate Gray

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2F4F4F
RGB47, 79, 79
HSL180, 25, 25
CMYK41, 0, 0, 69

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-cornflower-blue: #6495ED;
  --color-sandy-brown: #F4A460;
  --color-golden-rod: #DAA520;
  --color-light-steel-blue: #B0C4DE;
  --color-tan: #D2B48C;
  --color-white: #FFFFFF;
  --color-ghost-white: #F8F8FF;
  --color-dark-slate-gray: #2F4F4F;
}

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: #6495ED;
  --role-link: #6495ED;
  --role-btn-primary-bg: #6495ED;
  --role-headline: #6495ED;
  --role-btn-secondary-bg: #F4A460;
  --role-btn-outlined-border: #F4A460;
  --role-btn-outlined-text: #F4A460;
  --role-icon: #B0C4DE;
  --role-border: #B0C4DE;
  --role-divider: #B0C4DE;
  --role-outline: #B0C4DE;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F8F8FF;
  --role-text: #2F4F4F;
  --role-btn-primary-text: #2F4F4F;
  --role-btn-secondary-text: #2F4F4F;
}

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.
{
    "cornflower-blue": "#6495ED",
    "sandy-brown": "#F4A460",
    "golden-rod": "#DAA520",
    "light-steel-blue": "#B0C4DE",
    "tan": "#D2B48C",
    "white": "#FFFFFF",
    "ghost-white": "#F8F8FF",
    "dark-slate-gray": "#2F4F4F"
}
Press Space to load new palette