Blush Pink#F7D9DD
Golden Peach#FFD8B1
Fresh Green#A4CBB7
Creamy Ivory#F9F4E9
Soft Green#DFE8D7
Muted Apricot#F4D7C0
Palette direction

annti

This premium body mist palette uses soft, pastel main colors inspired by nature's elegance combined with subtle muted accents to enhance freshness and luxury, balanced by clean neutral tones for modern minimalism and legibility.

ComplementaryFashion Beautypastelnature-inspiredpremium beautybody mist
annti.com
Fashion Beauty color direction

annti

This premium body mist palette uses soft, pastel main colors inspired by nature's elegance combined with subtle muted accents to enhance freshness and luxury, balanced by clean neutral tones for modern minimalism and legibility.

Explore the color systemView examplesGuidelines9 colors mapped to roles
Logo contrast guide

Logo color pairings

Each column shows a usable logo color on a palette background, with contrast checked for clarity.

Logo Charcoal #2C2C2C
on Blush Pink #F7D9DD

10.6:1 Excellent

Logo Charcoal #2C2C2C
on Golden Peach #FFD8B1

10.4:1 Excellent

Logo Charcoal #2C2C2C
on Fresh Green #A4CBB7

7.9:1 Excellent

Logo Charcoal #2C2C2C
on Pure White #FFFFFF

14.0:1 Excellent
Motion gradient

Gradient background

Built from the main brand color and one generated shade, so the effect feels modern without leaving the palette.

Business card

Printed materials without guessing.

A neutral card system with the logo color, contact text, and a restrained palette accent.

Avery Stone Palette designer avery@example.com colorfly.design
Mobile website

The palette has to survive the small screen.

A mobile landing page preview with logo, navigation, headline, CTA, content card, and chart color usage.

Fashion Beauty annti

The main colors combine soft blush pink, warm golden peach, and fresh green to evoke natural floral and citrus scents harmoniously in a pastel scheme, supporting an elegant and refreshing brand identity.

Gradient type

Gradient on text

A cleaner way to use the brand color as a digital accent without turning the whole interface colorful.

Analytics system

Dashboards need more than one pretty color.

Numbers, pie charts, bars, stacked bars, and lines reveal whether the palette can support real product interfaces.

Revenue$84.2k+18.4%
Retention72%Stable
Signals9Complementary
Audience split
Monthly growth
Trend line

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

Buttons

Primary Button
Contrast10.59:1AA
BackgroundBlush Pink #F7D9DD
TextCharcoal #2C2C2C
Secondary Button
Contrast10.45:1AA
BackgroundGolden Peach #FFD8B1
TextCharcoal #2C2C2C
Outlined Button
Contrast1.32:1Low
BorderBlush Pink #F7D9DD
TextBlush Pink #F7D9DD

Interface

TextDefault readable body text.Charcoal #2C2C2C
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Light Gray #F7F7F7
IconSmall interface icons and marks.Creamy Ivory #F9F4E9
BorderCards, inputs, and component borders.Creamy Ivory #F9F4E9
DividerSubtle separators between content.Creamy Ivory #F9F4E9
OutlineFocus rings and emphasis outlines.Creamy Ivory #F9F4E9

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.
Calculated CMYK
Blush PinkMain color - #F7D9DD
Calculated CMYK
Golden PeachMain color - #FFD8B1
Calculated CMYK
Fresh GreenMain color - #A4CBB7
Calculated CMYK
Creamy IvorySupport color - #F9F4E9
Calculated CMYK
Soft GreenSupport color - #DFE8D7
Calculated CMYK
Muted ApricotSupport color - #F4D7C0
Calculated CMYK
Pure WhiteNeutral color - #FFFFFF
Calculated CMYK
Light GrayNeutral color - #F7F7F7
Calculated CMYK
CharcoalNeutral color - #2C2C2C

Palette Colors

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

Main (Brand) Colors

The main colors combine soft blush pink, warm golden peach, and fresh green to evoke natural floral and citrus scents harmoniously in a pastel scheme, supporting an elegant and refreshing brand identity.

PrimaryBlush Pink

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

Blush Pink introduces delicate femininity and softness, reflecting the Rose scent's romantic and elegant character.

HEX#F7D9DD
RGB247, 217, 221
HSL352, 65, 91
CMYK0, 12, 11, 3
SecondaryGolden Peach

RolesBtn Secondary Bg

Golden Peach adds warmth and subtle vibrancy, conveying inviting freshness found in fruity and citrus notes like Orange and Lemon.

HEX#FFD8B1
RGB255, 216, 177
HSL30, 100, 85
CMYK0, 15, 31, 0
TertiaryFresh Green

Fresh Green evokes natural botanical elements and calming freshness, inspired by Aloe Vera and enhancing the brand's nature focus.

HEX#A4CBB7
RGB164, 203, 183
HSL149, 27, 72
CMYK19, 0, 10, 20

Support Colors

Support colors provide gentle creamy ivory, softened yellow-green, and muted apricot tones that complement and balance the pastels without overpowering, maintaining brand cohesiveness across visuals.

Creamy Ivory

RolesIcon, Border, Divider, Outline

Creamy Ivory supplements the palette with warm, natural softness that supports the elegant and fresh feeling throughout visual elements.

HEX#F9F4E9
RGB249, 244, 233
HSL41, 57, 95
CMYK0, 2, 6, 2
Soft Green

Soft Green offers a subtle botanical echo of Fresh Green, enhancing freshness while remaining understated to keep attention on main colors.

HEX#DFE8D7
RGB223, 232, 215
HSL92, 27, 88
CMYK4, 0, 7, 9
Muted Apricot

Muted Apricot balances the palette with a warm, light tone that supports Golden Peach's vibrancy quietly, adding depth to interface details.

HEX#F4D7C0
RGB244, 215, 192
HSL27, 70, 85
CMYK0, 12, 21, 4

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Gray

RolesBg Dark

HEX#F7F7F7
RGB247, 247, 247
HSL0, 0, 97
CMYK0, 0, 0, 3
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2C2C2C
RGB44, 44, 44
HSL0, 0, 17
CMYK0, 0, 0, 83

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": "Blush Pink",
            "hex": "#F7D9DD",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 12,
                "y": 11,
                "k": 3,
                "source": "colorfly"
            }
        },
        {
            "name": "Golden Peach",
            "hex": "#FFD8B1",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 15,
                "y": 31,
                "k": 0,
                "source": "colorfly"
            }
        },
        {
            "name": "Fresh Green",
            "hex": "#A4CBB7",
            "role": "main",
            "cmyk": {
                "c": 19,
                "m": 0,
                "y": 10,
                "k": 20,
                "source": "colorfly"
            }
        },
        {
            "name": "Creamy Ivory",
            "hex": "#F9F4E9",
            "role": "support",
            "cmyk": {
                "c": 0,
                "m": 2,
                "y": 6,
                "k": 2,
                "source": "colorfly"
            }
        },
        {
            "name": "Soft Green",
            "hex": "#DFE8D7",
            "role": "support",
            "cmyk": {
                "c": 4,
                "m": 0,
                "y": 7,
                "k": 9,
                "source": "colorfly"
            }
        },
        {
            "name": "Muted Apricot",
            "hex": "#F4D7C0",
            "role": "support",
            "cmyk": {
                "c": 0,
                "m": 12,
                "y": 21,
                "k": 4,
                "source": "colorfly"
            }
        },
        {
            "name": "Pure White",
            "hex": "#FFFFFF",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 0,
                "source": "colorfly"
            }
        },
        {
            "name": "Light Gray",
            "hex": "#F7F7F7",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 3,
                "source": "colorfly"
            }
        },
        {
            "name": "Charcoal",
            "hex": "#2C2C2C",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 83,
                "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-blush-pink: #F7D9DD;
  --color-golden-peach: #FFD8B1;
  --color-fresh-green: #A4CBB7;
  --color-creamy-ivory: #F9F4E9;
  --color-soft-green: #DFE8D7;
  --color-muted-apricot: #F4D7C0;
  --color-pure-white: #FFFFFF;
  --color-light-gray: #F7F7F7;
  --color-charcoal: #2C2C2C;
}

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: #F7D9DD;
  --role-link: #F7D9DD;
  --role-btn-primary-bg: #F7D9DD;
  --role-btn-outlined-border: #F7D9DD;
  --role-btn-outlined-text: #F7D9DD;
  --role-headline: #F7D9DD;
  --role-btn-secondary-bg: #FFD8B1;
  --role-icon: #F9F4E9;
  --role-border: #F9F4E9;
  --role-divider: #F9F4E9;
  --role-outline: #F9F4E9;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F7F7F7;
  --role-text: #2C2C2C;
  --role-btn-primary-text: #2C2C2C;
  --role-btn-secondary-text: #2C2C2C;
}

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.
{
    "blush-pink": "#F7D9DD",
    "golden-peach": "#FFD8B1",
    "fresh-green": "#A4CBB7",
    "creamy-ivory": "#F9F4E9",
    "soft-green": "#DFE8D7",
    "muted-apricot": "#F4D7C0",
    "pure-white": "#FFFFFF",
    "light-gray": "#F7F7F7",
    "charcoal": "#2C2C2C"
}

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: #F7D9DD;
  --gradient-partner: #9E8B8D;
  --gradient-accent: #F9F4E9;
  --gradient-text: #000000;
  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: #8F7E80;
  --gradient-text-b: #9E8B8D;
  --gradient-text-c: #95928C;
  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>
Press Space to load new palette