This palette is inspired by the muted green and off-white tones of the logo circle with the contrast of the black background, creating a calm yet confident atmosphere. The combination of a soft olive green, creamy off-white, and charcoal black offers a balanced, natural, and approachable brand system suitable for a boutique or artisanal identity.
This palette is inspired by the muted green and off-white tones of the logo circle with the contrast of the black background, creating a calm yet confident atmosphere. The combination of a soft olive green, creamy off-white, and charcoal black offers a balanced, natural, and approachable brand system suitable for a boutique or artisanal identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette combines a muted olive green, an off-white cream, and a deep charcoal black to establish a distinctive, natural, and sophisticated visual harmony.
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 palette combines a muted olive green, an off-white cream, and a deep charcoal black to establish a distinctive, natural, and sophisticated visual harmony.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Olive Green communicates grounded growth and a natural, organic feel, making the brand approachable and trustworthy.
#8A9A5B138, 154, 9175, 26, 4810, 0, 41, 40RolesHeadline
Cream adds warmth and softness, complementing the olive green with a subtle vintage elegance.
#E7E6D6231, 230, 21456, 26, 870, 0, 7, 9RolesBg Dark, Btn Secondary Bg
Charcoal Black delivers strong contrast for text and backgrounds, conveying stability and professionalism.
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83Soft muted sage and dim gray accents extend the palette gently without distracting from the main natural tones, enhancing visual hierarchy and subtle design elements.
RolesIcon, Border, Divider, Outline
Muted Sage supports Olive Green, reinforcing the natural, earthy tone while providing gentle contrast in UI elements.
#A3B18A163, 177, 13882, 20, 628, 0, 22, 31RolesBg Light
Dim Gray works as a light background neutral that balances the stronger main colors and supports cream without overpowering.
#D1D0C5209, 208, 19755, 12, 800, 0, 6, 18Utility colors for backgrounds, text, borders, and balance.
RolesBtn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F9F9F7249, 249, 24760, 14, 970, 0, 1, 2RolesText, Btn Primary 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-olive-green: #8A9A5B;
--color-cream: #E7E6D6;
--color-charcoal-black: #2B2B2B;
--color-muted-sage: #A3B18A;
--color-dim-gray: #D1D0C5;
--color-pure-white: #FFFFFF;
--color-near-white: #F9F9F7;
--color-dark-near-black: #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: #8A9A5B;
--role-link: #8A9A5B;
--role-btn-primary-bg: #8A9A5B;
--role-btn-outlined-border: #8A9A5B;
--role-btn-outlined-text: #8A9A5B;
--role-headline: #E7E6D6;
--role-bg-dark: #2B2B2B;
--role-btn-secondary-bg: #2B2B2B;
--role-icon: #A3B18A;
--role-border: #A3B18A;
--role-divider: #A3B18A;
--role-outline: #A3B18A;
--role-bg-light: #D1D0C5;
--role-btn-secondary-text: #FFFFFF;
--role-text: #1A1A1A;
--role-btn-primary-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.{
"olive-green": "#8A9A5B",
"cream": "#E7E6D6",
"charcoal-black": "#2B2B2B",
"muted-sage": "#A3B18A",
"dim-gray": "#D1D0C5",
"pure-white": "#FFFFFF",
"near-white": "#F9F9F7",
"dark-near-black": "#1A1A1A"
}