Royal Blue#203963
Sand#E3CC8A
Shellstone#CFC4AA
Palette direction

Royal Blue Sand Color Palette

This palette draws from the image's cool and classic tones, blending a strong royal blue with soft sandy and neutral shades to evoke trust and elegance. The main colors provide a recognizable identity with distinct button and logo applications, while the support colors add subtle sophistication and,

ComplementaryLuxury And Lifestyleroyal bluesandneutralelegant
palette-preview.example
Luxury And Lifestyle color direction

Royal Blue Sand Color Palette

This palette draws from the image's cool and classic tones, blending a strong royal blue with soft sandy and neutral shades to evoke trust and elegance. The main colors provide a recognizable identity with distinct button and logo applications, while the support colors add subtle sophistication and,

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 Swan Wing #FFFFFFon Royal Blue #20396311.5:1 Excellent
Logo Nightfall #1A1A1Aon Sand #E3CC8A11.0:1 Excellent
Logo Nightfall #1A1A1Aon Swan Wing #FFFFFF17.4:1 Excellent
Logo Nightfall #1A1A1Aon Shellstone #CFC4AA10.1:1 Excellent
Icon color
BackgroundRoyal Blue#203963TextSwan Wing#FFFFFF
Primary Button11.50:1
AAA

Best for the main action users should notice first.

BackgroundSand#E3CC8ATextNightfall#1A1A1A
Secondary Button11.00:1
AAA

Useful for softer choices and secondary paths.

BackgroundSwan Wing#FFFFFFTextSand#E3CC8A
Outlined Button1.58:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundSwan Wing#FFFFFFTextRoyal Blue#203963
Text Button11.50:1
AAA

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

Palette composition6 colorsComplementary color relationship
9:41Royal Blue 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.

CRoyal Blue Sand Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The royal blue and sand main colors create a balanced complementary scheme that conveys confidence and elegance, establishing a distinctive and memorable identity.

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.Royal Blue #203963
HeadlineUsed for main titles and key messages.Sand #E3CC8A
LinkUsed for links and interactive text.Royal Blue #203963

Buttons

Primary Button
BackgroundRoyal Blue #203963
TextSwan Wing #FFFFFF
Secondary Button
BackgroundSand #E3CC8A
TextNightfall #1A1A1A
Outlined Button
BackgroundRoyal Blue #203963
TextSand #E3CC8A

Interface

TextDefault readable body text.Nightfall #1A1A1A
Bg LightLight page or section background.Swan Wing #FFFFFF
Bg DarkDark page or section background.Nightfall #1A1A1A
IconSmall interface icons and marks.Shellstone #CFC4AA
BorderCards, inputs, and component borders.Shellstone #CFC4AA
DividerSubtle separators between content.Shellstone #CFC4AA
OutlineFocus rings and emphasis outlines.Shellstone #CFC4AA

Palette Colors

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

Main (Brand) Colors

The royal blue and sand main colors create a balanced complementary scheme that conveys confidence and elegance, establishing a distinctive and memorable identity.

PrimaryRoyal Blue

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border

Royal Blue delivers strength and trust, making it perfect for logos and primary buttons that require clear action cues.

HEX#203963
RGB32, 57, 99
HSL218, 51, 26
CMYK68, 42, 0, 61
SecondarySand

RolesBtn Secondary Bg, Btn Outlined Text, Headline

Sand offers warmth and approachability, balancing the coolness of royal blue and providing a refined accent on secondary elements.

HEX#E3CC8A
RGB227, 204, 138
HSL44, 61, 72
CMYK0, 10, 39, 11

Support Colors

The support colors extend the main palette with muted, soft neutral tones that provide subtle depth and visual rest without competing with the primary hues.

Shellstone

RolesIcon, Border, Divider, Outline

Shellstone is a gentle, warm neutral that harmonizes with sand while gently emphasizing interface elements.

HEX#CFC4AA
RGB207, 196, 170
HSL42, 28, 74
CMYK0, 5, 18, 19

Neutral Colors

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

Swan Wing

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Snowdrift
HEX#F3F0EC
RGB243, 240, 236
HSL34, 23, 94
CMYK0, 1, 3, 5
Nightfall

RolesBg Dark, Text, Btn Secondary Text

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

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-royal-blue: #203963;
  --color-sand: #E3CC8A;
  --color-shellstone: #CFC4AA;
  --color-swan-wing: #FFFFFF;
  --color-snowdrift: #F3F0EC;
  --color-nightfall: #1A1A1A;
}

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: #203963;
  --role-link: #203963;
  --role-btn-primary-bg: #203963;
  --role-btn-outlined-border: #203963;
  --role-btn-secondary-bg: #E3CC8A;
  --role-btn-outlined-text: #E3CC8A;
  --role-headline: #E3CC8A;
  --role-icon: #CFC4AA;
  --role-border: #CFC4AA;
  --role-divider: #CFC4AA;
  --role-outline: #CFC4AA;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #1A1A1A;
  --role-text: #1A1A1A;
  --role-btn-secondary-text: #1A1A1A;
}

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.
{
    "royal-blue": "#203963",
    "sand": "#E3CC8A",
    "shellstone": "#CFC4AA",
    "swan-wing": "#FFFFFF",
    "snowdrift": "#F3F0EC",
    "nightfall": "#1A1A1A"
}
Press Space to load new palette