This palette captures the muted, deep tones and occasional warm highlights found in the image, creating a distinct system with strong contrast and balance between dark and vibrant colors. The main colors provide recognizable identity through balanced hues, support colors give subtle accentuation, and neutrals offer versatile background and text options.
This palette captures the muted, deep tones and occasional warm highlights found in the image, creating a distinct system with strong contrast and balance between dark and vibrant colors. The main colors provide recognizable identity through balanced hues, support colors give subtle accentuation, and neutrals offer versatile background and text options.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine deep muted blues and greens with a surprising warm red highlight, creating a visually rich and balanced system that stands out without overpowering.
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 deep muted blues and greens with a surprising warm red highlight, creating a visually rich and balanced system that stands out without overpowering.
RolesLogo, Link, Btn Primary Bg, Headline
Charcoal Blue provides a strong, sophisticated base that conveys stability and professionalism.
#27323939, 50, 57203, 19, 1932, 12, 0, 78RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Deep Forest Green adds depth and calmness, reinforcing a natural and grounded feeling.
#3B4B4359, 75, 67150, 12, 2621, 0, 11, 71Rust Red delivers a warm accent that captures attention and energizes the palette.
#B23A3A178, 58, 580, 51, 460, 67, 67, 30The support colors extend the palette through muted, earthy tones that complement the main deep colors, providing balance and versatile use for icons, borders, and dividers.
RolesIcon, Border, Divider, Outline
Slate Gray softens the palette with a neutral accent that balances the stronger main colors without competing visually.
#606F6D96, 111, 109172, 7, 4114, 0, 2, 56Muted Umber subtly enriches the palette by offering a warm, earthy contrast that complements the rusty red highlight.
#7A5B4B122, 91, 7520, 24, 390, 25, 39, 52Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText
#0D0D0D13, 13, 130, 0, 50, 0, 0, 95RolesBg Dark
#C8C8C8200, 200, 2000, 0, 780, 0, 0, 22Copy 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-charcoal-blue: #273239;
--color-deep-forest-green: #3B4B43;
--color-rust-red: #B23A3A;
--color-slate-gray: #606F6D;
--color-muted-umber: #7A5B4B;
--color-ivory-white: #F5F5F5;
--color-charcoal-black: #0D0D0D;
--color-silver-gray: #C8C8C8;
}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: #273239;
--role-link: #273239;
--role-btn-primary-bg: #273239;
--role-headline: #273239;
--role-btn-secondary-bg: #3B4B43;
--role-btn-outlined-border: #3B4B43;
--role-btn-outlined-text: #3B4B43;
--role-icon: #606F6D;
--role-border: #606F6D;
--role-divider: #606F6D;
--role-outline: #606F6D;
--role-bg-light: #F5F5F5;
--role-btn-primary-text: #F5F5F5;
--role-btn-secondary-text: #F5F5F5;
--role-text: #0D0D0D;
--role-bg-dark: #C8C8C8;
}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.{
"charcoal-blue": "#273239",
"deep-forest-green": "#3B4B43",
"rust-red": "#B23A3A",
"slate-gray": "#606F6D",
"muted-umber": "#7A5B4B",
"ivory-white": "#F5F5F5",
"charcoal-black": "#0D0D0D",
"silver-gray": "#C8C8C8"
}