This palette blends warm earthy tones with vibrant orange accents to evoke a welcoming, energetic, and grounded brand identity. The palette balances boldness with subtle neutrality to create strong visual hierarchy and readability.
This palette blends warm earthy tones with vibrant orange accents to evoke a welcoming, energetic, and grounded brand identity. The palette balances boldness with subtle neutrality to create strong visual hierarchy and readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors are warm and vibrant, ranging from mustard yellow to bright orange and deep brown, providing energetic yet harmonious contrast.
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 are warm and vibrant, ranging from mustard yellow to bright orange and deep brown, providing energetic yet harmonious contrast.
RolesLogo, Link, Btn Primary Bg, Headline
Light Brown conveys warmth and approachability, making it an excellent foundational color for the brand's visual identity.
#D3A25C211, 162, 9235, 57, 590, 23, 56, 17RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Mustard Yellow adds cheerful brightness and energy, creating a strong contrast to support call-to-actions and outlines.
#D88B04216, 139, 438, 96, 430, 36, 98, 15Pumpkin Orange provides vibrant emphasis that energizes interactive elements and enhances brand memorability.
#E15900225, 89, 024, 100, 440, 60, 100, 12The support colors extend the warm palette with softer and muted earth tones that complement and balance the lively main colors without overpowering them.
RolesIcon, Border, Divider, Outline
Taupe Brown offers subtle sophistication and clean separation between sections, complementing the warm main hues.
#B99678185, 150, 12028, 32, 600, 19, 35, 27Muted Gray introduces neutrality and calm, helping to balance the intensity of the warm colors while maintaining legibility.
#C9C7C7201, 199, 1990, 2, 780, 1, 1, 21Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#241A0B36, 26, 1136, 53, 90, 28, 69, 86#3E2E2062, 46, 3228, 32, 180, 26, 48, 76Copy 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-light-brown: #D3A25C;
--color-mustard-yellow: #D88B04;
--color-pumpkin-orange: #E15900;
--color-taupe-brown: #B99678;
--color-muted-gray: #C9C7C7;
--color-white: #FFFFFF;
--color-dark-brown: #241A0B;
--color-deep-coffee: #3E2E20;
}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: #D3A25C;
--role-link: #D3A25C;
--role-btn-primary-bg: #D3A25C;
--role-headline: #D3A25C;
--role-btn-secondary-bg: #D88B04;
--role-btn-outlined-border: #D88B04;
--role-btn-outlined-text: #D88B04;
--role-icon: #B99678;
--role-border: #B99678;
--role-divider: #B99678;
--role-outline: #B99678;
--role-bg-light: #FFFFFF;
--role-bg-dark: #241A0B;
--role-text: #241A0B;
--role-btn-primary-text: #241A0B;
--role-btn-secondary-text: #241A0B;
}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.{
"light-brown": "#D3A25C",
"mustard-yellow": "#D88B04",
"pumpkin-orange": "#E15900",
"taupe-brown": "#B99678",
"muted-gray": "#C9C7C7",
"white": "#FFFFFF",
"dark-brown": "#241A0B",
"deep-coffee": "#3E2E20"
}