This palette draws inspiration from the image's high-contrast monochrome scheme with a hint of warmth, combining bold dark tones with soft neutral shades and subtle accents to create a professional yet inviting identity.
This palette draws inspiration from the image's high-contrast monochrome scheme with a hint of warmth, combining bold dark tones with soft neutral shades and subtle accents to create a professional yet inviting identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors balance boldness and warmth with a deep charcoal black, a bright ivory, and a muted mustard yellow, forming a triadic harmony that is visually striking and memorable.
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 balance boldness and warmth with a deep charcoal black, a bright ivory, and a muted mustard yellow, forming a triadic harmony that is visually striking and memorable.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Charcoal delivers strong professionalism and depth that anchors the palette with a sleek, modern feel.
#2E2E2E46, 46, 460, 0, 180, 0, 0, 82RolesBtn Outlined Text
Ivory provides clean brightness and clarity, ensuring maximum readability and contrast against dark backgrounds.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Secondary Bg, Headline, Link
Mustard adds a warm, inviting accent that energizes the palette without overwhelming, perfect for highlights and calls to action.
#D7A93F215, 169, 6342, 66, 550, 21, 71, 16The support colors softly extend the palette by introducing subtle warm browns and soft grays that complement and balance the strong main colors.
RolesIcon, Border, Divider, Outline
Warm Tan complements the mustard by toning down saturation, providing a gentle, grounded support for accents and UI elements.
#BFA060191, 160, 9640, 43, 560, 16, 50, 25Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#F9F9F9249, 249, 2490, 0, 980, 0, 0, 2RolesBg Dark
#39393957, 57, 570, 0, 220, 0, 0, 78RolesText, Btn Secondary Text
#1B1B1B27, 27, 270, 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-charcoal: #2E2E2E;
--color-ivory: #FFFFFF;
--color-mustard: #D7A93F;
--color-warm-tan: #BFA060;
--color-cultured-white: #F9F9F9;
--color-outer-space: #393939;
--color-ebony: #1B1B1B;
}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: #2E2E2E;
--role-btn-primary-bg: #2E2E2E;
--role-btn-outlined-border: #2E2E2E;
--role-btn-outlined-text: #FFFFFF;
--role-btn-secondary-bg: #D7A93F;
--role-headline: #D7A93F;
--role-link: #D7A93F;
--role-icon: #BFA060;
--role-border: #BFA060;
--role-divider: #BFA060;
--role-outline: #BFA060;
--role-bg-light: #F9F9F9;
--role-btn-primary-text: #F9F9F9;
--role-bg-dark: #393939;
--role-text: #1B1B1B;
--role-btn-secondary-text: #1B1B1B;
}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": "#2E2E2E",
"ivory": "#FFFFFF",
"mustard": "#D7A93F",
"warm-tan": "#BFA060",
"cultured-white": "#F9F9F9",
"outer-space": "#393939",
"ebony": "#1B1B1B"
}