Casey Neistat Inspired Color Palette for Creator Brands

Casey Neistat Inspired Color Palette

A Casey Neistat-inspired system built around his unmistakable high-energy orange and a hard-edged electric blue, with crisp neutrals and restrained accents for a creator brand that feels fast, direct, and unmistakably digital. The palette keeps the website’s signature orange as the anchor while the dark

ComplementaryCreativecasey neistatcreator brandyoutube identityhigh energy

Main (Brand) Colors

The main colors pair the brand’s signature orange with a vivid blue that creates the same punchy, high-contrast energy associated with Casey Neistat’s visual style. Together they read instantly in thumbnails, interfaces, and motion graphics

PrimarySignature Creator Orange

RolesLogo, Btn Primary Bg, Headline

The core brand color: energetic, confident, and instantly recognizable as the website anchor.

HEX#FF6A13

RGB255, 106, 19

HSL22, 100, 54

CMYK0, 58, 93, 0

SecondaryElectric Channel Blue

RolesLink, Btn Secondary Bg, Btn Outlined Border

A sharp opposing tone that adds digital tension and keeps the palette feeling modern and fast.

HEX#0E5BFF

RGB14, 91, 255

HSL221, 100, 53

CMYK95, 64, 0, 0

Support Colors

The support accents extend the high-contrast creator feel without competing with the main orange and blue. They add structure and utility for interface states, media framing, and a

Warm Signal Sand

RolesBtn Outlined Text, Icon

A muted warm accent that softens the orange and helps outlined actions feel approachable.

HEX#E7B15B

RGB231, 177, 91

HSL37, 74, 63

CMYK0, 23, 61, 9

Slate Frame

RolesBorder, Divider, Outline

A restrained cool neutral-accent that reinforces structure and keeps layouts crisp.

HEX#2D3A4A

RGB45, 58, 74

HSL213, 24, 23

CMYK39, 22, 0, 71

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

Paper White

HEX#F4F1EA

RGB244, 241, 234

HSL42, 31, 94

CMYK0, 1, 4, 4

Deep Black

RolesBg Dark, Text, Btn Primary Text

HEX#111111

RGB17, 17, 17

HSL0, 0, 7

CMYK0, 0, 0, 93

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Signature Creator Orange", "hex": "#FF6A13", "role": "main", "cmyk": { "c": 0, "m": 58, "y": 93, "k": 0, "source": "colorfly" } }, { "name": "Electric Channel Blue", "hex": "#0E5BFF", "role": "main", "cmyk": { "c": 95, "m": 64, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Warm Signal Sand", "hex": "#E7B15B", "role": "support", "cmyk": { "c": 0, "m": 23, "y": 61, "k": 9, "source": "colorfly" } }, { "name": "Slate Frame", "hex": "#2D3A4A", "role": "support", "cmyk": { "c": 39, "m": 22, "y": 0, "k": 71, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Paper White", "hex": "#F4F1EA", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 4, "k": 4, "source": "colorfly" } }, { "name": "Deep Black", "hex": "#111111", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 93, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-signature-creator-orange: #FF6A13; --color-electric-channel-blue: #0E5BFF; --color-warm-signal-sand: #E7B15B; --color-slate-frame: #2D3A4A; --color-pure-white: #FFFFFF; --color-paper-white: #F4F1EA; --color-deep-black: #111111; }

:root { --role-logo: #FF6A13; --role-btn-primary-bg: #FF6A13; --role-headline: #FF6A13; --role-link: #0E5BFF; --role-btn-secondary-bg: #0E5BFF; --role-btn-outlined-border: #0E5BFF; --role-btn-outlined-text: #E7B15B; --role-icon: #E7B15B; --role-border: #2D3A4A; --role-divider: #2D3A4A; --role-outline: #2D3A4A; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #111111; --role-text: #111111; --role-btn-primary-text: #111111; }

{ "signature-creator-orange": "#FF6A13", "electric-channel-blue": "#0E5BFF", "warm-signal-sand": "#E7B15B", "slate-frame": "#2D3A4A", "pure-white": "#FFFFFF", "paper-white": "#F4F1EA", "deep-black": "#111111" }

<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: #FF6A13; --gradient-partner: #FFAD7D; --gradient-accent: #E7B15B; --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: #FF6A13; --gradient-text-b: #8A5D44; --gradient-text-c: #7D6031; 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>