Lavender Gray#8C7F9A
Rose Taupe#7B6C70
Mauve Mist#A79AA5
Sand Dune#9C8A72
Slate Mauve#6E6773
Palette direction

Sandstone Stripe Lifestyle Color Palette

This palette translates the image’s muted striped fabric and sunlit sand into a calm, grounded brand system with soft mineral tones and a restrained, modern contrast. The colors feel tactile and practical, giving the identity enough warmth for approachability while staying polished and versatile across digital and print use.

AnalogousNonemuted stripessandstonetaupelavender gray
palette-preview.example
None color direction

Sandstone Stripe Lifestyle Color Palette

This palette translates the image’s muted striped fabric and sunlit sand into a calm, grounded brand system with soft mineral tones and a restrained, modern contrast. The colors feel tactile and practical, giving the identity enough warmth for approachability while staying polished and versatile across digital and print use.

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 #15131Aon Mauve Mist #A79AA56.8:1 Strong
Logo White #FFFFFFon Rose Taupe #7B6C705.0:1 Strong
Logo Charcoal #15131Aon Lavender Gray #8C7F9A4.9:1 Strong
Logo Charcoal #15131Aon White #FFFFFF18.4:1 Excellent
Icon color
BackgroundRose Taupe#7B6C70TextWhite#FFFFFF
Primary Button4.97:1
AA

Best for the main action users should notice first.

BackgroundMauve Mist#A79AA5TextCharcoal#15131A
Secondary Button6.85:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextMauve Mist#A79AA5
Outlined Button2.69:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextRose Taupe#7B6C70
Text Button4.97:1
AA

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

Palette composition8 colorsAnalogous color relationship
9:41Sandstone Stripe Lifestyle Color Palette Color role balance
Analogous 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.

CSandstone Stripe Lifestyle Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors work together as a quiet stripe-based system, using closely related dusty hues that echo fabric shadows and sun-faded dye. Together they create a cohesive palette with a soft, composed character and enough variation to support hierarchy without breaking harmony.

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.Lavender Gray #8C7F9A
HeadlineUsed for main titles and key messages.Lavender Gray #8C7F9A
LinkUsed for links and interactive text.Rose Taupe #7B6C70

Buttons

Primary Button
BackgroundRose Taupe #7B6C70
TextWhite #FFFFFF
Secondary Button
BackgroundMauve Mist #A79AA5
TextCharcoal #15131A
Outlined Button
BackgroundMauve Mist #A79AA5
TextMauve Mist #A79AA5

Interface

TextDefault readable body text.Charcoal #15131A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #15131A
IconSmall interface icons and marks.Sand Dune #9C8A72
BorderCards, inputs, and component borders.Sand Dune #9C8A72
DividerSubtle separators between content.Slate Mauve #6E6773
OutlineFocus rings and emphasis outlines.Slate Mauve #6E6773

Palette Colors

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

Main (Brand) Colors

The main colors work together as a quiet stripe-based system, using closely related dusty hues that echo fabric shadows and sun-faded dye. Together they create a cohesive palette with a soft, composed character and enough variation to support hierarchy without breaking harmony.

PrimaryLavender Gray

RolesLogo, Headline

Lavender Gray gives the palette a refined, slightly cool signature that feels calm and contemporary.

HEX#8C7F9A
RGB140, 127, 154
HSL269, 12, 55
CMYK9, 18, 0, 40
PrimaryRose Taupe

RolesLink, Btn Primary Bg

Rose Taupe adds grounded warmth and dependable contrast while keeping the palette muted and tactile.

HEX#7B6C70
RGB123, 108, 112
HSL344, 6, 45
CMYK0, 12, 9, 52
SecondaryMauve Mist

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Mauve Mist softens the system with a dusty mid-tone that supports separation and subtle emphasis.

HEX#A79AA5
RGB167, 154, 165
HSL309, 7, 63
CMYK0, 8, 1, 35

Support Colors

The support colors extend the palette with sandy and slate-like accents that reinforce the image’s natural light and shadow without competing with the main hues. They improve usability by adding quiet structure and a slightly deeper tonal anchor where needed.

Sand Dune

RolesIcon, Border

Sand Dune brings a warm earth note that balances the cooler mauves and ties the palette back to the photographed sand.

HEX#9C8A72
RGB156, 138, 114
HSL34, 18, 53
CMYK0, 12, 27, 39
Slate Mauve

RolesDivider, Outline

Slate Mauve adds a restrained structural accent that strengthens separation while staying compatible with the dusty fabric tones.

HEX#6E6773
RGB110, 103, 115
HSL275, 6, 43
CMYK4, 10, 0, 55

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#F4F1EC
RGB244, 241, 236
HSL37, 27, 94
CMYK0, 1, 3, 4
Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#15131A
RGB21, 19, 26
HSL257, 16, 9
CMYK19, 27, 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-lavender-gray: #8C7F9A;
  --color-rose-taupe: #7B6C70;
  --color-mauve-mist: #A79AA5;
  --color-sand-dune: #9C8A72;
  --color-slate-mauve: #6E6773;
  --color-white: #FFFFFF;
  --color-ivory: #F4F1EC;
  --color-charcoal: #15131A;
}

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: #8C7F9A;
  --role-headline: #8C7F9A;
  --role-link: #7B6C70;
  --role-btn-primary-bg: #7B6C70;
  --role-btn-secondary-bg: #A79AA5;
  --role-btn-outlined-border: #A79AA5;
  --role-btn-outlined-text: #A79AA5;
  --role-icon: #9C8A72;
  --role-border: #9C8A72;
  --role-divider: #6E6773;
  --role-outline: #6E6773;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #15131A;
  --role-text: #15131A;
  --role-btn-secondary-text: #15131A;
}

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.
{
    "lavender-gray": "#8C7F9A",
    "rose-taupe": "#7B6C70",
    "mauve-mist": "#A79AA5",
    "sand-dune": "#9C8A72",
    "slate-mauve": "#6E6773",
    "white": "#FFFFFF",
    "ivory": "#F4F1EC",
    "charcoal": "#15131A"
}
Press Space to load new palette