A moody neutral-led palette with charcoal, olive-slate, and parchment warmth, tuned for a refined interface that feels editorial and grounded. The colors work together as a restrained system that keeps the image-inspired contrast and softness while staying practical for UI and brand use.
A moody neutral-led palette with charcoal, olive-slate, and parchment warmth, tuned for a refined interface that feels editorial and grounded. The colors work together as a restrained system that keeps the image-inspired contrast and softness while staying practical for UI and brand use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Deep charcoal and muted olive-slate create a quiet, high-contrast relationship, while a warm parchment tone softens the system for a more approachable, tactile feel. The palette reads as a cohesive, image-inspired set rather than a strict a
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.
Deep charcoal and muted olive-slate create a quiet, high-contrast relationship, while a warm parchment tone softens the system for a more approachable, tactile feel. The palette reads as a cohesive, image-inspired set rather than a strict a
RolesLogo, Btn Primary Bg
Anchors the brand with a dark, polished base that feels confident and tailored.
#17161523, 22, 2130, 5, 90, 4, 9, 91RolesLink, Btn Secondary Bg
Adds a muted botanical undertone that keeps the system from feeling too stark.
#5A5A4A90, 90, 7460, 10, 320, 0, 18, 65RolesHeadline, Btn Outlined Border, Btn Outlined Text
Brings a soft, luminous warmth that echoes the lighter surfaces in the source image.
#D8CDB6216, 205, 18241, 30, 780, 5, 16, 15These accents extend the main palette with subdued, functional detail rather than competing color energy. They add depth, interface clarity, and subtle variation while staying in a
RolesIcon, Border
Supports navigation and structure with a muted earthy mid-tone that blends comfortably with charcoal and olive.
#7D7767125, 119, 10344, 10, 450, 5, 18, 51RolesDivider, Outline
Provides a soft separating tone for UI lines and containers without drawing attention away from content.
#B7AF9E183, 175, 15841, 15, 670, 4, 14, 28Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F2E8246, 242, 23243, 44, 940, 2, 6, 4RolesBg Dark, Text
#0F0F0E15, 15, 1460, 3, 60, 0, 7, 94Copy 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-ink-charcoal: #171615;
--color-olive-slate: #5A5A4A;
--color-parchment-clay: #D8CDB6;
--color-moss-taupe: #7D7767;
--color-stone-linen: #B7AF9E;
--color-pure-white: #FFFFFF;
--color-soft-ivory: #F6F2E8;
--color-near-black: #0F0F0E;
}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: #171615;
--role-btn-primary-bg: #171615;
--role-link: #5A5A4A;
--role-btn-secondary-bg: #5A5A4A;
--role-headline: #D8CDB6;
--role-btn-outlined-border: #D8CDB6;
--role-btn-outlined-text: #D8CDB6;
--role-icon: #7D7767;
--role-border: #7D7767;
--role-divider: #B7AF9E;
--role-outline: #B7AF9E;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #0F0F0E;
--role-text: #0F0F0E;
}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.{
"ink-charcoal": "#171615",
"olive-slate": "#5A5A4A",
"parchment-clay": "#D8CDB6",
"moss-taupe": "#7D7767",
"stone-linen": "#B7AF9E",
"pure-white": "#FFFFFF",
"soft-ivory": "#F6F2E8",
"near-black": "#0F0F0E"
}