Terracotta#A85E3A
Peach#D8A98B
Sage#7A9B7E
Sand#C6B08A
Cocoa#8C6A52
Palette direction

Terracotta Cafes And Color Palette

This palette translates the image’s warm, tactile café styling into a grounded brand system built from toasted neutrals, clay, and a restrained botanical accent. The colors feel artisanal and welcoming while staying sharp enough for clean digital hierarchy and accessible interface use.

CustomFood Beverageterracottalattesageartisan
palette-preview.example
Food Beverage color direction

Terracotta Cafes And Color Palette

This palette translates the image’s warm, tactile café styling into a grounded brand system built from toasted neutrals, clay, and a restrained botanical accent. The colors feel artisanal and welcoming while staying sharp enough for clean digital hierarchy and accessible interface 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 #1F1B18on Peach #D8A98B8.1:1 Excellent
Logo Charcoal #1F1B18on Sage #7A9B7E5.6:1 Strong
Logo White #FFFFFFon Terracotta #A85E3A4.9:1 Strong
Logo Charcoal #1F1B18on White #FFFFFF17.1:1 Excellent
Icon color
BackgroundTerracotta#A85E3ATextWhite#FFFFFF
Primary Button4.85:1
AA

Best for the main action users should notice first.

BackgroundPeach#D8A98BTextCharcoal#1F1B18
Secondary Button8.12:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#F7F3EDTextSage#7A9B7E
Outlined Button2.79:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F7F3EDTextSage#7A9B7E
Text Button2.79:1
Low

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

Palette composition8 colorsCustom color relationship
9:41Terracotta Cafes And Color Palette Color role balance
Custom 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.

CTerracotta Cafes And Color PaletteFood Beverage brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors sit in a warm, earth-inspired range that echoes the image’s wood, ceramic, and baked-toned materials. Together they create a recognizable handcrafted system that feels calm, edible, and premium without becoming overly muted.

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.Terracotta #A85E3A
HeadlineUsed for main titles and key messages.Sage #7A9B7E
LinkUsed for links and interactive text.Sage #7A9B7E

Buttons

Primary Button
BackgroundTerracotta #A85E3A
TextWhite #FFFFFF
Secondary Button
BackgroundPeach #D8A98B
TextCharcoal #1F1B18
Outlined Button
BackgroundSage #7A9B7E
TextSage #7A9B7E

Interface

TextDefault readable body text.Charcoal #1F1B18
Bg LightLight page or section background.Ivory #F7F3ED
Bg DarkDark page or section background.Charcoal #1F1B18
IconSmall interface icons and marks.Sand #C6B08A
BorderCards, inputs, and component borders.Sand #C6B08A
DividerSubtle separators between content.Cocoa #8C6A52
OutlineFocus rings and emphasis outlines.Cocoa #8C6A52

Palette Colors

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

Main (Brand) Colors

The main colors sit in a warm, earth-inspired range that echoes the image’s wood, ceramic, and baked-toned materials. Together they create a recognizable handcrafted system that feels calm, edible, and premium without becoming overly muted.

PrimaryTerracotta

RolesLogo, Btn Primary Bg

Terracotta gives the brand its warm handcrafted signature and carries the strongest visual recognition.

HEX#A85E3A
RGB168, 94, 58
HSL20, 49, 44
CMYK0, 44, 65, 34
SecondaryPeach

RolesBtn Secondary Bg

Peach softens the palette and adds an approachable, sunlit warmth for secondary actions.

HEX#D8A98B
RGB216, 169, 139
HSL23, 50, 70
CMYK0, 22, 36, 15
TertiarySage

RolesLink, Btn Outlined Border, Btn Outlined Text, Headline

Sage introduces a quiet botanical note that balances the warmer tones and keeps the system feeling fresh.

HEX#7A9B7E
RGB122, 155, 126
HSL127, 14, 54
CMYK21, 0, 19, 39

Support Colors

The support colors extend the warmth with subdued, practical accents that reinforce the earthy mood rather than competing with it. They help with structure and subtle interface balance while staying visually secondary.

Sand

RolesIcon, Border

Sand acts as a soft structural accent that blends naturally with the core palette and adds gentle contrast.

HEX#C6B08A
RGB198, 176, 138
HSL38, 34, 66
CMYK0, 11, 30, 22
Cocoa

RolesDivider, Outline

Cocoa deepens the palette with a restrained brown accent that supports separation and depth without becoming heavy.

HEX#8C6A52
RGB140, 106, 82
HSL25, 26, 44
CMYK0, 24, 41, 45

Neutral Colors

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

Ivory

RolesBg Light

HEX#F7F3ED
RGB247, 243, 237
HSL36, 38, 95
CMYK0, 2, 4, 3
White

RolesBtn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#1F1B18
RGB31, 27, 24
HSL26, 13, 11
CMYK0, 13, 23, 88

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-terracotta: #A85E3A;
  --color-peach: #D8A98B;
  --color-sage: #7A9B7E;
  --color-sand: #C6B08A;
  --color-cocoa: #8C6A52;
  --color-ivory: #F7F3ED;
  --color-white: #FFFFFF;
  --color-charcoal: #1F1B18;
}

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: #A85E3A;
  --role-btn-primary-bg: #A85E3A;
  --role-btn-secondary-bg: #D8A98B;
  --role-link: #7A9B7E;
  --role-btn-outlined-border: #7A9B7E;
  --role-btn-outlined-text: #7A9B7E;
  --role-headline: #7A9B7E;
  --role-icon: #C6B08A;
  --role-border: #C6B08A;
  --role-divider: #8C6A52;
  --role-outline: #8C6A52;
  --role-bg-light: #F7F3ED;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #1F1B18;
  --role-text: #1F1B18;
  --role-btn-secondary-text: #1F1B18;
}

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.
{
    "terracotta": "#A85E3A",
    "peach": "#D8A98B",
    "sage": "#7A9B7E",
    "sand": "#C6B08A",
    "cocoa": "#8C6A52",
    "ivory": "#F7F3ED",
    "white": "#FFFFFF",
    "charcoal": "#1F1B18"
}
Press Space to load new palette