This palette draws from warm earth tones and natural neutrals to evoke a grounded, inviting, and elegant brand identity, balancing rich brown with warm beige and ivory, enhanced by soft complementary accents and practical neutrals ensuring accessibility and versatility across digital interfaces.
This palette draws from warm earth tones and natural neutrals to evoke a grounded, inviting, and elegant brand identity, balancing rich brown with warm beige and ivory, enhanced by soft complementary accents and practical neutrals ensuring accessibility and versatility across digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a harmonious palette inspired by natural earth tones to convey warmth and reliability, blending deep brown, warm beige, and ivory for a cohesive and recognizable system.
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 create a harmonious palette inspired by natural earth tones to convey warmth and reliability, blending deep brown, warm beige, and ivory for a cohesive and recognizable system.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Taupe provides a strong, grounded foundation, conveying reliability and classic sophistication.
#6B5E54107, 94, 8426, 12, 370, 12, 21, 58RolesBtn Secondary Bg, Headline
Muted Gold offers warmth and subtle luxury, complementing Taupe with a softer, approachable tone.
#C1A182193, 161, 13030, 34, 630, 17, 33, 24Ivory adds brightness and clarity, balancing darker tones with freshness and simplicity.
#F0E9E0240, 233, 22434, 35, 910, 3, 7, 6Support colors extend the palette with subdued earthy accents that harmonize with the main browns to reinforce warmth and natural elegance without overpowering.
RolesIcon, Border, Divider, Outline
Clay Brown offers a dusty neutral tone that adds depth and complements the Taupe main color with understated balance.
#927C6B146, 124, 10726, 15, 500, 15, 27, 43Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F5F2247, 245, 24236, 24, 960, 1, 2, 3RolesBg Dark, Text, Btn Secondary Text
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83Copy 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-taupe: #6B5E54;
--color-muted-gold: #C1A182;
--color-ivory: #F0E9E0;
--color-clay-brown: #927C6B;
--color-pure-white: #FFFFFF;
--color-light-ivory: #F7F5F2;
--color-charcoal: #2B2B2B;
}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: #6B5E54;
--role-link: #6B5E54;
--role-btn-primary-bg: #6B5E54;
--role-btn-outlined-border: #6B5E54;
--role-btn-outlined-text: #6B5E54;
--role-btn-secondary-bg: #C1A182;
--role-headline: #C1A182;
--role-icon: #927C6B;
--role-border: #927C6B;
--role-divider: #927C6B;
--role-outline: #927C6B;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #2B2B2B;
--role-text: #2B2B2B;
--role-btn-secondary-text: #2B2B2B;
}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.{
"taupe": "#6B5E54",
"muted-gold": "#C1A182",
"ivory": "#F0E9E0",
"clay-brown": "#927C6B",
"pure-white": "#FFFFFF",
"light-ivory": "#F7F5F2",
"charcoal": "#2B2B2B"
}