This palette draws from the vibrant, woven textile colors featuring bold red, lush green, and vivid magenta as main colors, balanced by softer teal and coral support tones, anchored by neutral off-white, warm beige, and deep charcoal shades for versatile use.
This palette draws from the vibrant, woven textile colors featuring bold red, lush green, and vivid magenta as main colors, balanced by softer teal and coral support tones, anchored by neutral off-white, warm beige, and deep charcoal shades for versatile use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a split-complementary scheme pairing strong red with green and magenta, delivering high contrast and lively vibrancy that creates a recognizable and striking visual identity.
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 form a split-complementary scheme pairing strong red with green and magenta, delivering high contrast and lively vibrancy that creates a recognizable and striking visual identity.
RolesLogo, Link, Btn Primary Bg
Crimson provides passionate energy and strong presence as the primary brand color.
#D32F2F211, 47, 470, 65, 510, 78, 78, 17RolesBtn Secondary Bg
Forest Green offers a grounding natural balance and calm contrast to red.
#2E7D3246, 125, 50123, 46, 3463, 0, 60, 51RolesHeadline, Btn Outlined Border, Btn Outlined Text
Magenta adds dynamic vibrancy and visual interest to headlines and outlines.
#C2185B194, 24, 91336, 78, 430, 88, 53, 24Support colors enrich the palette with subtle coral and teal shades that complement the main colors, enhancing balance and depth without overpowering the primary hues.
RolesIcon, Border, Divider, Outline
Teal lends a cool, calming accent that complements the warm reds and greens.
#0096880, 150, 136174, 100, 29100, 0, 9, 41Coral introduces warmth and softness that balances the intensity of the magenta and crimson.
#FF6F61255, 111, 975, 100, 690, 56, 62, 0Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText
#26323838, 50, 56200, 19, 1832, 11, 0, 78Copy 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: #D32F2F;
--color-forest-green: #2E7D32;
--color-magenta: #C2185B;
--color-teal: #009688;
--color-coral: #FF6F61;
--color-ivory: #FFFFFF;
--color-almond: #F5F5F5;
--color-charcoal: #263238;
}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: #D32F2F;
--role-link: #D32F2F;
--role-btn-primary-bg: #D32F2F;
--role-btn-secondary-bg: #2E7D32;
--role-headline: #C2185B;
--role-btn-outlined-border: #C2185B;
--role-btn-outlined-text: #C2185B;
--role-icon: #009688;
--role-border: #009688;
--role-divider: #009688;
--role-outline: #009688;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #263238;
}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": "#D32F2F",
"forest-green": "#2E7D32",
"magenta": "#C2185B",
"teal": "#009688",
"coral": "#FF6F61",
"ivory": "#FFFFFF",
"almond": "#F5F5F5",
"charcoal": "#263238"
}