This palette blends warm earthy tones with soft neutrals inspired by autumnal hues and natural textures from the image. The main colors create a harmonious and approachable identity with orange and brown grounded by a light beige, while the soft grays add subtle support and balance. The neutrals ensure clear readability and interface flexibility.
This palette blends warm earthy tones with soft neutrals inspired by autumnal hues and natural textures from the image. The main colors create a harmonious and approachable identity with orange and brown grounded by a light beige, while the soft grays add subtle support and balance. The neutrals ensure clear readability and interface flexibility.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine two warm earthy browns and a bright orange that work together to evoke warmth, approachability, and grounded sophistication.
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 combine two warm earthy browns and a bright orange that work together to evoke warmth, approachability, and grounded sophistication.
RolesLogo, Link, Btn Primary Bg, Headline
Pumpkin Orange adds vibrant warmth and energy, making the brand feel friendly and inviting.
#F17C00241, 124, 031, 100, 470, 49, 100, 5RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Chestnut Brown imparts a rich and grounded feel, bringing depth and trustworthiness.
#5A3A1B90, 58, 2730, 54, 230, 36, 70, 65RolesBg Light
Sandy Beige provides a gentle, natural warmth that softens and complements the stronger browns and orange.
#CBB7A6203, 183, 16628, 26, 720, 10, 18, 20Support colors extend the palette with muted grays that balance the warmth while enhancing usability and subtle detail.
RolesIcon, Border, Divider, Outline
Driftwood Gray offers a quiet, neutral accent that harmonizes with the earthy tones without competing.
#9E968D158, 150, 14132, 8, 590, 5, 11, 38RolesBg Dark
Mist Gray lightens the palette in small doses, ensuring good contrast and clarity in text and dark backgrounds.
#DED7D0222, 215, 20830, 18, 840, 3, 6, 13Utility colors for backgrounds, text, borders, and balance.
RolesBtn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F1EC245, 241, 23633, 31, 940, 2, 4, 4RolesText, Btn Primary Text
#3B322759, 50, 3933, 20, 190, 15, 34, 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-pumpkin-orange: #F17C00;
--color-chestnut-brown: #5A3A1B;
--color-sandy-beige: #CBB7A6;
--color-driftwood-gray: #9E968D;
--color-mist-gray: #DED7D0;
--color-pure-white: #FFFFFF;
--color-almond-white: #F5F1EC;
--color-dark-coffee: #3B3227;
}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: #F17C00;
--role-link: #F17C00;
--role-btn-primary-bg: #F17C00;
--role-headline: #F17C00;
--role-btn-secondary-bg: #5A3A1B;
--role-btn-outlined-border: #5A3A1B;
--role-btn-outlined-text: #5A3A1B;
--role-bg-light: #CBB7A6;
--role-icon: #9E968D;
--role-border: #9E968D;
--role-divider: #9E968D;
--role-outline: #9E968D;
--role-bg-dark: #DED7D0;
--role-btn-secondary-text: #FFFFFF;
--role-text: #3B3227;
--role-btn-primary-text: #3B3227;
}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": "#F17C00",
"chestnut-brown": "#5A3A1B",
"sandy-beige": "#CBB7A6",
"driftwood-gray": "#9E968D",
"mist-gray": "#DED7D0",
"pure-white": "#FFFFFF",
"almond-white": "#F5F1EC",
"dark-coffee": "#3B3227"
}