Coral#FF6F61
Navy#003366
Sand#D6A77A
Slate Blue#A3B9C9
Light Taupe#CDB99D
Palette direction

Coral Navy Sand Color Palette

This harmonious palette combines three main colors in a triadic scheme for vibrant recognition, supported by softer accent hues for versatility, anchored by a set of clear neutrals to ensure readability and accessibility across digital interfaces.

Split ComplementaryEcommercecoralnavysandtriadic
palette-preview.example
Ecommerce color direction

Coral Navy Sand Color Palette

This harmonious palette combines three main colors in a triadic scheme for vibrant recognition, supported by softer accent hues for versatility, anchored by a set of clear neutrals to ensure readability and accessibility across digital interfaces.

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 #FFFFFFon Navy #00336612.6:1 Excellent
Logo Charcoal #222222on Sand #D6A77A7.3:1 Excellent
Logo Charcoal #222222on Coral #FF6F615.8:1 Strong
Logo Charcoal #222222on Ivory #FFFFFF15.9:1 Excellent
Icon color
BackgroundCoral#FF6F61TextCharcoal#222222
Primary Button5.83:1
AA

Best for the main action users should notice first.

BackgroundNavy#003366TextIvory#FFFFFF
Secondary Button12.61:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#FFFFFFTextCoral#FF6F61
Outlined Button2.73:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#FFFFFFTextCoral#FF6F61
Text Button2.73:1
Low

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

Palette composition8 colorsSplit Complementary color relationship
9:41Coral Navy Sand Color Palette Color role balance
Split 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.

CCoral Navy Sand Color PaletteEcommerce brand direction ColorFly.design
Strategic palette preview

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.Coral #FF6F61
HeadlineUsed for main titles and key messages.Navy #003366
LinkUsed for links and interactive text.Coral #FF6F61

Buttons

Primary Button
BackgroundCoral #FF6F61
TextCharcoal #222222
Secondary Button
BackgroundNavy #003366
TextIvory #FFFFFF
Outlined Button
BackgroundCoral #FF6F61
TextCoral #FF6F61

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.Ivory #FFFFFF
Bg DarkDark page or section background.Alabaster #F5F5F5
IconSmall interface icons and marks.Slate Blue #A3B9C9
BorderCards, inputs, and component borders.Slate Blue #A3B9C9
DividerSubtle separators between content.Slate Blue #A3B9C9
OutlineFocus rings and emphasis outlines.Slate Blue #A3B9C9

Palette Colors

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

Main (Brand) Colors

The main colors form a triadic harmony with Coral, Navy, and Sand, providing vibrancy, depth, and warmth for strong brand recognition.

PrimaryCoral

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Coral brings energetic warmth and approachability that captures attention as the brand's focal point.

HEX#FF6F61
RGB255, 111, 97
HSL5, 100, 69
CMYK0, 56, 62, 0
SecondaryNavy

RolesHeadline, Btn Secondary Bg

Navy conveys trustworthiness and professionalism, anchoring the palette with depth and clarity.

HEX#003366
RGB0, 51, 102
HSL210, 100, 20
CMYK100, 50, 0, 60
TertiarySand

Sand adds a warm, inviting earth tone that complements the vibrancy of Coral and the depth of Navy.

HEX#D6A77A
RGB214, 167, 122
HSL29, 53, 66
CMYK0, 22, 43, 16

Support Colors

Support colors extend the main palette with softened, low saturation hues that enhance usability and balance without overpowering the primary colors.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate Blue provides a muted blue-gray tone that supports Navy with subtle contrast for interface elements.

HEX#A3B9C9
RGB163, 185, 201
HSL205, 26, 71
CMYK19, 8, 0, 21
Light Taupe

Light Taupe complements Sand with a gentle, neutral warmth that balances vibrancy and depth.

HEX#CDB99D
RGB205, 185, 157
HSL35, 32, 71
CMYK0, 10, 23, 20

Neutral Colors

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

Ivory

RolesBg Light, Btn Secondary Text

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

RolesBg Dark

HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Primary Text

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87

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-coral: #FF6F61;
  --color-navy: #003366;
  --color-sand: #D6A77A;
  --color-slate-blue: #A3B9C9;
  --color-light-taupe: #CDB99D;
  --color-ivory: #FFFFFF;
  --color-alabaster: #F5F5F5;
  --color-charcoal: #222222;
}

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: #FF6F61;
  --role-link: #FF6F61;
  --role-btn-primary-bg: #FF6F61;
  --role-btn-outlined-border: #FF6F61;
  --role-btn-outlined-text: #FF6F61;
  --role-headline: #003366;
  --role-btn-secondary-bg: #003366;
  --role-icon: #A3B9C9;
  --role-border: #A3B9C9;
  --role-divider: #A3B9C9;
  --role-outline: #A3B9C9;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F5F5F5;
  --role-text: #222222;
  --role-btn-primary-text: #222222;
}

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.
{
    "coral": "#FF6F61",
    "navy": "#003366",
    "sand": "#D6A77A",
    "slate-blue": "#A3B9C9",
    "light-taupe": "#CDB99D",
    "ivory": "#FFFFFF",
    "alabaster": "#F5F5F5",
    "charcoal": "#222222"
}
Press Space to load new palette