This palette channels Stranger Things with a vivid retro-red core, an eerie electric-blue counterpoint, and a shadowy maroon accent that feels cinematic rather than literal. The neutral set keeps the system usable for interfaces while preserving the show’s tense, nostalgic atmosphere.
This palette channels Stranger Things with a vivid retro-red core, an eerie electric-blue counterpoint, and a shadowy maroon accent that feels cinematic rather than literal. The neutral set keeps the system usable for interfaces while preserving the show’s tense, nostalgic atmosphere.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair a broadcast-red intensity with an electric blue that feels like neon light in the dark, creating the show’s familiar tension between danger and mystery. A deeper maroon adds weight and keeps the system grounded in a dramatic, period-evocative mood.
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 pair a broadcast-red intensity with an electric blue that feels like neon light in the dark, creating the show’s familiar tension between danger and mystery. A deeper maroon adds weight and keeps the system grounded in a dramatic, period-evocative mood.
RolesLogo, Btn Primary Bg
Crimson delivers the urgent, iconic energy that anchors the brand and reads instantly in bold moments.
#D62828214, 40, 400, 69, 500, 81, 81, 16RolesLink, Btn Secondary Bg, Btn Outlined Border
Cobalt adds an electric, supernatural contrast that brings clarity and movement to the palette.
#1D4ED829, 78, 216224, 76, 4887, 64, 0, 15RolesHeadline
Burgundy deepens the mood with a darker, more cinematic register that suits dramatic headlines.
#7A1F2B122, 31, 43352, 59, 300, 75, 65, 52These accents extend the palette with restrained, atmospheric tones that support the red-blue tension without competing with it. They add just enough depth and structure for UI elements, shadows, and emphasis states.
RolesIcon, Border
Slate Blue softens the contrast into a practical accent that reinforces the palette’s cold, nocturnal feel.
#3A4A5A58, 74, 90210, 22, 2936, 18, 0, 65RolesDivider, Outline
Sienna introduces a muted analog warmth that echoes vintage lighting and keeps the system from feeling overly sterile.
#8C6B3F140, 107, 6334, 38, 400, 24, 55, 45Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F2F0E8242, 240, 23248, 28, 930, 1, 4, 5RolesBg Dark, Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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-crimson: #D62828;
--color-cobalt: #1D4ED8;
--color-burgundy: #7A1F2B;
--color-slate-blue: #3A4A5A;
--color-sienna: #8C6B3F;
--color-white: #FFFFFF;
--color-ivory: #F2F0E8;
--color-charcoal: #111111;
}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: #D62828;
--role-btn-primary-bg: #D62828;
--role-link: #1D4ED8;
--role-btn-secondary-bg: #1D4ED8;
--role-btn-outlined-border: #1D4ED8;
--role-headline: #7A1F2B;
--role-icon: #3A4A5A;
--role-border: #3A4A5A;
--role-divider: #8C6B3F;
--role-outline: #8C6B3F;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-btn-outlined-text: #F2F0E8;
--role-bg-dark: #111111;
--role-text: #111111;
}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.{
"crimson": "#D62828",
"cobalt": "#1D4ED8",
"burgundy": "#7A1F2B",
"slate-blue": "#3A4A5A",
"sienna": "#8C6B3F",
"white": "#FFFFFF",
"ivory": "#F2F0E8",
"charcoal": "#111111"
}