This palette combines rich jewel tones and deep neutrals inspired by the dynamic action and intense colors in the image, delivering a bold and energetic system with strong contrast and depth suitable for brands wanting strength and vibrancy.
This palette combines rich jewel tones and deep neutrals inspired by the dynamic action and intense colors in the image, delivering a bold and energetic system with strong contrast and depth suitable for brands wanting strength and vibrancy.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The triadic relationship among deep crimson red, jade green, and antique gold creates a balanced yet energetic and memorable color system that commands attention.
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 triadic relationship among deep crimson red, jade green, and antique gold creates a balanced yet energetic and memorable color system that commands attention.
RolesLogo, Btn Primary Bg, Link
Crimson provides powerful energy and passion, ideal to evoke strength and urgency in brand elements.
#8B0000139, 0, 00, 100, 270, 100, 100, 45RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Jade Green balances the palette with a calming yet vibrant tone that complements crimson with growth and resilience associations.
#007F5F0, 127, 95165, 100, 25100, 0, 25, 50RolesHeadline
Antique Gold adds a warm, sophisticated accent that enhances visual appeal and offers a classic, prestigious feel.
#C19A6B193, 154, 10733, 41, 590, 20, 45, 24The support colors are harmonious darker and muted jewel tones, providing subtle accents and backgrounds that quietly reinforce and soften the main colors.
RolesIcon, Border, Divider, Outline
Deep Teal reinforces the green in the palette with a muted depth that adds structure and balance.
#005F560, 95, 86174, 100, 19100, 0, 9, 63RolesBg Dark
Charcoal Gray underlines contrast with a neutral dark tone that grounds the vibrant main colors.
#3D3D3D61, 61, 610, 0, 240, 0, 0, 76Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F0E6D2240, 230, 21040, 50, 880, 4, 13, 6RolesText
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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-jade-green: #007F5F;
--color-antique-gold: #C19A6B;
--color-deep-teal: #005F56;
--color-charcoal-gray: #3D3D3D;
--color-pure-white: #FFFFFF;
--color-ivory: #F0E6D2;
--color-raisin-black: #1A1A1A;
}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-btn-primary-bg: #8B0000;
--role-link: #8B0000;
--role-btn-secondary-bg: #007F5F;
--role-btn-outlined-border: #007F5F;
--role-btn-outlined-text: #007F5F;
--role-headline: #C19A6B;
--role-icon: #005F56;
--role-border: #005F56;
--role-divider: #005F56;
--role-outline: #005F56;
--role-bg-dark: #3D3D3D;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-text: #1A1A1A;
}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",
"jade-green": "#007F5F",
"antique-gold": "#C19A6B",
"deep-teal": "#005F56",
"charcoal-gray": "#3D3D3D",
"pure-white": "#FFFFFF",
"ivory": "#F0E6D2",
"raisin-black": "#1A1A1A"
}