This palette translates the image’s soft butter-yellow fabric, warm beige paper, and grounded stone background into a calm, tactile brand system. The colors feel handmade and approachable while still giving the interface enough contrast for clear hierarchy and usable calls to action.
This palette translates the image’s soft butter-yellow fabric, warm beige paper, and grounded stone background into a calm, tactile brand system. The colors feel handmade and approachable while still giving the interface enough contrast for clear hierarchy and usable calls to action.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a warm yellow-to-beige range, which creates a cohesive, comforting system that echoes the image’s folded fabric and paper textures. This relationship feels natural and recognizable while keeping the palette soft 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 main colors stay within a warm yellow-to-beige range, which creates a cohesive, comforting system that echoes the image’s folded fabric and paper textures. This relationship feels natural and recognizable while keeping the palette soft and approachable.
RolesLogo, Btn Primary Bg
Butter brings the most recognizable warmth and gives the brand an optimistic, welcoming focal point.
#E7D36A231, 211, 10650, 72, 660, 9, 54, 9RolesBtn Secondary Bg, Headline
Sand adds a quieter natural note that supports hierarchy without breaking the palette’s softness.
#D8C08A216, 192, 13842, 50, 690, 11, 36, 15RolesLink, Btn Outlined Border, Btn Outlined Text
Ochre provides a grounded accent that sharpens interaction states and adds a slightly richer tonal anchor.
#B9965F185, 150, 9537, 39, 550, 19, 49, 27The support colors extend the warm palette with subdued earthy depth and a muted highlight, which helps the system stay practical in digital use. They balance the brighter yellow main color without competing for attention.
RolesIcon, Border
Taupe softens interface details and keeps icons and borders aligned with the image’s natural material feel.
#8D7A63141, 122, 9933, 18, 470, 13, 30, 45RolesDivider, Outline
Pebble adds a restrained stone-like layer that separates content gently while preserving warmth.
#B2A59A178, 165, 15428, 13, 650, 7, 13, 30Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F2E8247, 242, 23240, 48, 940, 2, 6, 3RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#23201C35, 32, 2834, 11, 120, 9, 20, 86Copy 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-butter: #E7D36A;
--color-sand: #D8C08A;
--color-ochre: #B9965F;
--color-taupe: #8D7A63;
--color-pebble: #B2A59A;
--color-white: #FFFFFF;
--color-ivory: #F7F2E8;
--color-charcoal: #23201C;
}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: #E7D36A;
--role-btn-primary-bg: #E7D36A;
--role-btn-secondary-bg: #D8C08A;
--role-headline: #D8C08A;
--role-link: #B9965F;
--role-btn-outlined-border: #B9965F;
--role-btn-outlined-text: #B9965F;
--role-icon: #8D7A63;
--role-border: #8D7A63;
--role-divider: #B2A59A;
--role-outline: #B2A59A;
--role-bg-light: #FFFFFF;
--role-bg-dark: #23201C;
--role-text: #23201C;
--role-btn-primary-text: #23201C;
--role-btn-secondary-text: #23201C;
}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.{
"butter": "#E7D36A",
"sand": "#D8C08A",
"ochre": "#B9965F",
"taupe": "#8D7A63",
"pebble": "#B2A59A",
"white": "#FFFFFF",
"ivory": "#F7F2E8",
"charcoal": "#23201C"
}