Indigo#2A2E6D
Prussian Blue#1D2951
Violet Blue#4B3F98
Slate Gray#5B5F7D
Charcoal Blue#393F58
Palette direction

Deep Indigo Tech Color Palette

This palette draws on the dark, moody blues and purples of the image to create a refined, modern brand system. The deep blue and indigo hues offer strength and creativity, balanced by cool grays and off-whites that provide clarity and neutrality. The support colors add subtle contrast and texture without overpowering the main colors, perfect for a tech-forward or creative brand identity.

MonochromaticTechindigodark bluecool graymodern
palette-preview.example
Tech color direction

Deep Indigo Tech Color Palette

This palette draws on the dark, moody blues and purples of the image to create a refined, modern brand system. The deep blue and indigo hues offer strength and creativity, balanced by cool grays and off-whites that provide clarity and neutrality. The support colors add subtle contrast and texture without overpowering the main colors, perfect for a tech-forward or creative brand identity.

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 Off White #F5F6FAon Prussian Blue #1D295113.1:1 Excellent
Logo Dark Slate #1A1E2Bon Off White #F5F6FA15.4:1 Excellent
Logo Dark Slate #1A1E2Bon Light Gray #BFC2D19.4:1 Excellent
Icon color
BackgroundIndigo#2A2E6DTextOff White#F5F6FA
Primary Button11.37:1
AAA

Best for the main action users should notice first.

BackgroundPrussian Blue#1D2951TextOff White#F5F6FA
Secondary Button13.07:1
AAA

Useful for softer choices and secondary paths.

BackgroundOff White#F5F6FATextPrussian Blue#1D2951
Outlined Button13.07:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundOff White#F5F6FATextIndigo#2A2E6D
Text Button11.37:1
AAA

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

Palette composition8 colorsMonochromatic color relationship
9:41Deep Indigo Tech Color Palette Color role balance
Monochromatic 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.

CDeep Indigo Tech Color PaletteTech brand direction ColorFly.design
Strategic palette preview

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.Indigo #2A2E6D
HeadlineUsed for main titles and key messages.Indigo #2A2E6D
LinkUsed for links and interactive text.Indigo #2A2E6D

Buttons

Primary Button
BackgroundIndigo #2A2E6D
TextOff White #F5F6FA
Secondary Button
BackgroundPrussian Blue #1D2951
TextOff White #F5F6FA
Outlined Button
BackgroundPrussian Blue #1D2951
TextPrussian Blue #1D2951

Interface

TextDefault readable body text.Dark Slate #1A1E2B
Bg LightLight page or section background.Off White #F5F6FA
Bg DarkDark page or section background.Violet Blue #4B3F98
IconSmall interface icons and marks.Slate Gray #5B5F7D
BorderCards, inputs, and component borders.Slate Gray #5B5F7D
DividerSubtle separators between content.Slate Gray #5B5F7D
OutlineFocus rings and emphasis outlines.Slate Gray #5B5F7D

Palette Colors

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

Main (Brand) Colors

The main colors are deep indigo, dark blue, and violet-blue that harmoniously blend for a sophisticated and modern tech feel.

PrimaryIndigo

RolesLogo, Link, Btn Primary Bg, Headline

Indigo conveys creativity and depth, anchoring the palette with a strong and trustworthy base.

HEX#2A2E6D
RGB42, 46, 109
HSL236, 44, 30
CMYK61, 58, 0, 57
SecondaryPrussian Blue

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Prussian Blue adds a stately and professional tone, perfect for secondary accents and outlines.

HEX#1D2951
RGB29, 41, 81
HSL226, 47, 22
CMYK64, 49, 0, 68
TertiaryViolet Blue

RolesBg Dark

Violet Blue complements the blues with a subtle touch of vibrancy and futuristic energy.

HEX#4B3F98
RGB75, 63, 152
HSL248, 41, 42
CMYK51, 59, 0, 40

Support Colors

The support colors extend the main palette with muted cool tones that remain visually subordinate and enhance usability with subtle contrast.

Slate Gray

RolesIcon, Divider, Border, Outline

Slate Gray complements the main blues by providing a soft, neutral contrast that supports text and interface elements.

HEX#5B5F7D
RGB91, 95, 125
HSL233, 16, 42
CMYK27, 24, 0, 51
Charcoal Blue

Charcoal Blue adds depth and helps balance the brighter indigo, useful for headlines that need subtle strength.

HEX#393F58
RGB57, 63, 88
HSL228, 21, 28
CMYK35, 28, 0, 65

Neutral Colors

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

Off White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F5F6FA
RGB245, 246, 250
HSL228, 33, 97
CMYK2, 2, 0, 2
Light Gray
HEX#BFC2D1
RGB191, 194, 209
HSL230, 16, 78
CMYK9, 7, 0, 18
Dark Slate

RolesText

HEX#1A1E2B
RGB26, 30, 43
HSL226, 25, 14
CMYK40, 30, 0, 83

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-indigo: #2A2E6D;
  --color-prussian-blue: #1D2951;
  --color-violet-blue: #4B3F98;
  --color-slate-gray: #5B5F7D;
  --color-charcoal-blue: #393F58;
  --color-off-white: #F5F6FA;
  --color-light-gray: #BFC2D1;
  --color-dark-slate: #1A1E2B;
}

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: #2A2E6D;
  --role-link: #2A2E6D;
  --role-btn-primary-bg: #2A2E6D;
  --role-headline: #2A2E6D;
  --role-btn-secondary-bg: #1D2951;
  --role-btn-outlined-border: #1D2951;
  --role-btn-outlined-text: #1D2951;
  --role-bg-dark: #4B3F98;
  --role-icon: #5B5F7D;
  --role-divider: #5B5F7D;
  --role-border: #5B5F7D;
  --role-outline: #5B5F7D;
  --role-bg-light: #F5F6FA;
  --role-btn-primary-text: #F5F6FA;
  --role-btn-secondary-text: #F5F6FA;
  --role-text: #1A1E2B;
}

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.
{
    "indigo": "#2A2E6D",
    "prussian-blue": "#1D2951",
    "violet-blue": "#4B3F98",
    "slate-gray": "#5B5F7D",
    "charcoal-blue": "#393F58",
    "off-white": "#F5F6FA",
    "light-gray": "#BFC2D1",
    "dark-slate": "#1A1E2B"
}
Press Space to load new palette