Deep Muted Urban Color Palette for Tech Brands

Deep Muted Urban Color Palette

This palette captures the muted, deep tones and occasional warm highlights found in the image, creating a distinct system with strong contrast and balance between dark and vibrant colors. The main colors provide recognizable identity through balanced hues, support colors give subtle accentuation, and neutrals offer versatile background and text options.

Split ComplementaryTechmuteddeep tonesurbancontrast

Main (Brand) Colors

The main colors combine deep muted blues and greens with a surprising warm red highlight, creating a visually rich and balanced system that stands out without overpowering.

PrimaryCharcoal Blue

RolesLogo, Link, Btn Primary Bg, Headline

Charcoal Blue provides a strong, sophisticated base that conveys stability and professionalism.

HEX#273239

RGB39, 50, 57

HSL203, 19, 19

CMYK32, 12, 0, 78

SecondaryDeep Forest Green

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Deep Forest Green adds depth and calmness, reinforcing a natural and grounded feeling.

HEX#3B4B43

RGB59, 75, 67

HSL150, 12, 26

CMYK21, 0, 11, 71

TertiaryRust Red

Rust Red delivers a warm accent that captures attention and energizes the palette.

HEX#B23A3A

RGB178, 58, 58

HSL0, 51, 46

CMYK0, 67, 67, 30

Support Colors

The support colors extend the palette through muted, earthy tones that complement the main deep colors, providing balance and versatile use for icons, borders, and dividers.

Slate Gray

RolesIcon, Border, Divider, Outline

Slate Gray softens the palette with a neutral accent that balances the stronger main colors without competing visually.

HEX#606F6D

RGB96, 111, 109

HSL172, 7, 41

CMYK14, 0, 2, 56

Muted Umber

Muted Umber subtly enriches the palette by offering a warm, earthy contrast that complements the rusty red highlight.

HEX#7A5B4B

RGB122, 91, 75

HSL20, 24, 39

CMYK0, 25, 39, 52

Neutral Colors

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

Ivory White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal Black

RolesText

HEX#0D0D0D

RGB13, 13, 13

HSL0, 0, 5

CMYK0, 0, 0, 95

Silver Gray

RolesBg Dark

HEX#C8C8C8

RGB200, 200, 200

HSL0, 0, 78

CMYK0, 0, 0, 22

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Charcoal Blue", "hex": "#273239", "role": "main", "cmyk": { "c": 32, "m": 12, "y": 0, "k": 78, "source": "colorfly" } }, { "name": "Deep Forest Green", "hex": "#3B4B43", "role": "main", "cmyk": { "c": 21, "m": 0, "y": 11, "k": 71, "source": "colorfly" } }, { "name": "Rust Red", "hex": "#B23A3A", "role": "main", "cmyk": { "c": 0, "m": 67, "y": 67, "k": 30, "source": "colorfly" } }, { "name": "Slate Gray", "hex": "#606F6D", "role": "support", "cmyk": { "c": 14, "m": 0, "y": 2, "k": 56, "source": "colorfly" } }, { "name": "Muted Umber", "hex": "#7A5B4B", "role": "support", "cmyk": { "c": 0, "m": 25, "y": 39, "k": 52, "source": "colorfly" } }, { "name": "Ivory White", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#0D0D0D", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 95, "source": "colorfly" } }, { "name": "Silver Gray", "hex": "#C8C8C8", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 22, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-charcoal-blue: #273239; --color-deep-forest-green: #3B4B43; --color-rust-red: #B23A3A; --color-slate-gray: #606F6D; --color-muted-umber: #7A5B4B; --color-ivory-white: #F5F5F5; --color-charcoal-black: #0D0D0D; --color-silver-gray: #C8C8C8; }

:root { --role-logo: #273239; --role-link: #273239; --role-btn-primary-bg: #273239; --role-headline: #273239; --role-btn-secondary-bg: #3B4B43; --role-btn-outlined-border: #3B4B43; --role-btn-outlined-text: #3B4B43; --role-icon: #606F6D; --role-border: #606F6D; --role-divider: #606F6D; --role-outline: #606F6D; --role-bg-light: #F5F5F5; --role-btn-primary-text: #F5F5F5; --role-btn-secondary-text: #F5F5F5; --role-text: #0D0D0D; --role-bg-dark: #C8C8C8; }

{ "charcoal-blue": "#273239", "deep-forest-green": "#3B4B43", "rust-red": "#B23A3A", "slate-gray": "#606F6D", "muted-umber": "#7A5B4B", "ivory-white": "#F5F5F5", "charcoal-black": "#0D0D0D", "silver-gray": "#C8C8C8" }

<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: #273239; --gradient-partner: #888E92; --gradient-accent: #606F6D; --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: #273239; --gradient-text-b: #888E92; --gradient-text-c: #606F6D; 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>