Spotify Inspired Streaming Platform Color Palette

Spotify Inspired Streaming Color Palette

A high-energy streaming palette with a vivid green anchor, deep audio-black base, and restrained utility accents that feel modern, expressive, and instantly recognizable. The system keeps the Spotify-inspired clarity while relying on a stronger neutral structure for clearer product UI and campaign .

AnalogousTechspotify inspiredstreaming platformmusic appaudio brand

Main (Brand) Colors

The main colors center on vivid green and deep charcoal, creating a recognizable streaming identity with high contrast and immediate brand recall. Together they feel energetic and product-focused without leaning on a generic blue-tech look.

PrimaryStream Green

RolesLogo, Link, Btn Primary Bg, Headline

The signature green gives the brand instant recognition and signals motion, discovery, and play.

HEX#1DB954

RGB29, 185, 84

HSL141, 73, 42

CMYK84, 0, 55, 27

SecondaryAudio Black

RolesBtn Outlined Border, Bg Dark, Btn Secondary Bg

A deep black base sharpens the interface and lets the brighter brand colors feel louder and more premium.

HEX#0B0F14

RGB11, 15, 20

HSL213, 29, 6

CMYK45, 25, 0, 92

Support Colors

These accents extend the core palette with quiet utility colors that keep the interface legible and adaptable across product states. They support navigation and structure without挑战

Slate Mist

RolesIcon, Border

A muted blue-gray softens the contrast stack and works as a reliable utility accent without competing with the main green.

HEX#7A8A99

RGB122, 138, 153

HSL209, 13, 54

CMYK20, 10, 0, 40

Graphite Tide

RolesDivider, Outline

A subdued charcoal-blue adds structural separation and keeps cards, panels, and dividers crisp against light surfaces.

HEX#3A4654

RGB58, 70, 84

HSL212, 18, 28

CMYK31, 17, 0, 67

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Soft Cloud

RolesBtn Outlined Text

HEX#F5F7FA

RGB245, 247, 250

HSL216, 33, 97

CMYK2, 1, 0, 2

Deep Ink

RolesText, Btn Primary Text

HEX#121417

RGB18, 20, 23

HSL216, 12, 8

CMYK22, 13, 0, 91

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Stream Green", "hex": "#1DB954", "role": "main", "cmyk": { "c": 84, "m": 0, "y": 55, "k": 27, "source": "colorfly" } }, { "name": "Audio Black", "hex": "#0B0F14", "role": "main", "cmyk": { "c": 45, "m": 25, "y": 0, "k": 92, "source": "colorfly" } }, { "name": "Slate Mist", "hex": "#7A8A99", "role": "support", "cmyk": { "c": 20, "m": 10, "y": 0, "k": 40, "source": "colorfly" } }, { "name": "Graphite Tide", "hex": "#3A4654", "role": "support", "cmyk": { "c": 31, "m": 17, "y": 0, "k": 67, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Soft Cloud", "hex": "#F5F7FA", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Deep Ink", "hex": "#121417", "role": "neutral", "cmyk": { "c": 22, "m": 13, "y": 0, "k": 91, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-stream-green: #1DB954; --color-audio-black: #0B0F14; --color-slate-mist: #7A8A99; --color-graphite-tide: #3A4654; --color-pure-white: #FFFFFF; --color-soft-cloud: #F5F7FA; --color-deep-ink: #121417; }

:root { --role-logo: #1DB954; --role-link: #1DB954; --role-btn-primary-bg: #1DB954; --role-headline: #1DB954; --role-btn-outlined-border: #0B0F14; --role-bg-dark: #0B0F14; --role-btn-secondary-bg: #0B0F14; --role-icon: #7A8A99; --role-border: #7A8A99; --role-divider: #3A4654; --role-outline: #3A4654; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-btn-outlined-text: #F5F7FA; --role-text: #121417; --role-btn-primary-text: #121417; }

{ "stream-green": "#1DB954", "audio-black": "#0B0F14", "slate-mist": "#7A8A99", "graphite-tide": "#3A4654", "pure-white": "#FFFFFF", "soft-cloud": "#F5F7FA", "deep-ink": "#121417" }

<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: #1DB954; --gradient-partner: #61CE87; --gradient-accent: #7A8A99; --gradient-text: #000000; 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: #1DB954; --gradient-text-b: #346F49; --gradient-text-c: #7A8A99; 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>

Spotify Inspired Streaming Color Palette

Spotify Inspired Streaming Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Spotify Inspired Streaming Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system