This palette draws inspiration from the image's intense reds and deep blacks, paired with complementary neutrals to create a striking, dynamic brand system suitable for technology and innovative ventures. The main colors provide energy and recognition, while support colors add balance and versatility, and neutrals ensure strong readability and interface clarity.
This palette draws inspiration from the image's intense reds and deep blacks, paired with complementary neutrals to create a striking, dynamic brand system suitable for technology and innovative ventures. The main colors provide energy and recognition, while support colors add balance and versatility, and neutrals ensure strong readability and interface clarity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors use a complementary scheme of vibrant crimson and deep black, creating a visually bold and energetic system that ensures instant brand recognition and dynamic impact.
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 use a complementary scheme of vibrant crimson and deep black, creating a visually bold and energetic system that ensures instant brand recognition and dynamic impact.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Crimson delivers vibrancy and energy, representing passion, innovation, and attention-grabbing strength for the brand identity.
#D31220211, 18, 32356, 84, 450, 91, 85, 17RolesBtn Secondary Bg
Jet Black provides depth and sophistication, balancing the vibrancy of crimson with a strong grounding presence.
#1B1B1F27, 27, 31240, 7, 1113, 13, 0, 88Support colors extend the palette with subtle variations of deep red and dark neutral tones, offering visual harmony and usefulness for icons, borders, and subtle UI elements without competing with the vivid main colors.
RolesIcon, Border, Divider, Outline
Dark Crimson complements Crimson with a muted tone that enhances readability and refines the color hierarchy.
#7F141D127, 20, 29355, 73, 290, 84, 77, 50Charcoal Gray adds functional contrast and depth suitable for neutral UI elements, balancing the palette with understated warmth.
#3A3A3E58, 58, 62240, 3, 246, 6, 0, 76Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F4F4F5244, 244, 245240, 5, 960, 0, 0, 4RolesText
#0D0D0F13, 13, 15240, 7, 513, 13, 0, 94Copy 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: #D31220;
--color-jet-black: #1B1B1F;
--color-dark-crimson: #7F141D;
--color-charcoal-gray: #3A3A3E;
--color-pure-white: #FFFFFF;
--color-smoke-white: #F4F4F5;
--color-rich-black: #0D0D0F;
}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: #D31220;
--role-link: #D31220;
--role-btn-primary-bg: #D31220;
--role-btn-outlined-border: #D31220;
--role-btn-outlined-text: #D31220;
--role-headline: #D31220;
--role-btn-secondary-bg: #1B1B1F;
--role-icon: #7F141D;
--role-border: #7F141D;
--role-divider: #7F141D;
--role-outline: #7F141D;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F4F4F5;
--role-text: #0D0D0F;
}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": "#D31220",
"jet-black": "#1B1B1F",
"dark-crimson": "#7F141D",
"charcoal-gray": "#3A3A3E",
"pure-white": "#FFFFFF",
"smoke-white": "#F4F4F5",
"rich-black": "#0D0D0F"
}