This palette translates the image’s deep crimson, ember, and shadowed brown into a dramatic brand system with tactile warmth and strong contrast. The result feels intimate and premium while staying grounded enough for digital interfaces and product UI.
This palette translates the image’s deep crimson, ember, and shadowed brown into a dramatic brand system with tactile warmth and strong contrast. The result feels intimate and premium while staying grounded enough for digital interfaces and product UI.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a deep red family with a near-black anchor, creating a coherent, tactile system that feels carved, warm, and unmistakably premium. Their relationship is more atmospheric than strictly harmonic, which makes custom the most accurate classification.
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 form a deep red family with a near-black anchor, creating a coherent, tactile system that feels carved, warm, and unmistakably premium. Their relationship is more atmospheric than strictly harmonic, which makes custom the most accurate classification.
RolesLogo, Btn Primary Bg, Headline
This saturated ember red gives the brand its signature energy and creates a clear visual anchor for logos and primary actions.
#8E1F1A142, 31, 263, 69, 330, 78, 82, 44RolesLink, Btn Secondary Bg
This darker wine tone adds depth and supports navigation and secondary actions without competing with the main ember red.
#5A0F1290, 15, 18358, 71, 210, 83, 80, 65RolesBtn Outlined Border, Btn Outlined Text
This shadowed garnet grounds the system and provides a refined outline treatment that stays aligned with the red core.
#12040518, 4, 5356, 64, 40, 78, 72, 93The support colors extend the palette with muted warmth and restrained highlight energy, reinforcing the textured feel without pulling attention away from the main reds. They balance the system by adding subtle dimensional cues for icons, borders, and dividers.
RolesIcon, Border
This rust accent bridges the bright ember red and the dark shadow tones, making interface details feel warm and cohesive.
#8A3B24138, 59, 3614, 59, 340, 57, 74, 46RolesDivider, Outline
This subdued brown-red keeps separators and outlines visible while preserving the palette’s moody, crafted character.
#4C262176, 38, 337, 39, 210, 50, 57, 70Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F4EFE8244, 239, 23235, 35, 930, 2, 5, 4RolesBg Dark, Text
#0A0A0B10, 10, 11240, 5, 49, 9, 0, 96Copy 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-crimson-ember: #8E1F1A;
--color-mulberry-wine: #5A0F12;
--color-blackened-garnet: #120405;
--color-sienna-rust: #8A3B24;
--color-auburn-charcoal: #4C2621;
--color-pure-white: #FFFFFF;
--color-soft-porcelain: #F4EFE8;
--color-ink-black: #0A0A0B;
}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: #8E1F1A;
--role-btn-primary-bg: #8E1F1A;
--role-headline: #8E1F1A;
--role-link: #5A0F12;
--role-btn-secondary-bg: #5A0F12;
--role-btn-outlined-border: #120405;
--role-btn-outlined-text: #120405;
--role-icon: #8A3B24;
--role-border: #8A3B24;
--role-divider: #4C2621;
--role-outline: #4C2621;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-light: #F4EFE8;
--role-bg-dark: #0A0A0B;
--role-text: #0A0A0B;
}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.{
"crimson-ember": "#8E1F1A",
"mulberry-wine": "#5A0F12",
"blackened-garnet": "#120405",
"sienna-rust": "#8A3B24",
"auburn-charcoal": "#4C2621",
"pure-white": "#FFFFFF",
"soft-porcelain": "#F4EFE8",
"ink-black": "#0A0A0B"
}