Sandstone Earth Color Palette for Hospitality and Lifestyle Brands |...

Sandstone#B7AC93

Khaki#9D9075

Saddle Brown#7A6B52

Gray Olive#8B836F

Camel#A89977

Palette direction

Sandstone Earth Hospitality Color Palette

This palette translates the image’s weathered sand and shadowy earth tones into a grounded, tactile brand system. The colors feel natural and understated, with enough contrast to support clear digital hierarchy and a calm, premium tone.

MonochromaticHospitality Eventssandstoneearthdesertneutral

Desktop website

Sandstone Earth Hospitality Color Palette

https://Colorfly.design

Hospitality Events color direction

Sandstone Earth Hospitality Color Palette

This palette translates the image’s weathered sand and shadowy earth tones into a grounded, tactile brand system. The colors feel natural and understated, with enough contrast to support clear digital hierarchy and a calm, premium tone.

Explore the color system View examples Guidelines

Browser tab & favicon

Sandstone Earth Hospitality Color Palette

https://Colorfly.design

16px source shown at 4x Favicon inspection

Check whether the symbol stays distinct before it reaches the browser tab.

Instagram post

colorfly

Logo color pairings

7.7:1

7.7:1

5.5:1

Logo pattern

Gradients

Mobile website

9:41

Hospitality Events Sandstone Earth Hospitality Color Palette

The main colors stay within a restrained desert range, so the palette feels cohesive and naturally lifted from the image. Their close tonal relationship gives the system a quiet, tactile recognition that works well for brands rooted in atmosphere and place.

iPhone app icon

9:41

Wednesday, July 109:41

Email signature

New message

Tohello@client.com

SubjectColor direction and next steps

Hi Jordan,

Here is the refined color direction we discussed. The system is ready for review.

Avery StonePalette designeravery@colorfly.comhttps://Colorfly.design

Analytics system

Pie, bar, and trend charts reveal whether the palette can support clear, expressive product interfaces.

Audience split

Monthly growth

Trend line

Continue to Color Roles

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.Sandstone #B7AC93

HeadlineUsed for main titles and key messages.Saddle Brown #7A6B52

LinkUsed for links and interactive text.Khaki #9D9075

Buttons

Primary Button

Contrast7.68:1AA

BackgroundSandstone #B7AC93

TextCharcoal #1F1A14

Secondary Button

Contrast5.49:1AA

BackgroundKhaki #9D9075

TextCharcoal #1F1A14

Outlined Button

Contrast1.14:1Low

BorderKhaki #9D9075

TextIvory #F3F0E8

Interface

TextDefault readable body text.Charcoal #1F1A14

Bg LightLight page or section background.White #FFFFFF

Bg DarkDark page or section background.Charcoal #1F1A14

IconSmall interface icons and marks.Gray Olive #8B836F

BorderCards, inputs, and component borders.Gray Olive #8B836F

DividerSubtle separators between content.Camel #A89977

OutlineFocus rings and emphasis outlines.Camel #A89977

Continue to Color Specs

Print Color Values

CMYK values are calculated from HEX by default. Adjust them only when preparing print materials.

Screen colors stay unchanged.Manual CMYK edits are used in exports and handoff.

CMYK

Calculated CMYK

SandstoneMain color - #B7AC93

CMYK

Calculated CMYK

KhakiMain color - #9D9075

CMYK

Calculated CMYK

Saddle BrownMain color - #7A6B52

CMYK

Calculated CMYK

Gray OliveSupport color - #8B836F

CMYK

Calculated CMYK

CamelSupport color - #A89977

CMYK

Calculated CMYK

WhiteNeutral color - #FFFFFF

CMYK

Calculated CMYK

IvoryNeutral color - #F3F0E8

CMYK

Calculated CMYK

CharcoalNeutral color - #1F1A14

Palette Colors

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

Main (Brand) Colors

The main colors stay within a restrained desert range, so the palette feels cohesive and naturally lifted from the image. Their close tonal relationship gives the system a quiet, tactile recognition that works well for brands rooted in atmosphere and place.

PrimarySandstone

RolesLogo, Btn Primary Bg

Sandstone anchors the identity with a familiar, sun-worn neutral that feels stable and versatile.

HEX#B7AC93

RGB183, 172, 147

HSL42, 20, 65

CMYK0, 6, 20, 28

SecondaryKhaki

RolesLink, Btn Secondary Bg, Btn Outlined Border

Khaki adds depth and movement while staying close enough to the core sand tone to feel integrated.

HEX#9D9075

RGB157, 144, 117

HSL41, 17, 54

CMYK0, 8, 25, 38

TertiarySaddle Brown

RolesHeadline

Saddle Brown provides a richer focal point that gives headlines stronger presence without breaking the palette.

HEX#7A6B52

RGB122, 107, 82

HSL38, 20, 40

CMYK0, 12, 33, 52

Support Colors

The support colors extend the sandy core with subtle natural depth and a muted earthy contrast. They keep the system usable across interfaces while preserving the calm, organic character of the main palette.

Gray Olive

RolesIcon, Border

Gray Olive softens structural elements and blends cleanly with the sand-based main colors.

HEX#8B836F

RGB139, 131, 111

HSL43, 11, 49

CMYK0, 6, 20, 45

Camel

RolesDivider, Outline

Camel adds a gentle warm accent for UI lines and outlines without competing with the primary tones.

HEX#A89977

RGB168, 153, 119

HSL42, 22, 56

CMYK0, 9, 29, 34

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

Ivory

RolesBtn Outlined Text

HEX#F3F0E8

RGB243, 240, 232

HSL44, 31, 93

CMYK0, 1, 5, 5

Charcoal

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#1F1A14

RGB31, 26, 20

HSL33, 22, 10

CMYK0, 16, 35, 88

Continue to Export

Export and Handoff

Copy palette values, role tokens, animated gradient snippets, and structured handoff data for websites, design systems, and client work.

Export logo in seconds

Click to copy and go to Logo Export on myLogo.review to export your logo files in seconds.

Use when: you want to send this palette into myLogo.review.

COLORFLY_PALETTE_V2
{
    "format": "colorfly_palette_v2",
    "source": "colorfly.design",
    "colors": [
        {
            "name": "Sandstone",
            "hex": "#B7AC93",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 6,
                "y": 20,
                "k": 28,
                "source": "colorfly"
            }
        },
        {
            "name": "Khaki",
            "hex": "#9D9075",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 8,
                "y": 25,
                "k": 38,
                "source": "colorfly"
            }
        },
        {
            "name": "Saddle Brown",
            "hex": "#7A6B52",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 12,
                "y": 33,
                "k": 52,
                "source": "colorfly"
            }
        },
        {
            "name": "Gray Olive",
            "hex": "#8B836F",
            "role": "support",
            "cmyk": {
                "c": 0,
                "m": 6,
                "y": 20,
                "k": 45,
                "source": "colorfly"
            }
        },
        {
            "name": "Camel",
            "hex": "#A89977",
            "role": "support",
            "cmyk": {
                "c": 0,
                "m": 9,
                "y": 29,
                "k": 34,
                "source": "colorfly"
            }
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 0,
                "source": "colorfly"
            }
        },
        {
            "name": "Ivory",
            "hex": "#F3F0E8",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 1,
                "y": 5,
                "k": 5,
                "source": "colorfly"
            }
        },
        {
            "name": "Charcoal",
            "hex": "#1F1A14",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 16,
                "y": 35,
                "k": 88,
                "source": "colorfly"
            }
        }
    ]
}
END_COLORFLY_PALETTE

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-sandstone: #B7AC93;
  --color-khaki: #9D9075;
  --color-saddle-brown: #7A6B52;
  --color-gray-olive: #8B836F;
  --color-camel: #A89977;
  --color-white: #FFFFFF;
  --color-ivory: #F3F0E8;
  --color-charcoal: #1F1A14;
}

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: #B7AC93;
  --role-btn-primary-bg: #B7AC93;
  --role-link: #9D9075;
  --role-btn-secondary-bg: #9D9075;
  --role-btn-outlined-border: #9D9075;
  --role-headline: #7A6B52;
  --role-icon: #8B836F;
  --role-border: #8B836F;
  --role-divider: #A89977;
  --role-outline: #A89977;
  --role-bg-light: #FFFFFF;
  --role-btn-outlined-text: #F3F0E8;
  --role-bg-dark: #1F1A14;
  --role-text: #1F1A14;
  --role-btn-primary-text: #1F1A14;
  --role-btn-secondary-text: #1F1A14;
}

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.

{
    "sandstone": "#B7AC93",
    "khaki": "#9D9075",
    "saddle-brown": "#7A6B52",
    "gray-olive": "#8B836F",
    "camel": "#A89977",
    "white": "#FFFFFF",
    "ivory": "#F3F0E8",
    "charcoal": "#1F1A14"
}

Moving gradient background

Copy the animated radial gradient background from the visualizer, with this palette already applied.

Use when: you want the hero gradient effect.

<div class="colorfly-moving-gradient-bg">
  <span class="colorfly-gradient-spark" aria-hidden="true"></span>
  <div>
    <small>Motion gradient</small>
    <h2>Gradient background</h2>
    <p>A moving brand gradient built from your palette.</p>
  </div>
</div>

<style>
.colorfly-moving-gradient-bg {
  --gradient-anchor: #B7AC93;
  --gradient-partner: #CDC5B3;
  --gradient-accent: #8B836F;
  --gradient-text: #000000;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  overflow: hidden;
  padding: 42px;
  color: var(--gradient-text);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%),
    linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor));
  background-size: 160% 160%, 180% 180%, 240% 240%;
  animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite;
}
.colorfly-moving-gradient-bg > div {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
}
.colorfly-moving-gradient-bg::before,
.colorfly-moving-gradient-bg::after,
.colorfly-gradient-spark {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.colorfly-moving-gradient-bg::before {
  left: -10%;
  top: -18%;
  width: min(520px, 72%);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%),
    radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%);
  opacity: .86;
  animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite;
}
.colorfly-moving-gradient-bg::after {
  right: -12%;
  bottom: -24%;
  width: min(620px, 82%);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%),
    radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%);
  opacity: .78;
  animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite;
}
.colorfly-gradient-spark {
  left: 42%;
  top: 44%;
  width: min(360px, 54%);
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%);
  opacity: .46;
  animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite;
}
@keyframes colorfly-gradient-bg {
  0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; }
  18% { background-position: 44% 88%, 58% 12%, 34% 22%; }
  39% { background-position: 86% 38%, 18% 74%, 86% 64%; }
  63% { background-position: 26% 16%, 84% 92%, 42% 100%; }
  82% { background-position: 68% 68%, 32% 30%, 100% 34%; }
}
@keyframes colorfly-gradient-orb-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  22% { transform: translate3d(78%, 22%, 0) scale(1.12); }
  47% { transform: translate3d(44%, 86%, 0) scale(.92); }
  72% { transform: translate3d(112%, 56%, 0) scale(1.2); }
}
@keyframes colorfly-gradient-orb-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  19% { transform: translate3d(-48%, -18%, 0) scale(.9); }
  53% { transform: translate3d(-92%, -62%, 0) scale(1.14); }
  79% { transform: translate3d(-22%, -86%, 0) scale(.98); }
}
@keyframes colorfly-gradient-spark {
  0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); }
  28% { transform: translate3d(52%, -34%, 0) scale(1.08); }
  58% { transform: translate3d(-44%, 38%, 0) scale(.96); }
  84% { transform: translate3d(20%, 28%, 0) scale(1.18); }
}
</style>

Moving gradient text

Copy the animated gradient text treatment from the visualizer, generated from the main and support colors.

Use when: you want gradient headline text.

<div class="colorfly-gradient-text-card">
  <small>Gradient type</small>
  <h2>Gradient on text</h2>
  <p>A moving text gradient built from your palette.</p>
</div>

<style>
.colorfly-gradient-text-card {
  --gradient-text-a: #B7AC93;
  --gradient-text-b: #6F6A61;
  --gradient-text-c: #8B836F;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 310px;
  overflow: hidden;
  padding: 42px;
  text-align: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%),
    linear-gradient(135deg, #fff, #fbfbfd);
}
.colorfly-gradient-text-card::before,
.colorfly-gradient-text-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}
.colorfly-gradient-text-card::before {
  left: 9%;
  top: 15%;
  width: min(330px, 48%);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%);
  animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite;
}
.colorfly-gradient-text-card::after {
  right: 7%;
  bottom: 6%;
  width: min(360px, 52%);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%);
  animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite;
}
.colorfly-gradient-text-card small,
.colorfly-gradient-text-card p {
  position: relative;
  z-index: 1;
  color: #65616d;
}
.colorfly-gradient-text-card h2 {
  position: relative;
  z-index: 1;
  margin: 10px 0 12px;
  color: transparent;
  font-size: clamp(42px, 8vw, 96px);
  line-height: .92;
  background:
    radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%),
    radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%),
    linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a));
  background-size: 220% 220%, 240% 240%, 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite;
}
@keyframes colorfly-gradient-text-shift {
  0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; }
  27% { background-position: 78% 18%, 28% 82%, 42% 50%; }
  61% { background-position: 36% 92%, 86% 24%, 100% 50%; }
  84% { background-position: 92% 48%, 18% 40%, 58% 50%; }
}
@keyframes colorfly-gradient-text-glow-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.92); }
  42% { transform: translate3d(80%, 32%, 0) scale(1.12); }
  72% { transform: translate3d(28%, 86%, 0) scale(.98); }
}
@keyframes colorfly-gradient-text-glow-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  36% { transform: translate3d(-62%, -18%, 0) scale(.9); }
  76% { transform: translate3d(-36%, -78%, 0) scale(1.12); }
}
</style>

Start with room to explore

Build your first color system

Try ColorFly with 5 free AI actions and turn your next brand direction into a palette with purpose. No credit card required.

Try it for free

Press Space to load new palette