A high-contrast charcoal and ember palette with clean graphite neutrals and a restrained warm accent system. It feels modern and assertive, with enough warmth to stay energetic while remaining crisp for product UI and branding.
A high-contrast charcoal and ember palette with clean graphite neutrals and a restrained warm accent system. It feels modern and assertive, with enough warmth to stay energetic while remaining crisp for product UI and branding.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair a vivid ember orange with deep graphite and a near-black base, creating an instantly recognizable contrast system that feels sharp and contemporary. The warm-cool tension gives the brand energy without sacrificing a pro
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 pair a vivid ember orange with deep graphite and a near-black base, creating an instantly recognizable contrast system that feels sharp and contemporary. The warm-cool tension gives the brand energy without sacrificing a pro
RolesLogo, Btn Primary Bg
A punchy ember tone that drives recognition and makes the brand feel active and decisive.
#EB5A1E235, 90, 3018, 84, 520, 62, 87, 8RolesHeadline, Btn Secondary Bg, Btn Outlined Border
A grounded near-black that anchors the system and keeps typography and secondary actions feeling strong.
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90RolesBg Light
A soft pale neutral that preserves readability and keeps the interface bright without feeling clinical.
#F0E8E1240, 232, 22528, 33, 910, 3, 6, 6The support colors stay close to the core orange and graphite tones, adding subtle depth for interactive states and quiet structural accents. They reinforce the palette without dil
RolesLink, Icon
A deeper ember accent that supports links and icons with a slightly more serious, UI-friendly tone.
#C84A18200, 74, 2417, 79, 440, 63, 88, 22RolesBorder, Divider, Outline, Btn Outlined Text
A muted graphite support shade that softens separators and makes outlined text readable without competing with the main colors.
#5A5A5A90, 90, 900, 0, 350, 0, 0, 65Utility colors for backgrounds, text, borders, and balance.
RolesBtn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F0E8E1240, 232, 22528, 33, 910, 3, 6, 6RolesBg Dark, Text, Btn Primary 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-ember-orange: #EB5A1E;
--color-charcoal-black: #1A1A1A;
--color-warm-porcelain: #F0E8E1;
--color-smoked-ember: #C84A18;
--color-slate-graphite: #5A5A5A;
--color-pure-white: #FFFFFF;
--color-soft-linen: #F0E8E1;
--color-deep-ink: #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: #EB5A1E;
--role-btn-primary-bg: #EB5A1E;
--role-headline: #1A1A1A;
--role-btn-secondary-bg: #1A1A1A;
--role-btn-outlined-border: #1A1A1A;
--role-bg-light: #F0E8E1;
--role-link: #C84A18;
--role-icon: #C84A18;
--role-border: #5A5A5A;
--role-divider: #5A5A5A;
--role-outline: #5A5A5A;
--role-btn-outlined-text: #5A5A5A;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-primary-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.{
"ember-orange": "#EB5A1E",
"charcoal-black": "#1A1A1A",
"warm-porcelain": "#F0E8E1",
"smoked-ember": "#C84A18",
"slate-graphite": "#5A5A5A",
"pure-white": "#FFFFFF",
"soft-linen": "#F0E8E1",
"deep-ink": "#111111"
}