Terracotta#D05C3B
Golden Yellow#E8B45B
Apricot Orange#F1AC64
Muted Sage#A8B5A3
Sandy Beige#D6C3A3
Palette direction

Terracotta Golden Yellow Color Palette

This palette combines warm and inviting main colors with soft, comforting support tones and clean neutrals to evoke the cozy and fresh atmosphere of a cafeteria and bakery. The warm terracotta and golden yellow create an appetizing and friendly vibe, while the muted sage and sandy beige add depth and subtlety. Neutrals balance the palette for readability and versatile backgrounds.

MonochromaticFood Beveragewarminvitingcozyappetizing
palette-preview.example
Food Beverage color direction

Terracotta Golden Yellow Color Palette

This palette combines warm and inviting main colors with soft, comforting support tones and clean neutrals to evoke the cozy and fresh atmosphere of a cafeteria and bakery. The warm terracotta and golden yellow create an appetizing and friendly vibe, while the muted sage and sandy beige add depth and subtlety. Neutrals balance the palette for readability and versatile backgrounds.

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 #3B3B3Bon Golden Yellow #E8B45B5.9:1 Strong
Logo Charcoal #3B3B3Bon Apricot Orange #F1AC645.8:1 Strong
Logo Charcoal #3B3B3Bon Ivory White #FFFFFF11.2:1 Excellent
Logo Ivory White #FFFFFFon Charcoal #3B3B3B11.2:1 Excellent
Icon color
BackgroundTerracotta#D05C3BTextIvory White#FFFFFF
Primary Button3.98:1
Large text

Best for the main action users should notice first.

BackgroundGolden Yellow#E8B45BTextCharcoal#3B3B3B
Secondary Button5.93:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory White#FFFFFFTextTerracotta#D05C3B
Outlined Button3.98:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundIvory White#FFFFFFTextTerracotta#D05C3B
Text Button3.98:1
Large text

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

Palette composition8 colorsMonochromatic color relationship
9:41Terracotta Golden Yellow 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.

CTerracotta Golden Yellow Color PaletteFood Beverage brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The warm Terracotta, Golden Yellow, and a softer Apricot Orange create a harmonious, approachable trio representing the cozy and appetizing nature of a cafeteria and bakery environment.

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

Buttons

Primary Button
BackgroundTerracotta #D05C3B
TextIvory White #FFFFFF
Secondary Button
BackgroundGolden Yellow #E8B45B
TextCharcoal #3B3B3B
Outlined Button
BackgroundTerracotta #D05C3B
TextTerracotta #D05C3B

Interface

TextDefault readable body text.Charcoal #3B3B3B
Bg LightLight page or section background.Ivory White #FFFFFF
Bg DarkDark page or section background.Alabaster #F5F3F0
IconSmall interface icons and marks.Muted Sage #A8B5A3
BorderCards, inputs, and component borders.Muted Sage #A8B5A3
DividerSubtle separators between content.Muted Sage #A8B5A3
OutlineFocus rings and emphasis outlines.Muted Sage #A8B5A3

Palette Colors

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

Main (Brand) Colors

The warm Terracotta, Golden Yellow, and a softer Apricot Orange create a harmonious, approachable trio representing the cozy and appetizing nature of a cafeteria and bakery environment.

PrimaryTerracotta

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Terracotta conveys warmth and appetite, anchoring the brand with an earthy yet vibrant tone that invites comfort and familiarity.

HEX#D05C3B
RGB208, 92, 59
HSL13, 61, 52
CMYK0, 56, 72, 18
SecondaryGolden Yellow

RolesBtn Secondary Bg

Golden Yellow brings energy and freshness, stimulating hunger and optimism without overpowering the palette.

HEX#E8B45B
RGB232, 180, 91
HSL38, 75, 63
CMYK0, 22, 61, 9
TertiaryApricot Orange

Apricot Orange serves as a soft transitional hue, gently balancing and unifying the stronger terracotta and golden yellow for visual warmth and depth.

HEX#F1AC64
RGB241, 172, 100
HSL31, 83, 67
CMYK0, 29, 59, 5

Support Colors

The muted Sage and Sandy Beige support colors provide naturalistic and calming accents, enhancing the warmth of the main colors while maintaining subtlety for icons, borders, and dividers.

Muted Sage

RolesIcon, Border, Divider, Outline

Muted Sage offers a cool, subdued contrast to the warm main colors, grounding the palette with an organic touch suggestive of freshness and natural ingredients.

HEX#A8B5A3
RGB168, 181, 163
HSL103, 11, 67
CMYK7, 0, 10, 29
Sandy Beige

Sandy Beige complements the warm tones by adding softness and earthiness that supports the palette’s welcoming and wholesome feel without competing for attention.

HEX#D6C3A3
RGB214, 195, 163
HSL38, 38, 74
CMYK0, 9, 24, 16

Neutral Colors

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

Ivory White

RolesBg Light, Btn Primary Text

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

RolesBg Dark

HEX#F5F3F0
RGB245, 243, 240
HSL36, 20, 95
CMYK0, 1, 2, 4
Charcoal

RolesText, Btn Secondary Text

HEX#3B3B3B
RGB59, 59, 59
HSL0, 0, 23
CMYK0, 0, 0, 77

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: #D05C3B;
  --color-golden-yellow: #E8B45B;
  --color-apricot-orange: #F1AC64;
  --color-muted-sage: #A8B5A3;
  --color-sandy-beige: #D6C3A3;
  --color-ivory-white: #FFFFFF;
  --color-alabaster: #F5F3F0;
  --color-charcoal: #3B3B3B;
}

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: #D05C3B;
  --role-link: #D05C3B;
  --role-btn-primary-bg: #D05C3B;
  --role-btn-outlined-border: #D05C3B;
  --role-btn-outlined-text: #D05C3B;
  --role-headline: #D05C3B;
  --role-btn-secondary-bg: #E8B45B;
  --role-icon: #A8B5A3;
  --role-border: #A8B5A3;
  --role-divider: #A8B5A3;
  --role-outline: #A8B5A3;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F5F3F0;
  --role-text: #3B3B3B;
  --role-btn-secondary-text: #3B3B3B;
}

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": "#D05C3B",
    "golden-yellow": "#E8B45B",
    "apricot-orange": "#F1AC64",
    "muted-sage": "#A8B5A3",
    "sandy-beige": "#D6C3A3",
    "ivory-white": "#FFFFFF",
    "alabaster": "#F5F3F0",
    "charcoal": "#3B3B3B"
}
Press Space to load new palette