This palette channels the richness and elegance of the image's deep reds and pinks, balanced with creamy and dark neutrals to create a harmonious and sophisticated color system.
This palette channels the richness and elegance of the image's deep reds and pinks, balanced with creamy and dark neutrals to create a harmonious and sophisticated color system.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors use an analogous scheme of deep crimson, muted rose, and burgundy shades that together evoke passion, elegance, and depth, creating a unified and memorable brand presence.
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 use an analogous scheme of deep crimson, muted rose, and burgundy shades that together evoke passion, elegance, and depth, creating a unified and memorable brand presence.
RolesLogo, Link, Btn Primary Bg, Headline
Crimson delivers a powerful and passionate presence, ideal for high-impact brand recognition.
#8B0000139, 0, 00, 100, 270, 100, 100, 45RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Rose Dust adds softness and approachability, balancing the intensity of deeper reds.
#C08081192, 128, 129359, 34, 630, 33, 33, 25Burgundy contributes a grounded richness that deepens the palette's luxury feel.
#5C0B1F92, 11, 31345, 79, 200, 88, 66, 64The support colors subtly extend the palette with variations of cream and warm browns, reinforcing the main reds with quieter, neutral accents.
RolesIcon, Border, Divider, Outline
Antique White complements the deep reds by providing a gentle, warm contrast that maintains elegance.
#F5E1DC245, 225, 22012, 56, 910, 8, 10, 4RolesBg Light
Chestnut offers a muted, earthy tone to balance the vibrant main colors without overpowering them.
#7E3B3B126, 59, 590, 36, 360, 53, 53, 51Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#FAF7F5250, 247, 24524, 33, 970, 1, 2, 2RolesText, Btn Secondary Text
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83Copy 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: #8B0000;
--color-rose-dust: #C08081;
--color-burgundy: #5C0B1F;
--color-antique-white: #F5E1DC;
--color-chestnut: #7E3B3B;
--color-pure-white: #FFFFFF;
--color-ivory: #FAF7F5;
--color-charcoal: #2B2B2B;
}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: #8B0000;
--role-link: #8B0000;
--role-btn-primary-bg: #8B0000;
--role-headline: #8B0000;
--role-btn-secondary-bg: #C08081;
--role-btn-outlined-border: #C08081;
--role-btn-outlined-text: #C08081;
--role-icon: #F5E1DC;
--role-border: #F5E1DC;
--role-divider: #F5E1DC;
--role-outline: #F5E1DC;
--role-bg-light: #7E3B3B;
--role-bg-dark: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-text: #2B2B2B;
--role-btn-secondary-text: #2B2B2B;
}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": "#8B0000",
"rose-dust": "#C08081",
"burgundy": "#5C0B1F",
"antique-white": "#F5E1DC",
"chestnut": "#7E3B3B",
"pure-white": "#FFFFFF",
"ivory": "#FAF7F5",
"charcoal": "#2B2B2B"
}