A softly aged olive-and-gold system with deep espresso contrast, inspired by the image’s vintage labels and muted metallic warmth. The palette feels archival and tactile, with enough clarity for UI while keeping the brand grounded and distinctive.
A softly aged olive-and-gold system with deep espresso contrast, inspired by the image’s vintage labels and muted metallic warmth. The palette feels archival and tactile, with enough clarity for UI while keeping the brand grounded and distinctive.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors sit in a restrained olive-to-gold family, echoing the image’s layered label tones and creating a recognizable vintage system. Their shared warmth keeps the palette cohesive while the darker accent adds enough depth for clear
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 sit in a restrained olive-to-gold family, echoing the image’s layered label tones and creating a recognizable vintage system. Their shared warmth keeps the palette cohesive while the darker accent adds enough depth for clear
RolesLogo, Link, Btn Secondary Bg
A softened olive that carries the brand’s heritage feel without becoming heavy or rustic.
#A6AE63166, 174, 9966, 32, 545, 0, 43, 32RolesBtn Primary Bg
A muted gold that adds warmth and visual prominence for buttons while staying tied to the image’s aged label quality.
#C3B34D195, 179, 7752, 50, 530, 8, 61, 24RolesHeadline, Btn Outlined Border, Btn Outlined Text
A deep moss tone that anchors typography and outlines with a grounded, dependable contrast.
#4C5B2A76, 91, 4278, 37, 2616, 0, 54, 64The support accents extend the vintage palette with subdued earthy depth and a weathered highlight, keeping the system practical without competing with the main hues.
RolesIcon, Border
A quiet khaki-olive that supports UI structure and small iconography without pulling focus from the main colors.
#7B7A46123, 122, 7059, 27, 380, 1, 43, 52RolesDivider, Outline
A warm brown accent that reinforces the label-like texture and gives separators a natural, grounded edge.
#6A4F2B106, 79, 4334, 42, 290, 25, 59, 58Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F1EEDB241, 238, 21952, 44, 900, 1, 9, 5RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#15141021, 20, 1648, 14, 70, 5, 24, 92Copy 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-mist: #A6AE63;
--color-antique-gold: #C3B34D;
--color-moss-slate: #4C5B2A;
--color-lichen-taupe: #7B7A46;
--color-aged-umber: #6A4F2B;
--color-paper-white: #FFFFFF;
--color-ivory-parchment: #F1EEDB;
--color-charcoal-ink: #151410;
}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: #A6AE63;
--role-link: #A6AE63;
--role-btn-secondary-bg: #A6AE63;
--role-btn-primary-bg: #C3B34D;
--role-headline: #4C5B2A;
--role-btn-outlined-border: #4C5B2A;
--role-btn-outlined-text: #4C5B2A;
--role-icon: #7B7A46;
--role-border: #7B7A46;
--role-divider: #6A4F2B;
--role-outline: #6A4F2B;
--role-bg-light: #FFFFFF;
--role-bg-dark: #151410;
--role-text: #151410;
--role-btn-primary-text: #151410;
--role-btn-secondary-text: #151410;
}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-mist": "#A6AE63",
"antique-gold": "#C3B34D",
"moss-slate": "#4C5B2A",
"lichen-taupe": "#7B7A46",
"aged-umber": "#6A4F2B",
"paper-white": "#FFFFFF",
"ivory-parchment": "#F1EEDB",
"charcoal-ink": "#151410"
}