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.
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 systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
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.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
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.
RolesLogo, Btn Primary Bg, Link
Crimson Red is a vibrant and intense red that captures attention and conveys passion and confidence.
#D01E1E208, 30, 300, 75, 470, 86, 86, 18RolesBtn Secondary Bg, Headline
Coral Red provides a warmer, slightly softer red that complements the primary crimson with approachability and warmth.
#F15050241, 80, 800, 85, 630, 67, 67, 5RolesBtn 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.
#E76C7C231, 108, 124352, 72, 660, 53, 46, 9The 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.
RolesBorder, Divider, Outline, Icon
Blush Pink complements the main reds by adding subtle softness and highlights that support without distracting.
#FBDDE0251, 221, 224354, 79, 930, 12, 11, 2RolesBg Light
Pure White provides clean contrast and a bright background, enhancing clarity and readability.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0Utility colors for backgrounds, text, borders, and balance.
RolesText, Btn Secondary Text
#22222234, 34, 340, 0, 130, 0, 0, 87RolesBg Dark
#F7F7F7247, 247, 2470, 0, 970, 0, 0, 3RolesBtn Primary Text
#FAFAFA250, 250, 2500, 0, 980, 0, 0, 2Copy palette values for design systems, websites, and client handoff.
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;
}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;
}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"
}