Signature Creator Orange#FF6A13
Electric Channel Blue#0E5BFF
Warm Signal Sand#E7B15B
Slate Frame#2D3A4A
Palette direction

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
palette-preview.example
Creative color direction

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

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Deep Black #111111on Signature Creator Orange #FF6A136.6:1 Strong
Logo Pure White #FFFFFFon Electric Channel Blue #0E5BFF5.3:1 Strong
Logo Deep Black #111111on Pure White #FFFFFF18.9:1 Excellent
Logo Pure White #FFFFFFon Deep Black #11111118.9:1 Excellent
Icon color
BackgroundSignature Creator Orange#FF6A13TextDeep Black#111111
Primary Button6.58:1
AA

Best for the main action users should notice first.

BackgroundElectric Channel Blue#0E5BFFTextPure White#FFFFFF
Secondary Button5.30:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextWarm Signal Sand#E7B15B
Outlined Button1.94:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextElectric Channel Blue#0E5BFF
Text Button5.30:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition7 colorsComplementary color relationship
9:41Casey Neistat Inspired Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CCasey Neistat Inspired Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

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

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Signature Creator Orange #FF6A13
HeadlineUsed for main titles and key messages.Signature Creator Orange #FF6A13
LinkUsed for links and interactive text.Electric Channel Blue #0E5BFF

Buttons

Primary Button
BackgroundSignature Creator Orange #FF6A13
TextDeep Black #111111
Secondary Button
BackgroundElectric Channel Blue #0E5BFF
TextPure White #FFFFFF
Outlined Button
BackgroundElectric Channel Blue #0E5BFF
TextWarm Signal Sand #E7B15B

Interface

TextDefault readable body text.Deep Black #111111
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Deep Black #111111
IconSmall interface icons and marks.Warm Signal Sand #E7B15B
BorderCards, inputs, and component borders.Slate Frame #2D3A4A
DividerSubtle separators between content.Slate Frame #2D3A4A
OutlineFocus rings and emphasis outlines.Slate Frame #2D3A4A

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

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

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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-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;
}

Role tokens

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: #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;
}

JSON

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.
{
    "signature-creator-orange": "#FF6A13",
    "electric-channel-blue": "#0E5BFF",
    "warm-signal-sand": "#E7B15B",
    "slate-frame": "#2D3A4A",
    "pure-white": "#FFFFFF",
    "paper-white": "#F4F1EA",
    "deep-black": "#111111"
}
Press Space to load new palette