This color palette draws inspiration from a warm, earthy image, combining rich browns and oranges with muted greys to create a grounded and inviting visual identity. The main colors provide depth and recognition while the support colors subtly reinforce warmth and balance. Neutrals offer clean contrasts for text and backgrounds in digital interfaces.
This color palette draws inspiration from a warm, earthy image, combining rich browns and oranges with muted greys to create a grounded and inviting visual identity. The main colors provide depth and recognition while the support colors subtly reinforce warmth and balance. Neutrals offer clean contrasts for text and backgrounds in digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form an analogous harmony of warm browns and oranges, creating a cohesive and inviting brand presence with strong visual recognition.
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 form an analogous harmony of warm browns and oranges, creating a cohesive and inviting brand presence with strong visual recognition.
RolesLogo, Link, Btn Outlined Border, Btn Outlined Text, Btn Secondary Bg
Light Brown conveys reliability and warmth, establishing a trustworthy and approachable brand foundation.
#B87E31184, 126, 4934, 58, 460, 32, 73, 28RolesHeadline
Honey Yellow adds a bright, optimistic touch that energizes and uplifts the palette with an inviting glow.
#C99617201, 150, 2343, 79, 440, 25, 89, 21RolesBtn Primary Bg
Persimmon Orange creates a vibrant, attention-grabbing call to action that contrasts well with the neutral text for strong usability.
#E46000228, 96, 025, 100, 450, 58, 100, 11Support colors extend the main palette with grounded, muted neutrals that add balance and subtle textural contrast without overpowering the warmth of the main colors.
RolesIcon, Border, Divider, Outline
Rugged Brown anchors the palette with a deeper, softer brown that complements the main warm tones and enhances visual stability.
#7A5631122, 86, 4930, 43, 340, 30, 60, 52Muted Grey offers a gentle, visually balancing accent that complements the warmth of the main colors while ensuring readability for secondary button text.
#9D968F157, 150, 14330, 7, 590, 4, 9, 38Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#E2DED7226, 222, 21538, 16, 860, 2, 5, 11RolesText, Btn Primary Text, Btn Secondary Text
#3B322659, 50, 3834, 22, 190, 15, 36, 77Copy 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: #B87E31;
--color-honey-yellow: #C99617;
--color-persimmon-orange: #E46000;
--color-rugged-brown: #7A5631;
--color-muted-grey: #9D968F;
--color-white: #FFFFFF;
--color-ivory: #E2DED7;
--color-charcoal-brown: #3B3226;
}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: #B87E31;
--role-link: #B87E31;
--role-btn-outlined-border: #B87E31;
--role-btn-outlined-text: #B87E31;
--role-btn-secondary-bg: #B87E31;
--role-headline: #C99617;
--role-btn-primary-bg: #E46000;
--role-icon: #7A5631;
--role-border: #7A5631;
--role-divider: #7A5631;
--role-outline: #7A5631;
--role-bg-light: #FFFFFF;
--role-bg-dark: #E2DED7;
--role-text: #3B3226;
--role-btn-primary-text: #3B3226;
--role-btn-secondary-text: #3B3226;
}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": "#B87E31",
"honey-yellow": "#C99617",
"persimmon-orange": "#E46000",
"rugged-brown": "#7A5631",
"muted-grey": "#9D968F",
"white": "#FFFFFF",
"ivory": "#E2DED7",
"charcoal-brown": "#3B3226"
}