Crimson#D31220
Jet Black#1B1B1F
Dark Crimson#7F141D
Charcoal Gray#3A3A3E
Palette direction

Crimson Black Tech Color Palette

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.

CustomTechcrimsonblacktechnologyinnovation
palette-preview.example
Tech color direction

Crimson Black Tech Color Palette

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 system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Jet Black #1B1B1F17.2:1 Excellent
Logo Pure White #FFFFFFon Crimson #D312205.4:1 Strong
Logo Rich Black #0D0D0Fon Pure White #FFFFFF19.4:1 Excellent
Icon color
BackgroundCrimson#D31220TextPure White#FFFFFF
Primary Button5.42:1
AA

Best for the main action users should notice first.

BackgroundJet Black#1B1B1FTextPure White#FFFFFF
Secondary Button17.17:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextCrimson#D31220
Outlined Button5.42:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCrimson#D31220
Text Button5.42:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition7 colorsCustom color relationship
9:41Crimson Black Tech Color Palette Color role balance
Custom system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CCrimson Black Tech Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color 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.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Crimson #D31220
HeadlineUsed for main titles and key messages.Crimson #D31220
LinkUsed for links and interactive text.Crimson #D31220

Buttons

Primary Button
BackgroundCrimson #D31220
TextPure White #FFFFFF
Secondary Button
BackgroundJet Black #1B1B1F
TextPure White #FFFFFF
Outlined Button
BackgroundCrimson #D31220
TextCrimson #D31220

Interface

TextDefault readable body text.Rich Black #0D0D0F
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Smoke White #F4F4F5
IconSmall interface icons and marks.Dark Crimson #7F141D
BorderCards, inputs, and component borders.Dark Crimson #7F141D
DividerSubtle separators between content.Dark Crimson #7F141D
OutlineFocus rings and emphasis outlines.Dark Crimson #7F141D

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

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.

PrimaryCrimson

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.

HEX#D31220
RGB211, 18, 32
HSL356, 84, 45
CMYK0, 91, 85, 17
PrimaryJet Black

RolesBtn Secondary Bg

Jet Black provides depth and sophistication, balancing the vibrancy of crimson with a strong grounding presence.

HEX#1B1B1F
RGB27, 27, 31
HSL240, 7, 11
CMYK13, 13, 0, 88

Support Colors

Support 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.

Dark Crimson

RolesIcon, Border, Divider, Outline

Dark Crimson complements Crimson with a muted tone that enhances readability and refines the color hierarchy.

HEX#7F141D
RGB127, 20, 29
HSL355, 73, 29
CMYK0, 84, 77, 50
Charcoal Gray

Charcoal Gray adds functional contrast and depth suitable for neutral UI elements, balancing the palette with understated warmth.

HEX#3A3A3E
RGB58, 58, 62
HSL240, 3, 24
CMYK6, 6, 0, 76

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Smoke White

RolesBg Dark

HEX#F4F4F5
RGB244, 244, 245
HSL240, 5, 96
CMYK0, 0, 0, 4
Rich Black

RolesText

HEX#0D0D0F
RGB13, 13, 15
HSL240, 7, 5
CMYK13, 13, 0, 94

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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;
}

Role tokens

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;
}

JSON

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"
}
Press Space to load new palette