Crimson Red#D01E1E
Coral Red#F15050
Rose Pink#E76C7C
Blush Pink#FBDDE0
Pure White#FFFFFF
Palette direction

Vibrant Red Stripe Color Palette

This palette is inspired by the bold and vibrant red and white stripes from the image, combining strong reds with crisp neutrals and subtle pink accents to create a dynamic and visually engaging identity. The main reds provide energetic recognition, while the support pinks and whites balance intensity with softness and clarity.

MonochromaticFashion Beautyredstripeboldvibrant
palette-preview.example
Fashion Beauty color direction

Vibrant Red Stripe Color Palette

This palette is inspired by the bold and vibrant red and white stripes from the image, combining strong reds with crisp neutrals and subtle pink accents to create a dynamic and visually engaging identity. The main reds provide energetic recognition, while the support pinks and whites balance intensity with softness and clarity.

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 Pure White #FFFFFFon Crimson Red #D01E1E5.4:1 Strong
Logo Charcoal #222222on Rose Pink #E76C7C5.2:1 Strong
Logo Charcoal #222222on Coral Red #F150504.5:1 Strong
Logo Charcoal #222222on Pure White #FFFFFF15.9:1 Excellent
Icon color
BackgroundCrimson Red#D01E1ETextSnow White#FAFAFA
Primary Button5.18:1
AA

Best for the main action users should notice first.

BackgroundCoral Red#F15050TextCharcoal#222222
Secondary Button4.55:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextRose Pink#E76C7C
Outlined Button3.07:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCrimson Red#D01E1E
Text Button5.40:1
AA

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

Palette composition8 colorsMonochromatic color relationship
9:41Vibrant Red Stripe 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.

CVibrant Red Stripe Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview

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 Red #D01E1E
HeadlineUsed for main titles and key messages.Coral Red #F15050
LinkUsed for links and interactive text.Crimson Red #D01E1E

Buttons

Primary Button
BackgroundCrimson Red #D01E1E
TextSnow White #FAFAFA
Secondary Button
BackgroundCoral Red #F15050
TextCharcoal #222222
Outlined Button
BackgroundRose Pink #E76C7C
TextRose Pink #E76C7C

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ivory White #F7F7F7
IconSmall interface icons and marks.Blush Pink #FBDDE0
BorderCards, inputs, and component borders.Blush Pink #FBDDE0
DividerSubtle separators between content.Blush Pink #FBDDE0
OutlineFocus rings and emphasis outlines.Blush Pink #FBDDE0

Palette Colors

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

Main (Brand) Colors

The main colors are bright and dynamic reds and pinks that work harmoniously to convey energy and approachability while maintaining a cohesive red-based theme.

PrimaryCrimson Red

RolesLogo, Btn Primary Bg, Link

Crimson Red is a vibrant and intense red that captures attention and conveys passion and confidence.

HEX#D01E1E
RGB208, 30, 30
HSL0, 75, 47
CMYK0, 86, 86, 18
SecondaryCoral Red

RolesBtn Secondary Bg, Headline

Coral Red provides a warmer, slightly softer red that complements the primary crimson with approachability and warmth.

HEX#F15050
RGB241, 80, 80
HSL0, 85, 63
CMYK0, 67, 67, 5
TertiaryRose Pink

RolesBtn Outlined Border, Btn Outlined Text

Rose Pink is a muted pink accent that offers contrast without overpowering, adding softness and balance to the red hues.

HEX#E76C7C
RGB231, 108, 124
HSL352, 72, 66
CMYK0, 53, 46, 9

Support Colors

The support colors extend the palette with soft and muted pinks and gentle white hues that accentuate and balance the strong reds, ensuring visual harmony and usability.

Blush Pink

RolesBorder, Divider, Outline, Icon

Blush Pink complements the main reds by adding subtle softness and highlights that support without distracting.

HEX#FBDDE0
RGB251, 221, 224
HSL354, 79, 93
CMYK0, 12, 11, 2
Pure White

RolesBg Light

Pure White provides clean contrast and a bright background, enhancing clarity and readability.

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

Neutral Colors

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

Charcoal

RolesText, Btn Secondary Text

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87
Ivory White

RolesBg Dark

HEX#F7F7F7
RGB247, 247, 247
HSL0, 0, 97
CMYK0, 0, 0, 3
Snow White

RolesBtn Primary Text

HEX#FAFAFA
RGB250, 250, 250
HSL0, 0, 98
CMYK0, 0, 0, 2

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-red: #D01E1E;
  --color-coral-red: #F15050;
  --color-rose-pink: #E76C7C;
  --color-blush-pink: #FBDDE0;
  --color-pure-white: #FFFFFF;
  --color-charcoal: #222222;
  --color-ivory-white: #F7F7F7;
  --color-snow-white: #FAFAFA;
}

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: #D01E1E;
  --role-btn-primary-bg: #D01E1E;
  --role-link: #D01E1E;
  --role-btn-secondary-bg: #F15050;
  --role-headline: #F15050;
  --role-btn-outlined-border: #E76C7C;
  --role-btn-outlined-text: #E76C7C;
  --role-border: #FBDDE0;
  --role-divider: #FBDDE0;
  --role-outline: #FBDDE0;
  --role-icon: #FBDDE0;
  --role-bg-light: #FFFFFF;
  --role-text: #222222;
  --role-btn-secondary-text: #222222;
  --role-bg-dark: #F7F7F7;
  --role-btn-primary-text: #FAFAFA;
}

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-red": "#D01E1E",
    "coral-red": "#F15050",
    "rose-pink": "#E76C7C",
    "blush-pink": "#FBDDE0",
    "pure-white": "#FFFFFF",
    "charcoal": "#222222",
    "ivory-white": "#F7F7F7",
    "snow-white": "#FAFAFA"
}
Press Space to load new palette