Sand#C8B28B
Slate Blue#5E7C9A
Charcoal#2F2A24
Cocoa Brown#8A6F58
Slate Gray#6F8A8F
Palette direction

Sand Slate Blue Color Palette

This palette turns the image’s dusty tan ground, cool blue label, and dark shadow into a practical brand system with a grounded natural base and a crisp contrasting accent. The result feels weathered, trustworthy, and tactile while still working cleanly across digital interfaces.

ComplementaryNonesandslate bluecharcoalweathered
palette-preview.example
None color direction

Sand Slate Blue Color Palette

This palette turns the image’s dusty tan ground, cool blue label, and dark shadow into a practical brand system with a grounded natural base and a crisp contrasting accent. The result feels weathered, trustworthy, and tactile while still working cleanly 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 White #FFFFFFon Charcoal #2F2A2414.2:1 Excellent
Logo Black #111111on Sand #C8B28B9.2:1 Excellent
Logo Black #111111on White #FFFFFF18.9:1 Excellent
Logo Black #111111on Slate Gray #6F8A8F5.1:1 Strong
Icon color
BackgroundSlate Blue#5E7C9ATextWhite#FFFFFF
Primary Button4.35:1
Large text

Best for the main action users should notice first.

BackgroundSand#C8B28BTextBlack#111111
Secondary Button9.17:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSlate Blue#5E7C9A
Outlined Button4.35:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextSlate Blue#5E7C9A
Text Button4.35:1
Large text

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

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

CSand Slate Blue Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a dusty sand base with a cool slate blue accent and a deep charcoal anchor, echoing the image’s natural surface, label, and shadow. Together they create a rugged, readable system that feels both grounded and deliberately designed.

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.Sand #C8B28B
HeadlineUsed for main titles and key messages.Charcoal #2F2A24
LinkUsed for links and interactive text.Slate Blue #5E7C9A

Buttons

Primary Button
BackgroundSlate Blue #5E7C9A
TextWhite #FFFFFF
Secondary Button
BackgroundSand #C8B28B
TextBlack #111111
Outlined Button
BackgroundSlate Blue #5E7C9A
TextSlate Blue #5E7C9A

Interface

TextDefault readable body text.Black #111111
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Black #111111
IconSmall interface icons and marks.Cocoa Brown #8A6F58
BorderCards, inputs, and component borders.Cocoa Brown #8A6F58
DividerSubtle separators between content.Slate Gray #6F8A8F
OutlineFocus rings and emphasis outlines.Slate Gray #6F8A8F

Palette Colors

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

Main (Brand) Colors

The main colors combine a dusty sand base with a cool slate blue accent and a deep charcoal anchor, echoing the image’s natural surface, label, and shadow. Together they create a rugged, readable system that feels both grounded and deliberately designed.

PrimarySand

RolesLogo, Btn Secondary Bg

Sand brings the warm, sun-worn character that makes the palette feel earthy and approachable.

HEX#C8B28B
RGB200, 178, 139
HSL38, 36, 66
CMYK0, 11, 31, 22
SecondarySlate Blue

RolesLink, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Slate Blue supplies the clearest visual contrast and gives the system a calm, reliable digital edge.

HEX#5E7C9A
RGB94, 124, 154
HSL210, 24, 49
CMYK39, 19, 0, 40
TertiaryCharcoal

RolesHeadline

Charcoal adds weight and authority, keeping the palette grounded and legible without feeling harsh.

HEX#2F2A24
RGB47, 42, 36
HSL33, 13, 16
CMYK0, 11, 23, 82

Support Colors

The support colors extend the main palette with muted, image-inspired helpers that stay subordinate to the sand and blue relationship. They reinforce the weathered, tactile feeling without pulling attention away from the core brand colors.

Cocoa Brown

RolesIcon, Border

Cocoa Brown echoes the darker earthy tones in the image and works as a restrained structural accent.

HEX#8A6F58
RGB138, 111, 88
HSL28, 22, 44
CMYK0, 20, 36, 46
Slate Gray

RolesDivider, Outline

Slate Gray softens interfaces with a cool, desaturated note that bridges the blue accent and neutral surfaces.

HEX#6F8A8F
RGB111, 138, 143
HSL189, 13, 50
CMYK22, 3, 0, 44

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F4F0E8
RGB244, 240, 232
HSL40, 35, 93
CMYK0, 2, 5, 4
Black

RolesBg Dark, 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-sand: #C8B28B;
  --color-slate-blue: #5E7C9A;
  --color-charcoal: #2F2A24;
  --color-cocoa-brown: #8A6F58;
  --color-slate-gray: #6F8A8F;
  --color-white: #FFFFFF;
  --color-ivory: #F4F0E8;
  --color-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: #C8B28B;
  --role-btn-secondary-bg: #C8B28B;
  --role-link: #5E7C9A;
  --role-btn-primary-bg: #5E7C9A;
  --role-btn-outlined-border: #5E7C9A;
  --role-btn-outlined-text: #5E7C9A;
  --role-headline: #2F2A24;
  --role-icon: #8A6F58;
  --role-border: #8A6F58;
  --role-divider: #6F8A8F;
  --role-outline: #6F8A8F;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-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.
{
    "sand": "#C8B28B",
    "slate-blue": "#5E7C9A",
    "charcoal": "#2F2A24",
    "cocoa-brown": "#8A6F58",
    "slate-gray": "#6F8A8F",
    "white": "#FFFFFF",
    "ivory": "#F4F0E8",
    "black": "#111111"
}
Press Space to load new palette