Dusty Rose, Terracotta & Mustard Color Palette for Creative Brands |...

Dusty Rose#771D18

Terracotta#D98868

Mustard#F9D890

Sage Green#93A387

Warm Cream#F7F4EE

Palette direction

Dusty Rose Terra Color Palette

This palette uses warm dusty rose, terracotta, and mustard as main colors, balanced by sage green and warm cream accents, with deep charcoal neutrals to ensure readability and subtle elegance.

AnalogousCreativedusty roseterracottamustardsage green

Desktop website

Dusty Rose Terra Color Palette

https://Colorfly.design

Creative color direction

Dusty Rose Terra Color Palette

This palette uses warm dusty rose, terracotta, and mustard as main colors, balanced by sage green and warm cream accents, with deep charcoal neutrals to ensure readability and subtle elegance.

Explore the color system View examples Guidelines

Browser tab & favicon

Dusty Rose Terra Color Palette

https://Colorfly.design

16px source shown at 4x Favicon inspection

Check whether the symbol stays distinct before it reaches the browser tab.

Instagram post

colorfly

Logo color pairings

10.6:1

10.6:1

7.7:1

Logo pattern

Gradients

Mobile website

9:41

Creative Dusty Rose Terra Color Palette

The dusty rose, terracotta, and mustard main colors form a harmonious triadic system that conveys warmth, earthiness, and friendly energy while maintaining visual distinction and balance.

iPhone app icon

9:41

Wednesday, July 109:41

Email signature

New message

Tohello@client.com

SubjectColor direction and next steps

Hi Jordan,

Here is the refined color direction we discussed. The system is ready for review.

Avery StonePalette designeravery@colorfly.comhttps://Colorfly.design

Analytics system

Pie, bar, and trend charts reveal whether the palette can support clear, expressive product interfaces.

Audience split

Monthly growth

Trend line

Continue to Color Roles

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.Dusty Rose #771D18

HeadlineUsed for main titles and key messages.Terracotta #D98868

LinkUsed for links and interactive text.Dusty Rose #771D18

Buttons

Primary Button

Contrast10.64:1AA

BackgroundDusty Rose #771D18

TextWhite #FFFFFF

Secondary Button

Contrast3.71:1Large text

BackgroundTerracotta #D98868

TextDeep Charcoal #3B424C

Outlined Button

Contrast9.69:1AA

BorderDusty Rose #771D18

TextDusty Rose #771D18

Interface

TextDefault readable body text.Deep Charcoal #3B424C

Bg LightLight page or section background.Warm Cream #F7F4EE

Bg DarkDark page or section background.Deep Charcoal #3B424C

IconSmall interface icons and marks.Sage Green #93A387

BorderCards, inputs, and component borders.Sage Green #93A387

DividerSubtle separators between content.Sage Green #93A387

OutlineFocus rings and emphasis outlines.Sage Green #93A387

Continue to Color Specs

Print Color Values

CMYK values are calculated from HEX by default. Adjust them only when preparing print materials.

Screen colors stay unchanged.Manual CMYK edits are used in exports and handoff.

CMYK

Calculated CMYK

Dusty RoseMain color - #771D18

CMYK

Calculated CMYK

TerracottaMain color - #D98868

CMYK

Calculated CMYK

MustardMain color - #F9D890

CMYK

Calculated CMYK

Sage GreenSupport color - #93A387

CMYK

Calculated CMYK

Warm CreamSupport color - #F7F4EE

CMYK

Calculated CMYK

Deep CharcoalNeutral color - #3B424C

CMYK

Calculated CMYK

Off-WhiteNeutral color - #FAF9F6

CMYK

Calculated CMYK

WhiteNeutral color - #FFFFFF

Palette Colors

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

Main (Brand) Colors

The dusty rose, terracotta, and mustard main colors form a harmonious triadic system that conveys warmth, earthiness, and friendly energy while maintaining visual distinction and balance.

PrimaryDusty Rose

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

Dusty Rose provides a grounded, gentle red as the key brand color that feels approachable and warm for primary brand elements.

HEX#771D18

RGB119, 29, 24

HSL3, 66, 28

CMYK0, 76, 80, 53

SecondaryTerracotta

RolesBtn Secondary Bg, Headline

Terracotta delivers a soft, clay-like orange supporting warmth and vibrancy while avoiding overly bright or neon tones.

HEX#D98868

RGB217, 136, 104

HSL17, 60, 63

CMYK0, 37, 52, 15

TertiaryMustard

Mustard acts as a soft autumn sun yellow that energizes and highlights text on primary buttons with warmth and softness.

HEX#F9D890

RGB249, 216, 144

HSL41, 90, 77

CMYK0, 13, 42, 2

Support Colors

Sage green and warm cream extend the palette by adding calm, natural contrast and subtle softness that complement the warm main colors without overpowering them.

Sage Green

RolesIcon, Border, Divider, Outline

Sage Green offers a desaturated, calming accent that balances the warmth of the main colors with a soothing natural tone.

HEX#93A387

RGB147, 163, 135

HSL94, 13, 58

CMYK10, 0, 17, 36

Warm Cream

RolesBg Light

Warm Cream provides a soft off-white background that enhances the overall warmth and gentleness while maintaining readability.

HEX#F7F4EE

RGB247, 244, 238

HSL40, 36, 95

CMYK0, 1, 4, 3

Neutral Colors

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

Deep Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#3B424C

RGB59, 66, 76

HSL215, 13, 26

CMYK22, 13, 0, 70

Off-White

HEX#FAF9F6

RGB250, 249, 246

HSL45, 29, 97

CMYK0, 0, 2, 2

White

RolesBtn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Continue to Export

Export and Handoff

Copy palette values, role tokens, animated gradient snippets, and structured handoff data for websites, design systems, and client work.

Export logo in seconds

Click to copy and go to Logo Export on myLogo.review to export your logo files in seconds.

Use when: you want to send this palette into myLogo.review.

COLORFLY_PALETTE_V2
{
    "format": "colorfly_palette_v2",
    "source": "colorfly.design",
    "colors": [
        {
            "name": "Dusty Rose",
            "hex": "#771D18",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 76,
                "y": 80,
                "k": 53,
                "source": "colorfly"
            }
        },
        {
            "name": "Terracotta",
            "hex": "#D98868",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 37,
                "y": 52,
                "k": 15,
                "source": "colorfly"
            }
        },
        {
            "name": "Mustard",
            "hex": "#F9D890",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 13,
                "y": 42,
                "k": 2,
                "source": "colorfly"
            }
        },
        {
            "name": "Sage Green",
            "hex": "#93A387",
            "role": "support",
            "cmyk": {
                "c": 10,
                "m": 0,
                "y": 17,
                "k": 36,
                "source": "colorfly"
            }
        },
        {
            "name": "Warm Cream",
            "hex": "#F7F4EE",
            "role": "support",
            "cmyk": {
                "c": 0,
                "m": 1,
                "y": 4,
                "k": 3,
                "source": "colorfly"
            }
        },
        {
            "name": "Deep Charcoal",
            "hex": "#3B424C",
            "role": "neutral",
            "cmyk": {
                "c": 22,
                "m": 13,
                "y": 0,
                "k": 70,
                "source": "colorfly"
            }
        },
        {
            "name": "Off-White",
            "hex": "#FAF9F6",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 2,
                "k": 2,
                "source": "colorfly"
            }
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 0,
                "source": "colorfly"
            }
        }
    ]
}
END_COLORFLY_PALETTE

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-dusty-rose: #771D18;
  --color-terracotta: #D98868;
  --color-mustard: #F9D890;
  --color-sage-green: #93A387;
  --color-warm-cream: #F7F4EE;
  --color-deep-charcoal: #3B424C;
  --color-off-white: #FAF9F6;
  --color-white: #FFFFFF;
}

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: #771D18;
  --role-link: #771D18;
  --role-btn-primary-bg: #771D18;
  --role-btn-outlined-border: #771D18;
  --role-btn-outlined-text: #771D18;
  --role-btn-secondary-bg: #D98868;
  --role-headline: #D98868;
  --role-icon: #93A387;
  --role-border: #93A387;
  --role-divider: #93A387;
  --role-outline: #93A387;
  --role-bg-light: #F7F4EE;
  --role-bg-dark: #3B424C;
  --role-text: #3B424C;
  --role-btn-secondary-text: #3B424C;
  --role-btn-primary-text: #FFFFFF;
}

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.

{
    "dusty-rose": "#771D18",
    "terracotta": "#D98868",
    "mustard": "#F9D890",
    "sage-green": "#93A387",
    "warm-cream": "#F7F4EE",
    "deep-charcoal": "#3B424C",
    "off-white": "#FAF9F6",
    "white": "#FFFFFF"
}

Moving gradient background

Copy the animated radial gradient background from the visualizer, with this palette already applied.

Use when: you want the hero gradient effect.

<div class="colorfly-moving-gradient-bg">
  <span class="colorfly-gradient-spark" aria-hidden="true"></span>
  <div>
    <small>Motion gradient</small>
    <h2>Gradient background</h2>
    <p>A moving brand gradient built from your palette.</p>
  </div>
</div>

<style>
.colorfly-moving-gradient-bg {
  --gradient-anchor: #771D18;
  --gradient-partner: #B48380;
  --gradient-accent: #93A387;
  --gradient-text: #FFFFFF;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  overflow: hidden;
  padding: 42px;
  color: var(--gradient-text);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%),
    linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor));
  background-size: 160% 160%, 180% 180%, 240% 240%;
  animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite;
}
.colorfly-moving-gradient-bg > div {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
}
.colorfly-moving-gradient-bg::before,
.colorfly-moving-gradient-bg::after,
.colorfly-gradient-spark {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.colorfly-moving-gradient-bg::before {
  left: -10%;
  top: -18%;
  width: min(520px, 72%);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%),
    radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%);
  opacity: .86;
  animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite;
}
.colorfly-moving-gradient-bg::after {
  right: -12%;
  bottom: -24%;
  width: min(620px, 82%);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%),
    radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%);
  opacity: .78;
  animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite;
}
.colorfly-gradient-spark {
  left: 42%;
  top: 44%;
  width: min(360px, 54%);
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%);
  opacity: .46;
  animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite;
}
@keyframes colorfly-gradient-bg {
  0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; }
  18% { background-position: 44% 88%, 58% 12%, 34% 22%; }
  39% { background-position: 86% 38%, 18% 74%, 86% 64%; }
  63% { background-position: 26% 16%, 84% 92%, 42% 100%; }
  82% { background-position: 68% 68%, 32% 30%, 100% 34%; }
}
@keyframes colorfly-gradient-orb-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  22% { transform: translate3d(78%, 22%, 0) scale(1.12); }
  47% { transform: translate3d(44%, 86%, 0) scale(.92); }
  72% { transform: translate3d(112%, 56%, 0) scale(1.2); }
}
@keyframes colorfly-gradient-orb-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  19% { transform: translate3d(-48%, -18%, 0) scale(.9); }
  53% { transform: translate3d(-92%, -62%, 0) scale(1.14); }
  79% { transform: translate3d(-22%, -86%, 0) scale(.98); }
}
@keyframes colorfly-gradient-spark {
  0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); }
  28% { transform: translate3d(52%, -34%, 0) scale(1.08); }
  58% { transform: translate3d(-44%, 38%, 0) scale(.96); }
  84% { transform: translate3d(20%, 28%, 0) scale(1.18); }
}
</style>

Moving gradient text

Copy the animated gradient text treatment from the visualizer, generated from the main and support colors.

Use when: you want gradient headline text.

<div class="colorfly-gradient-text-card">
  <small>Gradient type</small>
  <h2>Gradient on text</h2>
  <p>A moving text gradient built from your palette.</p>
</div>

<style>
.colorfly-gradient-text-card {
  --gradient-text-a: #771D18;
  --gradient-text-b: #B48380;
  --gradient-text-c: #93A387;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 310px;
  overflow: hidden;
  padding: 42px;
  text-align: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%),
    linear-gradient(135deg, #fff, #fbfbfd);
}
.colorfly-gradient-text-card::before,
.colorfly-gradient-text-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}
.colorfly-gradient-text-card::before {
  left: 9%;
  top: 15%;
  width: min(330px, 48%);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%);
  animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite;
}
.colorfly-gradient-text-card::after {
  right: 7%;
  bottom: 6%;
  width: min(360px, 52%);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%);
  animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite;
}
.colorfly-gradient-text-card small,
.colorfly-gradient-text-card p {
  position: relative;
  z-index: 1;
  color: #65616d;
}
.colorfly-gradient-text-card h2 {
  position: relative;
  z-index: 1;
  margin: 10px 0 12px;
  color: transparent;
  font-size: clamp(42px, 8vw, 96px);
  line-height: .92;
  background:
    radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%),
    radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%),
    linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a));
  background-size: 220% 220%, 240% 240%, 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite;
}
@keyframes colorfly-gradient-text-shift {
  0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; }
  27% { background-position: 78% 18%, 28% 82%, 42% 50%; }
  61% { background-position: 36% 92%, 86% 24%, 100% 50%; }
  84% { background-position: 92% 48%, 18% 40%, 58% 50%; }
}
@keyframes colorfly-gradient-text-glow-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.92); }
  42% { transform: translate3d(80%, 32%, 0) scale(1.12); }
  72% { transform: translate3d(28%, 86%, 0) scale(.98); }
}
@keyframes colorfly-gradient-text-glow-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  36% { transform: translate3d(-62%, -18%, 0) scale(.9); }
  76% { transform: translate3d(-36%, -78%, 0) scale(1.12); }
}
</style>

Start with room to explore

Build your first color system

Try ColorFly with 5 free AI actions and turn your next brand direction into a palette with purpose. No credit card required.

Try it for free

Press Space to load new palette