A rugged mineral-and-paper system inspired by the image’s stacked labels, pairing dark coal structure with warm stone tones and a restrained industrial accent. The result feels tactile and editorial, with enough contrast for clear UI hierarchy while preserving the image’s raw, archive-like character
A rugged mineral-and-paper system inspired by the image’s stacked labels, pairing dark coal structure with warm stone tones and a restrained industrial accent. The result feels tactile and editorial, with enough contrast for clear UI hierarchy while preserving the image’s raw, archive-like character
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors echo the image’s stacked label aesthetic: one deep coal anchor, one aged parchment mid-tone, and one tobacco-brown secondary that keeps the system grounded and tactile. Together they create a recognizably industrial, print-s
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 echo the image’s stacked label aesthetic: one deep coal anchor, one aged parchment mid-tone, and one tobacco-brown secondary that keeps the system grounded and tactile. Together they create a recognizably industrial, print-s
RolesLogo, Headline, Btn Primary Bg
A dense coal black that gives the brand a hard-edged anchor and strong visual recognition.
#1B1A1827, 26, 2440, 6, 100, 4, 11, 89RolesBtn Secondary Bg, Link
A warm paper tone that softens the palette and connects it to the label-stock feel of the image.
#CFC2A1207, 194, 16143, 32, 720, 6, 22, 19RolesBtn Outlined Border, Btn Outlined Text
An earthy brown that adds industrial warmth and a durable, utility-driven accent for outlines and calls to action.
#8A6B45138, 107, 6933, 33, 410, 22, 50, 46The support accents extend the mineral and print-derived character without competing with the main palette. They add subtle surface variation, helping borders, icons, and UI divs/c
RolesIcon, Border
A muted stone gray that reinforces structure and keeps interface chrome understated.
#6E655B110, 101, 9132, 9, 390, 8, 17, 57RolesDivider, Outline
A softer neutral accent that bridges the parchment and brown tones for quiet separation and hierarchy.
#B7A58A183, 165, 13836, 24, 630, 10, 25, 28Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4EEE2244, 238, 22640, 45, 920, 2, 7, 4RolesBg Dark, Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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-coal-shaft: #1B1A18;
--color-aged-parchment: #CFC2A1;
--color-tobacco-ore: #8A6B45;
--color-slate-dust: #6E655B;
--color-washed-wheat: #B7A58A;
--color-paper-white: #FFFFFF;
--color-off-white: #F4EEE2;
--color-carbon-black: #111111;
}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: #1B1A18;
--role-headline: #1B1A18;
--role-btn-primary-bg: #1B1A18;
--role-btn-secondary-bg: #CFC2A1;
--role-link: #CFC2A1;
--role-btn-outlined-border: #8A6B45;
--role-btn-outlined-text: #8A6B45;
--role-icon: #6E655B;
--role-border: #6E655B;
--role-divider: #B7A58A;
--role-outline: #B7A58A;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-secondary-text: #111111;
}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.{
"coal-shaft": "#1B1A18",
"aged-parchment": "#CFC2A1",
"tobacco-ore": "#8A6B45",
"slate-dust": "#6E655B",
"washed-wheat": "#B7A58A",
"paper-white": "#FFFFFF",
"off-white": "#F4EEE2",
"carbon-black": "#111111"
}