This palette combines vibrant Crimson and Forest Green as main colors, balanced by softer Slate and charcoal tones supporting accessibility and clarity within a clean white background. The blend gives powerful brand recognition with contrasting warm and cool hues to energize and calm, making a versatile, professional identity.
This palette combines vibrant Crimson and Forest Green as main colors, balanced by softer Slate and charcoal tones supporting accessibility and clarity within a clean white background. The blend gives powerful brand recognition with contrasting warm and cool hues to energize and calm, making a versatile, professional identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine the warmth of Crimson with the natural depth of Forest Green, creating a bold complementary contrast that anchors the brand with energy and reliability.
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 combine the warmth of Crimson with the natural depth of Forest Green, creating a bold complementary contrast that anchors the brand with energy and reliability.
RolesLogo, Btn Primary Bg, Link, Btn Outlined Border, Btn Outlined Text
Crimson contributes vibrancy and passion, ideal for drawing attention to key brand elements like logo and calls to action.
#DC143C220, 20, 60348, 83, 470, 91, 73, 14RolesHeadline, Btn Secondary Bg
Forest Green adds calm and trustworthiness, grounding headlines with a stable, natural presence.
#228B2234, 139, 34120, 61, 3476, 0, 76, 45Slate Gray and Charcoal support colors provide softer visual accents that balance the vivid main colors, enhancing usability especially for interface elements like borders and icons without overwhelming the overall composition.
RolesIcon, Border, Divider, Outline
Slate Gray introduces a cool, muted contrast that complements the warmth of Crimson while maintaining subtlety in interface accents.
#708090112, 128, 144210, 13, 5022, 11, 0, 44Charcoal offers a dark neutral tone that provides comfortable readability for secondary button text against lighter backgrounds.
#36454F54, 69, 79204, 19, 2632, 13, 0, 69Utility 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
#1C1C1C28, 28, 280, 0, 110, 0, 0, 89Copy 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: #DC143C;
--color-forest-green: #228B22;
--color-slate-gray: #708090;
--color-charcoal: #36454F;
--color-white: #FFFFFF;
--color-cultured: #F5F5F5;
--color-eerie-black: #1C1C1C;
}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: #DC143C;
--role-btn-primary-bg: #DC143C;
--role-link: #DC143C;
--role-btn-outlined-border: #DC143C;
--role-btn-outlined-text: #DC143C;
--role-headline: #228B22;
--role-btn-secondary-bg: #228B22;
--role-icon: #708090;
--role-border: #708090;
--role-divider: #708090;
--role-outline: #708090;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #1C1C1C;
}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": "#DC143C",
"forest-green": "#228B22",
"slate-gray": "#708090",
"charcoal": "#36454F",
"white": "#FFFFFF",
"cultured": "#F5F5F5",
"eerie-black": "#1C1C1C"
}