Azure#255A9A
Sky Blue#4F7FB8
Sand#D8C39A
Sea Mist#7A8F9B
Sage#5C6F62
Palette direction

Coastal Sky Sand Color Palette

This palette translates the image’s open sky, calm sea, and sun-warmed sand into a clean coastal system with enough contrast for interfaces and branding. The blues and sand work together as a recognizable shoreline story that feels steady, airy, and practical.

ComplementaryNonecoastalskysandsea
palette-preview.example
None color direction

Coastal Sky Sand Color Palette

This palette translates the image’s open sky, calm sea, and sun-warmed sand into a clean coastal system with enough contrast for interfaces and branding. The blues and sand work together as a recognizable shoreline story that feels steady, airy, and 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 Charcoal #1F2328on Sand #D8C39A9.2:1 Excellent
Logo White #FFFFFFon Azure #255A9A7.0:1 Strong
Logo Charcoal #1F2328on White #FFFFFF15.8:1 Excellent
Logo White #FFFFFFon Sage #5C6F625.4:1 Strong
Icon color
BackgroundAzure#255A9ATextWhite#FFFFFF
Primary Button6.98:1
AA

Best for the main action users should notice first.

BackgroundSky Blue#4F7FB8TextWhite#FFFFFF
Secondary Button4.15:1
Large text

Useful for softer choices and secondary paths.

BackgroundIvory#F5F1E8TextSand#D8C39A
Outlined Button1.53:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F5F1E8TextSky Blue#4F7FB8
Text Button3.68:1
Large text

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

Palette composition8 colorsComplementary color relationship
9:41Coastal Sky Sand 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.

CCoastal Sky Sand Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors follow the image’s natural gradient from deep sky to ocean blue to sunlit sand, creating a familiar shoreline progression. Together they deliver a calm but distinctive system that feels stable, open, and easy to use across brand and product touchpoints.

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.Azure #255A9A
HeadlineUsed for main titles and key messages.Sky Blue #4F7FB8
LinkUsed for links and interactive text.Sky Blue #4F7FB8

Buttons

Primary Button
BackgroundAzure #255A9A
TextWhite #FFFFFF
Secondary Button
BackgroundSky Blue #4F7FB8
TextWhite #FFFFFF
Outlined Button
BackgroundSand #D8C39A
TextSand #D8C39A

Interface

TextDefault readable body text.Charcoal #1F2328
Bg LightLight page or section background.Ivory #F5F1E8
Bg DarkDark page or section background.Charcoal #1F2328
IconSmall interface icons and marks.Sea Mist #7A8F9B
BorderCards, inputs, and component borders.Sea Mist #7A8F9B
DividerSubtle separators between content.Sage #5C6F62
OutlineFocus rings and emphasis outlines.Sage #5C6F62

Palette Colors

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

Main (Brand) Colors

The main colors follow the image’s natural gradient from deep sky to ocean blue to sunlit sand, creating a familiar shoreline progression. Together they deliver a calm but distinctive system that feels stable, open, and easy to use across brand and product touchpoints.

PrimaryAzure

RolesLogo, Btn Primary Bg

Azure anchors the system with a confident maritime tone that reads clearly in logos and primary actions.

HEX#255A9A
RGB37, 90, 154
HSL213, 61, 37
CMYK76, 42, 0, 40
PrimarySky Blue

RolesLink, Headline, Btn Secondary Bg

Sky Blue adds lighter energy and supports navigation and emphasis without overpowering the palette.

HEX#4F7FB8
RGB79, 127, 184
HSL213, 43, 52
CMYK57, 31, 0, 28
SecondarySand

RolesBtn Outlined Border, Btn Outlined Text

Sand brings the shoreline warmth from the image and gives outlined elements a soft, approachable presence.

HEX#D8C39A
RGB216, 195, 154
HSL40, 44, 73
CMYK0, 10, 29, 15

Support Colors

The support colors extend the coastal palette with restrained environmental tones that balance the strong blues and keep the system grounded. They stay subdued so the shoreline story remains dominant while interface hierarchy gains depth and clarity.

Sea Mist

RolesIcon, Border

Sea Mist softens UI edges and adds a cool transitional tone that sits comfortably between water and sky.

HEX#7A8F9B
RGB122, 143, 155
HSL202, 14, 54
CMYK21, 8, 0, 39
Sage

RolesDivider, Outline

Sage introduces a muted natural counterpoint that steadies the brighter blues and helps subtle components recede.

HEX#5C6F62
RGB92, 111, 98
HSL139, 9, 40
CMYK17, 0, 12, 56

Neutral Colors

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

White

RolesBtn Primary Text, Btn Secondary Text

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

RolesBg Light

HEX#F5F1E8
RGB245, 241, 232
HSL42, 39, 94
CMYK0, 2, 5, 4
Charcoal

RolesBg Dark, Text

HEX#1F2328
RGB31, 35, 40
HSL213, 13, 14
CMYK23, 13, 0, 84

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-azure: #255A9A;
  --color-sky-blue: #4F7FB8;
  --color-sand: #D8C39A;
  --color-sea-mist: #7A8F9B;
  --color-sage: #5C6F62;
  --color-white: #FFFFFF;
  --color-ivory: #F5F1E8;
  --color-charcoal: #1F2328;
}

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: #255A9A;
  --role-btn-primary-bg: #255A9A;
  --role-link: #4F7FB8;
  --role-headline: #4F7FB8;
  --role-btn-secondary-bg: #4F7FB8;
  --role-btn-outlined-border: #D8C39A;
  --role-btn-outlined-text: #D8C39A;
  --role-icon: #7A8F9B;
  --role-border: #7A8F9B;
  --role-divider: #5C6F62;
  --role-outline: #5C6F62;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-light: #F5F1E8;
  --role-bg-dark: #1F2328;
  --role-text: #1F2328;
}

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.
{
    "azure": "#255A9A",
    "sky-blue": "#4F7FB8",
    "sand": "#D8C39A",
    "sea-mist": "#7A8F9B",
    "sage": "#5C6F62",
    "white": "#FFFFFF",
    "ivory": "#F5F1E8",
    "charcoal": "#1F2328"
}
Press Space to load new palette