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 .
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 .
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
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.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
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.
RolesLogo, Link, Btn Primary Bg, Headline
The signature green gives the brand instant recognition and signals motion, discovery, and play.
#1DB95429, 185, 84141, 73, 4284, 0, 55, 27RolesBtn 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.
#0B0F1411, 15, 20213, 29, 645, 25, 0, 92These 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挑战
RolesIcon, Border
A muted blue-gray softens the contrast stack and works as a reliable utility accent without competing with the main green.
#7A8A99122, 138, 153209, 13, 5420, 10, 0, 40RolesDivider, Outline
A subdued charcoal-blue adds structural separation and keeps cards, panels, and dividers crisp against light surfaces.
#3A465458, 70, 84212, 18, 2831, 17, 0, 67Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesText, Btn Primary Text
#12141718, 20, 23216, 12, 822, 13, 0, 91Copy palette values for design systems, websites, and client handoff.
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-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;
}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: #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;
}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.{
"stream-green": "#1DB954",
"audio-black": "#0B0F14",
"slate-mist": "#7A8A99",
"graphite-tide": "#3A4654",
"pure-white": "#FFFFFF",
"soft-cloud": "#F5F7FA",
"deep-ink": "#121417"
}