Light Espresso Bark#5B3428
Sunlit Amber#D88A3C
Warm Clay Light#B96A49
Pale Sandstone#CDA98F
Soft Umber Veil#9F7B67
Palette direction

Amber Carved Shadow Color Palette

A brighter amber-led palette that keeps the carved, tactile mood but opens it up with lighter clay and sand notes. The result feels warmer, more luminous, and more usable across premium branding and UI without losing its sculptural character.

MonochromaticLuxury And Lifestyleambercarvedshadowearthy
palette-preview.example
Luxury And Lifestyle color direction

Amber Carved Shadow Color Palette

A brighter amber-led palette that keeps the carved, tactile mood but opens it up with lighter clay and sand notes. The result feels warmer, more luminous, and more usable across premium branding and UI without losing its sculptural character.

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 Pure White #FFFFFFon Light Espresso Bark #5B342810.7:1 Excellent
Logo Deep Charcoal Brown #1A1411on Sunlit Amber #D88A3C6.6:1 Strong
Logo Deep Charcoal Brown #1A1411on Warm Clay Light #B96A494.5:1 Strong
Logo Deep Charcoal Brown #1A1411on Pure White #FFFFFF18.2:1 Excellent
Icon color
BackgroundSunlit Amber#D88A3CTextDeep Charcoal Brown#1A1411
Primary Button6.61:1
AA

Best for the main action users should notice first.

BackgroundLight Espresso Bark#5B3428TextPure White#FFFFFF
Secondary Button10.68:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextSoft Umber Veil#9F7B67
Outlined Button3.82:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextSunlit Amber#D88A3C
Text Button2.76:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Amber Carved Shadow 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.

CAmber Carved Shadow Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

Amber, clay, and softened walnut sit close on the spectrum, creating a warmer and more luminous system that still feels handcrafted. The trio gives the brand a recognizable glow with enough depth to stay premium and grounded.

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.Light Espresso Bark #5B3428
HeadlineUsed for main titles and key messages.Warm Clay Light #B96A49
LinkUsed for links and interactive text.Sunlit Amber #D88A3C

Buttons

Primary Button
BackgroundSunlit Amber #D88A3C
TextDeep Charcoal Brown #1A1411
Secondary Button
BackgroundLight Espresso Bark #5B3428
TextPure White #FFFFFF
Outlined Button
BackgroundSunlit Amber #D88A3C
TextSoft Umber Veil #9F7B67

Interface

TextDefault readable body text.Deep Charcoal Brown #1A1411
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Deep Charcoal Brown #1A1411
IconSmall interface icons and marks.Warm Porcelain #F7EFE6
BorderCards, inputs, and component borders.Pale Sandstone #CDA98F
DividerSubtle separators between content.Soft Umber Veil #9F7B67
OutlineFocus rings and emphasis outlines.Soft Umber Veil #9F7B67

Palette Colors

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

Main (Brand) Colors

Amber, clay, and softened walnut sit close on the spectrum, creating a warmer and more luminous system that still feels handcrafted. The trio gives the brand a recognizable glow with enough depth to stay premium and grounded.

PrimaryLight Espresso Bark

RolesLogo, Btn Secondary Bg

A softened dark brown that preserves the carved, artisanal signature while feeling less heavy than the original.

HEX#5B3428
RGB91, 52, 40
HSL14, 39, 26
CMYK0, 43, 56, 64
PrimarySunlit Amber

RolesBtn Primary Bg, Link, Btn Outlined Border

A brighter amber that increases visibility and energy, making the brand feel more open and inviting.

HEX#D88A3C
RGB216, 138, 60
HSL30, 67, 54
CMYK0, 36, 72, 15
SecondaryWarm Clay Light

RolesHeadline

A lighter clay tone that keeps headlines warm and expressive without relying on deep shadow.

HEX#B96A49
RGB185, 106, 73
HSL18, 44, 51
CMYK0, 43, 61, 27

Support Colors

The support accents extend the warmth with quieter surface tones that brighten the system and soften the edges. They balance the main palette by adding structure, restraint, and a少

Pale Sandstone

RolesBorder

A light sandstone accent that adds gentle structure and helps the brighter mains feel composed.

HEX#CDA98F
RGB205, 169, 143
HSL25, 38, 68
CMYK0, 18, 30, 20
Soft Umber Veil

RolesDivider, Outline, Btn Outlined Text

A muted mid-tone umber that keeps outlines readable while staying subordinate to the amber and clay mains.

HEX#9F7B67
RGB159, 123, 103
HSL21, 23, 51
CMYK0, 23, 35, 38

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
Warm Porcelain

RolesIcon

HEX#F7EFE6
RGB247, 239, 230
HSL32, 52, 94
CMYK0, 3, 7, 3
Deep Charcoal Brown

RolesBg Dark, Text, Btn Primary Text

HEX#1A1411
RGB26, 20, 17
HSL20, 21, 8
CMYK0, 23, 35, 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-light-espresso-bark: #5B3428;
  --color-sunlit-amber: #D88A3C;
  --color-warm-clay-light: #B96A49;
  --color-pale-sandstone: #CDA98F;
  --color-soft-umber-veil: #9F7B67;
  --color-pure-white: #FFFFFF;
  --color-warm-porcelain: #F7EFE6;
  --color-deep-charcoal-brown: #1A1411;
}

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: #5B3428;
  --role-btn-secondary-bg: #5B3428;
  --role-btn-primary-bg: #D88A3C;
  --role-link: #D88A3C;
  --role-btn-outlined-border: #D88A3C;
  --role-headline: #B96A49;
  --role-border: #CDA98F;
  --role-divider: #9F7B67;
  --role-outline: #9F7B67;
  --role-btn-outlined-text: #9F7B67;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-icon: #F7EFE6;
  --role-bg-dark: #1A1411;
  --role-text: #1A1411;
  --role-btn-primary-text: #1A1411;
}

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.
{
    "light-espresso-bark": "#5B3428",
    "sunlit-amber": "#D88A3C",
    "warm-clay-light": "#B96A49",
    "pale-sandstone": "#CDA98F",
    "soft-umber-veil": "#9F7B67",
    "pure-white": "#FFFFFF",
    "warm-porcelain": "#F7EFE6",
    "deep-charcoal-brown": "#1A1411"
}
Press Space to load new palette