Website Nude Beige#D8B6A0
Cocoa Taupe#7E5B4A
Soft Rose Clay#E7C9C6
Smoke Gray#6A6865
Pebble Divider#B8B0AA
Palette direction

Skims Inspired Neutral Color Palette

A Skims-inspired palette built around a restrained, body-conscious neutral system with one signature warm beige tone and crisp black-and-white support for modern e-commerce clarity. It feels minimal, elevated, and tactile while keeping the brand look versatile across product, editorial, and checkout

MonochromaticFashion Beautyskims-inspiredneutralminimalecommerce
palette-preview.example
Fashion Beauty color direction

Skims Inspired Neutral Color Palette

A Skims-inspired palette built around a restrained, body-conscious neutral system with one signature warm beige tone and crisp black-and-white support for modern e-commerce clarity. It feels minimal, elevated, and tactile while keeping the brand look versatile across product, editorial, and checkout

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 Deep Charcoal Black #111111on Soft Rose Clay #E7C9C612.2:1 Excellent
Logo Deep Charcoal Black #111111on Website Nude Beige #D8B6A010.0:1 Excellent
Logo Pure White #FFFFFFon Cocoa Taupe #7E5B4A6.0:1 Strong
Logo Deep Charcoal Black #111111on Pure White #FFFFFF18.9:1 Excellent
Icon color
BackgroundWebsite Nude Beige#D8B6A0TextDeep Charcoal Black#111111
Primary Button10.00:1
AAA

Best for the main action users should notice first.

BackgroundCocoa Taupe#7E5B4ATextPure White#FFFFFF
Secondary Button6.03:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextSoft Rose Clay#E7C9C6
Outlined Button1.55:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCocoa Taupe#7E5B4A
Text Button6.03:1
AA

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

Palette composition8 colorsMonochromatic color relationship
9:41Skims Inspired Neutral Color Palette Color role balance
Monochromatic 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.

CSkims Inspired Neutral Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

These tones work together as a recognizable nude-forward system: one warm beige grounds the brand, while a deeper cocoa and soft blush keep the palette intimate and contemporary without breaking the minimalist feel.

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.Website Nude Beige #D8B6A0
HeadlineUsed for main titles and key messages.Soft Rose Clay #E7C9C6
LinkUsed for links and interactive text.Cocoa Taupe #7E5B4A

Buttons

Primary Button
BackgroundWebsite Nude Beige #D8B6A0
TextDeep Charcoal Black #111111
Secondary Button
BackgroundCocoa Taupe #7E5B4A
TextPure White #FFFFFF
Outlined Button
BackgroundCocoa Taupe #7E5B4A
TextSoft Rose Clay #E7C9C6

Interface

TextDefault readable body text.Deep Charcoal Black #111111
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Deep Charcoal Black #111111
IconSmall interface icons and marks.Smoke Gray #6A6865
BorderCards, inputs, and component borders.Smoke Gray #6A6865
DividerSubtle separators between content.Pebble Divider #B8B0AA
OutlineFocus rings and emphasis outlines.Pebble Divider #B8B0AA

Palette Colors

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

Main (Brand) Colors

These tones work together as a recognizable nude-forward system: one warm beige grounds the brand, while a deeper cocoa and soft blush keep the palette intimate and contemporary without breaking the minimalist feel.

PrimaryWebsite Nude Beige

RolesLogo, Btn Primary Bg

A skin-tone beige that carries the brand signature and creates the instantly recognizable Skims-inspired base.

HEX#D8B6A0
RGB216, 182, 160
HSL24, 42, 74
CMYK0, 16, 26, 15
SecondaryCocoa Taupe

RolesLink, Btn Secondary Bg, Btn Outlined Border

A grounded cocoa taupe that adds depth for interactive elements and keeps the system premium rather than flat.

HEX#7E5B4A
RGB126, 91, 74
HSL20, 26, 39
CMYK0, 28, 41, 51
TertiarySoft Rose Clay

RolesHeadline, Btn Outlined Text

A subdued rose-neutral that softens the palette and gives headlines a warm editorial accent.

HEX#E7C9C6
RGB231, 201, 198
HSL5, 41, 84
CMYK0, 13, 14, 9

Support Colors

The support colors extend the main nude system with quiet contrast and usability, adding structure and subtle emphasis without competing with the core beige identity.

Smoke Gray

RolesIcon, Border

A muted gray that supports UI structure and keeps icons readable without pulling attention away from the product imagery.

HEX#6A6865
RGB106, 104, 101
HSL36, 2, 41
CMYK0, 2, 5, 58
Pebble Divider

RolesDivider, Outline

A soft stone neutral that separates content gently and reinforces the understated luxury feel.

HEX#B8B0AA
RGB184, 176, 170
HSL26, 9, 69
CMYK0, 4, 8, 28

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Porcelain Warm White
HEX#F5F1EC
RGB245, 241, 236
HSL33, 31, 94
CMYK0, 2, 4, 4
Deep Charcoal Black

RolesBg Dark, Text, Btn Primary 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-website-nude-beige: #D8B6A0;
  --color-cocoa-taupe: #7E5B4A;
  --color-soft-rose-clay: #E7C9C6;
  --color-smoke-gray: #6A6865;
  --color-pebble-divider: #B8B0AA;
  --color-pure-white: #FFFFFF;
  --color-porcelain-warm-white: #F5F1EC;
  --color-deep-charcoal-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: #D8B6A0;
  --role-btn-primary-bg: #D8B6A0;
  --role-link: #7E5B4A;
  --role-btn-secondary-bg: #7E5B4A;
  --role-btn-outlined-border: #7E5B4A;
  --role-headline: #E7C9C6;
  --role-btn-outlined-text: #E7C9C6;
  --role-icon: #6A6865;
  --role-border: #6A6865;
  --role-divider: #B8B0AA;
  --role-outline: #B8B0AA;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
  --role-btn-primary-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.
{
    "website-nude-beige": "#D8B6A0",
    "cocoa-taupe": "#7E5B4A",
    "soft-rose-clay": "#E7C9C6",
    "smoke-gray": "#6A6865",
    "pebble-divider": "#B8B0AA",
    "pure-white": "#FFFFFF",
    "porcelain-warm-white": "#F5F1EC",
    "deep-charcoal-black": "#111111"
}
Press Space to load new palette