Crimson#FF7B24
Magenta#DE2C77
Teal#11888A
Warm Gold#BDA15E
Medium Gray#8E8D8C
Palette direction

Vibrant Embroidered Texture Color Palette

This palette is inspired by the vibrant and textured embroidery details on a neutral woven surface, creating a balance of vivid accent colors and soft natural backgrounds. It showcases strong red, magenta, and teal as main colors that convey energy and creativity, supported by warm gold and soft medium gray accents, while grounding in a refined neutral trio for clarity and readability.

ComplementaryCreativevibrantembroideredtexturedcreative
palette-preview.example
Creative color direction

Vibrant Embroidered Texture Color Palette

This palette is inspired by the vibrant and textured embroidery details on a neutral woven surface, creating a balance of vivid accent colors and soft natural backgrounds. It showcases strong red, magenta, and teal as main colors that convey energy and creativity, supported by warm gold and soft medium gray accents, while grounding in a refined neutral trio for clarity and readability.

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 #2B2B2Bon Crimson #FF7B245.5:1 Strong
Logo Charcoal #2B2B2Bon White #FFFFFF14.2:1 Excellent
Logo White #FFFFFFon Charcoal #2B2B2B14.2:1 Excellent
Logo Charcoal #2B2B2Bon Warm Gold #BDA15E5.7:1 Strong
Icon color
BackgroundCrimson#FF7B24TextWhite#FFFFFF
Primary Button2.59:1
Low

Best for the main action users should notice first.

BackgroundMagenta#DE2C77TextWhite#FFFFFF
Secondary Button4.44:1
Large text

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCrimson#FF7B24
Outlined Button2.59:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCrimson#FF7B24
Text Button2.59:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Vibrant Embroidered Texture Color Palette Color role balance
Complementary 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.

CVibrant Embroidered Texture Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine vivid red, magenta, and teal, each distinctive yet harmonizing through saturated intensity and balanced warmth and coolness, creating a recognizable and dynamic visual identity.

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.Crimson #FF7B24
HeadlineUsed for main titles and key messages.Teal #11888A
LinkUsed for links and interactive text.Crimson #FF7B24

Buttons

Primary Button
BackgroundCrimson #FF7B24
TextWhite #FFFFFF
Secondary Button
BackgroundMagenta #DE2C77
TextWhite #FFFFFF
Outlined Button
BackgroundCrimson #FF7B24
TextCrimson #FF7B24

Interface

TextDefault readable body text.Charcoal #2B2B2B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F7F5F2
IconSmall interface icons and marks.Warm Gold #BDA15E
BorderCards, inputs, and component borders.Warm Gold #BDA15E
DividerSubtle separators between content.Warm Gold #BDA15E
OutlineFocus rings and emphasis outlines.Warm Gold #BDA15E

Palette Colors

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

Main (Brand) Colors

The main colors combine vivid red, magenta, and teal, each distinctive yet harmonizing through saturated intensity and balanced warmth and coolness, creating a recognizable and dynamic visual identity.

PrimaryCrimson

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

Crimson injects passion and strength, driving attention and brand recognition with its bold warmth.

HEX#FF7B24
RGB255, 123, 36
HSL24, 100, 57
CMYK0, 52, 86, 0
SecondaryMagenta

RolesBtn Secondary Bg

Magenta adds vibrancy and creative energy, energizing secondary interactive elements with its lively presence.

HEX#DE2C77
RGB222, 44, 119
HSL335, 73, 52
CMYK0, 80, 46, 13
TertiaryTeal

RolesHeadline

Teal provides a refreshing contrast and cool sophistication, grounding the palette with its calm intensity.

HEX#11888A
RGB17, 136, 138
HSL181, 78, 30
CMYK88, 1, 0, 46

Support Colors

The support colors extend the vibrant main palette with a warm muted gold and soft medium gray, adding warmth and subtle balance while keeping the focus on the main colors.

Warm Gold

RolesIcon, Border, Divider, Outline

Warm Gold introduces a quiet encouragement and natural earthiness that complements red and teal without competition.

HEX#BDA15E
RGB189, 161, 94
HSL42, 42, 55
CMYK0, 15, 50, 26
Medium Gray

Medium Gray stabilizes the color system with neutral balance and soft contrast suitable for interface elements.

HEX#8E8D8C
RGB142, 141, 140
HSL30, 1, 55
CMYK0, 1, 1, 44

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

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

RolesBg Dark

HEX#F7F5F2
RGB247, 245, 242
HSL36, 24, 96
CMYK0, 1, 2, 3
Charcoal

RolesText

HEX#2B2B2B
RGB43, 43, 43
HSL0, 0, 17
CMYK0, 0, 0, 83

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-crimson: #FF7B24;
  --color-magenta: #DE2C77;
  --color-teal: #11888A;
  --color-warm-gold: #BDA15E;
  --color-medium-gray: #8E8D8C;
  --color-white: #FFFFFF;
  --color-ivory: #F7F5F2;
  --color-charcoal: #2B2B2B;
}

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: #FF7B24;
  --role-link: #FF7B24;
  --role-btn-primary-bg: #FF7B24;
  --role-btn-outlined-border: #FF7B24;
  --role-btn-outlined-text: #FF7B24;
  --role-btn-secondary-bg: #DE2C77;
  --role-headline: #11888A;
  --role-icon: #BDA15E;
  --role-border: #BDA15E;
  --role-divider: #BDA15E;
  --role-outline: #BDA15E;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F7F5F2;
  --role-text: #2B2B2B;
}

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.
{
    "crimson": "#FF7B24",
    "magenta": "#DE2C77",
    "teal": "#11888A",
    "warm-gold": "#BDA15E",
    "medium-gray": "#8E8D8C",
    "white": "#FFFFFF",
    "ivory": "#F7F5F2",
    "charcoal": "#2B2B2B"
}
Press Space to load new palette