Burgundy#5C1A2E
Linen#D7C9B6
Cream#F5F0E6
Mink#A19283
Sandstone#C4B9A0
Palette direction

Fly bird

This palette draws inspiration from the deep burgundy background and the intricate cream and off-white floral patterns in the image, creating a sophisticated and elegant color system. The main colors provide a rich and warm foundation, while the support colors extend the palette with subtle, complementary tones that enhance the natural, classic feel.

AnalogousLuxury And Lifestyleburgundycreamoff-whitelinen
fly-bird.com
Luxury And Lifestyle color direction

Fly bird

This palette draws inspiration from the deep burgundy background and the intricate cream and off-white floral patterns in the image, creating a sophisticated and elegant color system. The main colors provide a rich and warm foundation, while the support colors extend the palette with subtle, complementary tones that enhance the natural, classic feel.

Explore the color systemView examplesGuidelines8 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 White #FFFFFF
on Burgundy #5C1A2E

12.8:1 Excellent

Logo Charcoal #2E2E2E
on Cream #F5F0E6

12.0:1 Excellent

Logo Charcoal #2E2E2E
on Linen #D7C9B6

8.4:1 Excellent

Logo Charcoal #2E2E2E
on Sandstone #C4B9A0

7.0:1 Strong
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.

Luxury And Lifestyle Fly bird

The main colors marry a rich burgundy with gentle beige and cream shades, evoking warmth and elegance while maintaining a harmonious natural flow.

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
Signals8Analogous
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.Burgundy #5C1A2E
HeadlineUsed for main titles and key messages.Burgundy #5C1A2E
LinkUsed for links and interactive text.Burgundy #5C1A2E

Buttons

Primary Button
Contrast12.79:1AA
BackgroundBurgundy #5C1A2E
TextWhite #FFFFFF
Secondary Button
Contrast8.35:1AA
BackgroundLinen #D7C9B6
TextCharcoal #2E2E2E
Outlined Button
Contrast1.43:1Low
BorderLinen #D7C9B6
TextLinen #D7C9B6

Interface

TextDefault readable body text.Charcoal #2E2E2E
Bg LightLight page or section background.Cream #F5F0E6
Bg DarkDark page or section background.Off White #F4F4F4
IconSmall interface icons and marks.Mink #A19283
BorderCards, inputs, and component borders.Mink #A19283
DividerSubtle separators between content.Mink #A19283
OutlineFocus rings and emphasis outlines.Mink #A19283

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
BurgundyMain color - #5C1A2E
Calculated CMYK
LinenMain color - #D7C9B6
Calculated CMYK
CreamMain color - #F5F0E6
Calculated CMYK
MinkSupport color - #A19283
Calculated CMYK
SandstoneSupport color - #C4B9A0
Calculated CMYK
WhiteNeutral color - #FFFFFF
Calculated CMYK
Off WhiteNeutral color - #F4F4F4
Calculated CMYK
CharcoalNeutral color - #2E2E2E

Palette Colors

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

Main (Brand) Colors

The main colors marry a rich burgundy with gentle beige and cream shades, evoking warmth and elegance while maintaining a harmonious natural flow.

PrimaryBurgundy

RolesLogo, Link, Btn Primary Bg, Headline

Burgundy sets a deep, sophisticated tone that conveys luxury and stability.

HEX#5C1A2E
RGB92, 26, 46
HSL342, 56, 23
CMYK0, 72, 50, 64
SecondaryLinen

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Linen offers a soft, understated warmth that balances the richness of burgundy.

HEX#D7C9B6
RGB215, 201, 182
HSL35, 29, 78
CMYK0, 7, 15, 16
TertiaryCream

RolesBg Light

Cream brings brightness and subtle elegance, enhancing readability and visual softness.

HEX#F5F0E6
RGB245, 240, 230
HSL40, 43, 93
CMYK0, 2, 6, 4

Support Colors

Support colors extend the palette with muted pastels and natural tones that complement and soften the main colors, enhancing usability and balance while remaining visually subordinate.

Mink

RolesIcon, Border, Divider, Outline

Mink adds a neutral, muted earth tone that supports and balances the stronger colors without competing.

HEX#A19283
RGB161, 146, 131
HSL30, 14, 57
CMYK0, 9, 19, 37
Sandstone

Sandstone complements linen with a gentle warmth and creates subtle visual transitions.

HEX#C4B9A0
RGB196, 185, 160
HSL42, 23, 70
CMYK0, 6, 18, 23

Neutral Colors

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

White

RolesBtn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Off White

RolesBg Dark

HEX#F4F4F4
RGB244, 244, 244
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Secondary Text

HEX#2E2E2E
RGB46, 46, 46
HSL0, 0, 18
CMYK0, 0, 0, 82

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": "Burgundy",
            "hex": "#5C1A2E",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 72,
                "y": 50,
                "k": 64,
                "source": "colorfly"
            }
        },
        {
            "name": "Linen",
            "hex": "#D7C9B6",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 7,
                "y": 15,
                "k": 16,
                "source": "colorfly"
            }
        },
        {
            "name": "Cream",
            "hex": "#F5F0E6",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 2,
                "y": 6,
                "k": 4,
                "source": "colorfly"
            }
        },
        {
            "name": "Mink",
            "hex": "#A19283",
            "role": "support",
            "cmyk": {
                "c": 0,
                "m": 9,
                "y": 19,
                "k": 37,
                "source": "colorfly"
            }
        },
        {
            "name": "Sandstone",
            "hex": "#C4B9A0",
            "role": "support",
            "cmyk": {
                "c": 0,
                "m": 6,
                "y": 18,
                "k": 23,
                "source": "colorfly"
            }
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 0,
                "source": "colorfly"
            }
        },
        {
            "name": "Off White",
            "hex": "#F4F4F4",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 4,
                "source": "colorfly"
            }
        },
        {
            "name": "Charcoal",
            "hex": "#2E2E2E",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 82,
                "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-burgundy: #5C1A2E;
  --color-linen: #D7C9B6;
  --color-cream: #F5F0E6;
  --color-mink: #A19283;
  --color-sandstone: #C4B9A0;
  --color-white: #FFFFFF;
  --color-off-white: #F4F4F4;
  --color-charcoal: #2E2E2E;
}

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: #5C1A2E;
  --role-link: #5C1A2E;
  --role-btn-primary-bg: #5C1A2E;
  --role-headline: #5C1A2E;
  --role-btn-secondary-bg: #D7C9B6;
  --role-btn-outlined-border: #D7C9B6;
  --role-btn-outlined-text: #D7C9B6;
  --role-bg-light: #F5F0E6;
  --role-icon: #A19283;
  --role-border: #A19283;
  --role-divider: #A19283;
  --role-outline: #A19283;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F4F4F4;
  --role-text: #2E2E2E;
  --role-btn-secondary-text: #2E2E2E;
}

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.
{
    "burgundy": "#5C1A2E",
    "linen": "#D7C9B6",
    "cream": "#F5F0E6",
    "mink": "#A19283",
    "sandstone": "#C4B9A0",
    "white": "#FFFFFF",
    "off-white": "#F4F4F4",
    "charcoal": "#2E2E2E"
}

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: #5C1A2E;
  --gradient-partner: #A5818C;
  --gradient-accent: #A19283;
  --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: #5C1A2E;
  --gradient-text-b: #A5818C;
  --gradient-text-c: #A19283;
  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