This palette draws from the warm, earthy, and inviting hues present in the image, featuring natural browns, warm yellows, and splashes of vibrant orange. The colors work cohesively to evoke feelings of comfort, stability, and energetic warmth, suitable for brands looking to express grounded optimism and authentic friendliness.
This palette draws from the warm, earthy, and inviting hues present in the image, featuring natural browns, warm yellows, and splashes of vibrant orange. The colors work cohesively to evoke feelings of comfort, stability, and energetic warmth, suitable for brands looking to express grounded optimism and authentic friendliness.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors are a warm golden yellow, a bright burnt orange, and a rich dark brown that form an inviting, harmonious analogous color scheme conveying warmth and friendliness.
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 a warm golden yellow, a bright burnt orange, and a rich dark brown that form an inviting, harmonious analogous color scheme conveying warmth and friendliness.
RolesLogo, Link, Btn Primary Bg, Headline
Gold Ochre adds a warm, inviting tone that suggests optimism and approachability.
#D9A952217, 169, 8239, 64, 590, 22, 62, 15RolesBtn Secondary Bg
Burnt Orange offers energetic vibrancy making it excellent for buttons and calls to action without overwhelming the palette.
#EB7800235, 120, 031, 100, 460, 49, 100, 8RolesBtn Outlined Border, Btn Outlined Text, Bg Dark
Chocolate Brown grounds the palette with depth and stability, perfect for dark backgrounds and border elements.
#4A342B74, 52, 4317, 26, 230, 30, 42, 71Support colors extend the warm, natural feeling with softer, muted browns and a cool neutral gray to balance the warmth for readability and iconography.
RolesIcon, Border, Divider, Outline
Warm Taupe complements the main browns with a soft, neutral tone for subtle dividing lines and icons.
#B69979182, 153, 12131, 29, 590, 16, 34, 29RolesBg Light
Cool Gray adds a calming balance, used for backgrounds and headlines to ensure readability and contrast.
#C1C5C6193, 197, 198192, 4, 773, 1, 0, 22Utility colors for backgrounds, text, borders, and balance.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F1E9245, 241, 23340, 38, 940, 2, 5, 4RolesText, Btn Primary Text, 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-gold-ochre: #D9A952;
--color-burnt-orange: #EB7800;
--color-chocolate-brown: #4A342B;
--color-warm-taupe: #B69979;
--color-cool-gray: #C1C5C6;
--color-pure-white: #FFFFFF;
--color-ivory: #F5F1E9;
--color-rich-black: #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: #D9A952;
--role-link: #D9A952;
--role-btn-primary-bg: #D9A952;
--role-headline: #D9A952;
--role-btn-secondary-bg: #EB7800;
--role-btn-outlined-border: #4A342B;
--role-btn-outlined-text: #4A342B;
--role-bg-dark: #4A342B;
--role-icon: #B69979;
--role-border: #B69979;
--role-divider: #B69979;
--role-outline: #B69979;
--role-bg-light: #C1C5C6;
--role-text: #1B1B1B;
--role-btn-primary-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.{
"gold-ochre": "#D9A952",
"burnt-orange": "#EB7800",
"chocolate-brown": "#4A342B",
"warm-taupe": "#B69979",
"cool-gray": "#C1C5C6",
"pure-white": "#FFFFFF",
"ivory": "#F5F1E9",
"rich-black": "#1B1B1B"
}