This palette draws inspiration from warm, earthy tones found in the image's rich oranges, deep browns, and soft neutrals, creating a harmonious system that balances vibrancy with grounded sophistication.
This palette draws inspiration from warm, earthy tones found in the image's rich oranges, deep browns, and soft neutrals, creating a harmonious system that balances vibrancy with grounded sophistication.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The triadic relationship between warm orange, deep brown, and soft tan generates a dynamic yet balanced color system that feels grounded and approachable.
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 between warm orange, deep brown, and soft tan generates a dynamic yet balanced color system that feels grounded and approachable.
RolesLogo, Link, Btn Primary Bg, Headline
Pumpkin Orange brings warmth and energy, attracting attention with an inviting vibrancy.
#D9A952217, 169, 8239, 64, 590, 22, 62, 15RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Chocolate Brown grounds the palette with richness and depth, providing stability and contrast.
#EB7800235, 120, 031, 100, 460, 49, 100, 8RolesBg Dark
Sandy Taupe offers a soft, neutral balance, smoothing transitions between stronger hues while maintaining warmth.
#4A342B74, 52, 4317, 26, 230, 30, 42, 71The supporting colors extend the palette with softer, muted shades that complement and balance the main warm tones without competing for attention.
RolesIcon, Border, Divider, Outline
Light Caramel reinforces warmth with a gentle, muted tone that harmonizes with both vibrant and neutral colors.
#B69979182, 153, 12131, 29, 590, 16, 34, 29Muted Beige provides a subtle, understated accent that balances the richness of the main tones and enhances usability.
#C1C5C6193, 197, 198192, 4, 773, 1, 0, 22Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F3E6DE243, 230, 22223, 47, 910, 5, 9, 5RolesText, Btn Primary 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-pumpkin-orange: #D9A952;
--color-chocolate-brown: #EB7800;
--color-sandy-taupe: #4A342B;
--color-light-caramel: #B69979;
--color-muted-beige: #C1C5C6;
--color-pure-white: #FFFFFF;
--color-warm-ivory: #F3E6DE;
--color-charcoal-black: #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: #D9A952;
--role-link: #D9A952;
--role-btn-primary-bg: #D9A952;
--role-headline: #D9A952;
--role-btn-secondary-bg: #EB7800;
--role-btn-outlined-border: #EB7800;
--role-btn-outlined-text: #EB7800;
--role-bg-dark: #4A342B;
--role-icon: #B69979;
--role-border: #B69979;
--role-divider: #B69979;
--role-outline: #B69979;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-text: #2B2B2B;
--role-btn-primary-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.{
"pumpkin-orange": "#D9A952",
"chocolate-brown": "#EB7800",
"sandy-taupe": "#4A342B",
"light-caramel": "#B69979",
"muted-beige": "#C1C5C6",
"pure-white": "#FFFFFF",
"warm-ivory": "#F3E6DE",
"charcoal-black": "#2B2B2B"
}