Yves Rose#C83E7E
Velvet Bordeaux#8E1F4F
Petal Tint#F2B8CF
Mist Lilac#B7A0C7
Rose Veil#E7D2DA
Palette direction

Yves Rose Inspired Color Palette

A Yves Rose-inspired system built around a fashion-forward rose signature, a deep wine anchor, and a restrained lilac accent for modern elegance. It keeps the brand recognizable while translating the website’s exact rose tone into a broader identity palette with clean, usable contrast for digital UI

MonochromaticFashion Beautyyves roserose pinkfashion beautyelegant branding
palette-preview.example
Fashion Beauty color direction

Yves Rose Inspired Color Palette

A Yves Rose-inspired system built around a fashion-forward rose signature, a deep wine anchor, and a restrained lilac accent for modern elegance. It keeps the brand recognizable while translating the website’s exact rose tone into a broader identity palette with clean, usable contrast for digital UI

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 Ink Black #111111on Petal Tint #F2B8CF11.3:1 Excellent
Logo Pure White #FFFFFFon Velvet Bordeaux #8E1F4F8.5:1 Excellent
Logo Pure White #FFFFFFon Yves Rose #C83E7E4.7:1 Strong
Logo Ink Black #111111on Pure White #FFFFFF18.9:1 Excellent
Icon color
BackgroundYves Rose#C83E7ETextPure White#FFFFFF
Primary Button4.72:1
AA

Best for the main action users should notice first.

BackgroundVelvet Bordeaux#8E1F4FTextPure White#FFFFFF
Secondary Button8.54:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextPetal Tint#F2B8CF
Outlined Button1.68:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextYves Rose#C83E7E
Text Button4.72:1
AA

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

Palette composition8 colorsMonochromatic color relationship
9:41Yves Rose Inspired 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.

CYves Rose Inspired Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors stay within a rose-to-wine family, creating a recognizable couture-like system that feels coordinated without becoming flat. The shared undertone keeps the palette cohesive while the deeper shade adds structure and premium,

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.Yves Rose #C83E7E
HeadlineUsed for main titles and key messages.Velvet Bordeaux #8E1F4F
LinkUsed for links and interactive text.Yves Rose #C83E7E

Buttons

Primary Button
BackgroundYves Rose #C83E7E
TextPure White #FFFFFF
Secondary Button
BackgroundVelvet Bordeaux #8E1F4F
TextPure White #FFFFFF
Outlined Button
BackgroundVelvet Bordeaux #8E1F4F
TextPetal Tint #F2B8CF

Interface

TextDefault readable body text.Ink Black #111111
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ink Black #111111
IconSmall interface icons and marks.Mist Lilac #B7A0C7
BorderCards, inputs, and component borders.Rose Veil #E7D2DA
DividerSubtle separators between content.Rose Veil #E7D2DA
OutlineFocus rings and emphasis outlines.Mist Lilac #B7A0C7

Palette Colors

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

Main (Brand) Colors

The main colors stay within a rose-to-wine family, creating a recognizable couture-like system that feels coordinated without becoming flat. The shared undertone keeps the palette cohesive while the deeper shade adds structure and premium,

PrimaryYves Rose

RolesLogo, Link, Btn Primary Bg

The exact signature rose used on the website; it carries instant brand recognition and gives the palette its distinct feminine energy.

HEX#C83E7E
RGB200, 62, 126
HSL332, 56, 51
CMYK0, 69, 37, 22
SecondaryVelvet Bordeaux

RolesBtn Secondary Bg, Btn Outlined Border, Headline

A deeper rose-derived anchor that adds contrast, sophistication, and a stronger editorial feel for hierarchy and buttons.

HEX#8E1F4F
RGB142, 31, 79
HSL334, 64, 34
CMYK0, 78, 44, 44
TertiaryPetal Tint

RolesBtn Outlined Text

A lighter rose tint that supports outlined usage while staying visually tied to the core brand hue.

HEX#F2B8CF
RGB242, 184, 207
HSL336, 69, 84
CMYK0, 24, 14, 5

Support Colors

The support colors extend the rose system with quiet cool and warm balance, adding usability for icons, borders, and subtle interface states without competing with the signature.”,

Mist Lilac

RolesIcon, Outline

A muted lilac accent that softens the rose palette and adds a refined, contemporary counterpoint.

HEX#B7A0C7
RGB183, 160, 199
HSL275, 26, 70
CMYK8, 20, 0, 22
Rose Veil

RolesBorder, Divider

A gentle blush-neutral support tone that keeps UI separators delicate and on-brand.

HEX#E7D2DA
RGB231, 210, 218
HSL337, 30, 86
CMYK0, 9, 6, 9

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Warm Porcelain
HEX#F7F4F2
RGB247, 244, 242
HSL24, 24, 96
CMYK0, 1, 2, 3
Ink Black

RolesBg Dark, Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

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-yves-rose: #C83E7E;
  --color-velvet-bordeaux: #8E1F4F;
  --color-petal-tint: #F2B8CF;
  --color-mist-lilac: #B7A0C7;
  --color-rose-veil: #E7D2DA;
  --color-pure-white: #FFFFFF;
  --color-warm-porcelain: #F7F4F2;
  --color-ink-black: #111111;
}

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: #C83E7E;
  --role-link: #C83E7E;
  --role-btn-primary-bg: #C83E7E;
  --role-btn-secondary-bg: #8E1F4F;
  --role-btn-outlined-border: #8E1F4F;
  --role-headline: #8E1F4F;
  --role-btn-outlined-text: #F2B8CF;
  --role-icon: #B7A0C7;
  --role-outline: #B7A0C7;
  --role-border: #E7D2DA;
  --role-divider: #E7D2DA;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
}

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.
{
    "yves-rose": "#C83E7E",
    "velvet-bordeaux": "#8E1F4F",
    "petal-tint": "#F2B8CF",
    "mist-lilac": "#B7A0C7",
    "rose-veil": "#E7D2DA",
    "pure-white": "#FFFFFF",
    "warm-porcelain": "#F7F4F2",
    "ink-black": "#111111"
}
Press Space to load new palette