Deep Indigo Tech Color Palette for Modern Brands

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

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

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Indigo", "hex": "#2A2E6D", "role": "main", "cmyk": { "c": 61, "m": 58, "y": 0, "k": 57, "source": "colorfly" } }, { "name": "Prussian Blue", "hex": "#1D2951", "role": "main", "cmyk": { "c": 64, "m": 49, "y": 0, "k": 68, "source": "colorfly" } }, { "name": "Violet Blue", "hex": "#4B3F98", "role": "main", "cmyk": { "c": 51, "m": 59, "y": 0, "k": 40, "source": "colorfly" } }, { "name": "Slate Gray", "hex": "#5B5F7D", "role": "support", "cmyk": { "c": 27, "m": 24, "y": 0, "k": 51, "source": "colorfly" } }, { "name": "Charcoal Blue", "hex": "#393F58", "role": "support", "cmyk": { "c": 35, "m": 28, "y": 0, "k": 65, "source": "colorfly" } }, { "name": "Off White", "hex": "#F5F6FA", "role": "neutral", "cmyk": { "c": 2, "m": 2, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Light Gray", "hex": "#BFC2D1", "role": "neutral", "cmyk": { "c": 9, "m": 7, "y": 0, "k": 18, "source": "colorfly" } }, { "name": "Dark Slate", "hex": "#1A1E2B", "role": "neutral", "cmyk": { "c": 40, "m": 30, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

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

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

{ "indigo": "#2A2E6D", "prussian-blue": "#1D2951", "violet-blue": "#4B3F98", "slate-gray": "#5B5F7D", "charcoal-blue": "#393F58", "off-white": "#F5F6FA", "light-gray": "#BFC2D1", "dark-slate": "#1A1E2B" }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #2A2E6D; --gradient-partner: #8A8CAF; --gradient-accent: #5B5F7D; --gradient-text: #FFFFFF; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #2A2E6D; --gradient-text-b: #8A8CAF; --gradient-text-c: #5B5F7D; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>