Collection detail

Motion Brand Vivid

Check these colors together: contrast, harmony, color-blind view →Tap a color to copy its HEX

Animation brand palettes need colors that hold visual weight in motion without vibrating. This collection pairs cobalt and cyan with a near-black base and a warm amber accent — high contrast, low noise, designed to move. Use for brand idents, UI micro-interactions, and product launch animations.

Designed for brand animation and motion graphic contexts. Cobalt and cyan create energy; amber accent provides warmth and rhythm punctuation; charcoal base prevents vibration artifacts in fast transitions.

CoolMotionBrand

Why this set works

High-energy palette for brand animation — cobalt, cyan, and electric accent on near-black, calibrated for screen motion.

Brand animation and idents

UI micro-interaction color system

Product launch video palette

Prompt words

tech brand animation in cobalt and electric blueproduct launch motion graphic in vivid teal and amberUI animation system in high-contrast cobalt palette

Export ready

1. Cobalt Tone Vivid #4E80E4
2. Azure Shadow Vivid #13597C
3. Teal Ink Vivid #093E2D
4. Amber Core Vivid #D5B720
5. Cool Gray Shadow #43474C

:root {
  --motion-brand-vivid-1: #4E80E4;
  --motion-brand-vivid-2: #13597C;
  --motion-brand-vivid-3: #093E2D;
  --motion-brand-vivid-4: #D5B720;
  --motion-brand-vivid-5: #43474C;
}

Palette

Each swatch links back to its individual archive detail page.

Back to collections

Cobalt Tone Vivid

#4E80E4

Blue · hsl(220, 74%, 60%)

Azure Shadow Vivid

#13597C

Blue · hsl(200, 74%, 28%)

Teal Ink Vivid

#093E2D

Teal · hsl(160, 74%, 14%)

Amber Core Vivid

#D5B720

Yellow · hsl(50, 74%, 48%)

Cool Gray Shadow

#43474C

Blue · hsl(210, 6%, 28%)

More collections like this

Browse collections →

Take this palette further

Ready-made tokens for Motion Brand Vivid

Copy the HEX, CSS and Tailwind on this page any time. The ZIP and dark-mode tokens count toward the free 3 exports a day (10 when signed in); Pro removes that cap on every export, including Figma tokens and Procreate swatches in the palette builder.

Upgrade to Pro Browse collections

Upgrade path

From collection to Pro

This collection proves the taste and color direction. Pro removes the daily export cap on every token format, so the palette can move from reference to implementation without rationing.

Layer	What you have here	What Pro adds
Scope	One curated palette of 5 colors.	The same palettes, with no daily export cap anywhere on the site.
Output	HEX, CSS and Tailwind to copy any time. The ZIP and dark-mode tokens count toward the site's free exports: 3 a day, 10 when signed in.	No daily limit on any export: this ZIP (CSS, Tailwind, JSON, SCSS), the dark-mode tokens, and Figma tokens and Procreate swatches in the palette builder.
Use case	Direction finding, inspiration, and public proof.	Real project handoff, implementation, and reusable production assets.

Motion Brand Vivid

CoolMotionBrand

Layer

What you have here

What Pro adds

Scope

One curated palette of 5 colors.

The same palettes, with no daily export cap anywhere on the site.

Output

HEX, CSS and Tailwind to copy any time. The ZIP and dark-mode tokens count toward the site's free exports: 3 a day, 10 when signed in.

No daily limit on any export: this ZIP (CSS, Tailwind, JSON, SCSS), the dark-mode tokens, and Figma tokens and Procreate swatches in the palette builder.

Use case

Direction finding, inspiration, and public proof.

Real project handoff, implementation, and reusable production assets.