This palette features strong red tones and subtle warm dark neutrals, evoking energy and sophistication suitable for a lounge bar ambiance. The main reds deliver vibrancy and identity, while the support colors add refinement and balance. The neutrals ensure maximum readability and contrast across digital interfaces.
This palette features strong red tones and subtle warm dark neutrals, evoking energy and sophistication suitable for a lounge bar ambiance. The main reds deliver vibrancy and identity, while the support colors add refinement and balance. The neutrals ensure maximum readability and contrast across digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette capitalizes on varying intensities of crimson red to create a cohesive and striking brand identity that is both energetic and recognizable.
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 palette capitalizes on varying intensities of crimson red to create a cohesive and striking brand identity that is both energetic and recognizable.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Crimson provides the main energetic and passionate brand color, driving strong recognition and visual impact.
#B11226177, 18, 38352, 82, 380, 90, 79, 31RolesBtn Secondary Bg, Headline
Firebrick Red is an engaging accent that complements the primary crimson with slightly lighter warmth for visual hierarchy.
#D5283B213, 40, 59353, 68, 500, 81, 72, 16Soft muted warm black supports the palette enhancing UI elements like icons and borders with elegance without overpowering the reds.
RolesIcon, Border, Divider, Outline
Deep Taupe adds a warm, muted dark tone that balances the intense reds with a grounded, sophisticated presence.
#412F3065, 47, 48357, 16, 220, 28, 26, 75Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F1EFEF241, 239, 2390, 7, 940, 1, 1, 5RolesText
#1B1A1A27, 26, 260, 2, 100, 4, 4, 89Copy 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: #B11226;
--color-firebrick-red: #D5283B;
--color-deep-taupe: #412F30;
--color-white: #FFFFFF;
--color-off-white: #F1EFEF;
--color-raisin-black: #1B1A1A;
}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: #B11226;
--role-link: #B11226;
--role-btn-primary-bg: #B11226;
--role-btn-outlined-border: #B11226;
--role-btn-outlined-text: #B11226;
--role-btn-secondary-bg: #D5283B;
--role-headline: #D5283B;
--role-icon: #412F30;
--role-border: #412F30;
--role-divider: #412F30;
--role-outline: #412F30;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F1EFEF;
--role-text: #1B1A1A;
}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": "#B11226",
"firebrick-red": "#D5283B",
"deep-taupe": "#412F30",
"white": "#FFFFFF",
"off-white": "#F1EFEF",
"raisin-black": "#1B1A1A"
}