This palette draws inspiration from the colorful, textured weaving and natural pottery tones in the image, combining rich reds, warm yellows, and deep charcoals with supporting soft blues and olive greens balanced by a clean, neutral foundation. It evokes warmth, creativity, and grounded authenticity, ideal for brands seeking a vibrant yet natural identity.
This palette draws inspiration from the colorful, textured weaving and natural pottery tones in the image, combining rich reds, warm yellows, and deep charcoals with supporting soft blues and olive greens balanced by a clean, neutral foundation. It evokes warmth, creativity, and grounded authenticity, ideal for brands seeking a vibrant yet natural identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a warm terracotta red with a bright golden yellow and a deep charcoal, creating a balanced split complementary harmony that is both energetic and grounded.
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 a warm terracotta red with a bright golden yellow and a deep charcoal, creating a balanced split complementary harmony that is both energetic and grounded.
RolesLogo, Link, Btn Primary Bg, Headline
Terracotta conveys warmth, natural sophistication, and artisanal craft.
#B94732185, 71, 509, 57, 460, 62, 73, 27RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Goldenrod provides energy, optimism, and brightness to the palette.
#E9B44C233, 180, 7640, 78, 610, 23, 67, 9RolesIcon, Border, Divider, Outline
Charcoal anchors the palette with depth and a contemporary neutral contrast.
#32323250, 50, 500, 0, 200, 0, 0, 80The support colors extend the main palette with muted yet lively blue and olive hues that complement the warmth and add subtle visual interest below the main colors' prominence.
Slate Blue softens and harmonizes the warmth, evoking serene woven threads.
#5A7A9190, 122, 145205, 23, 4638, 16, 0, 43Olive balances the palette with an earthy undertone, reinforcing natural roots.
#728355114, 131, 8582, 21, 4213, 0, 35, 49Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F9F5EF249, 245, 23936, 45, 960, 2, 4, 2RolesText, Btn Secondary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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-terracotta: #B94732;
--color-goldenrod: #E9B44C;
--color-charcoal: #323232;
--color-slate-blue: #5A7A91;
--color-olive: #728355;
--color-white: #FFFFFF;
--color-ivory: #F9F5EF;
--color-jet: #1A1A1A;
}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: #B94732;
--role-link: #B94732;
--role-btn-primary-bg: #B94732;
--role-headline: #B94732;
--role-btn-secondary-bg: #E9B44C;
--role-btn-outlined-border: #E9B44C;
--role-btn-outlined-text: #E9B44C;
--role-icon: #323232;
--role-border: #323232;
--role-divider: #323232;
--role-outline: #323232;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F9F5EF;
--role-text: #1A1A1A;
--role-btn-secondary-text: #1A1A1A;
}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.{
"terracotta": "#B94732",
"goldenrod": "#E9B44C",
"charcoal": "#323232",
"slate-blue": "#5A7A91",
"olive": "#728355",
"white": "#FFFFFF",
"ivory": "#F9F5EF",
"jet": "#1A1A1A"
}