Color

Color property animations for dynamic visual effects.

Standards Reference

Quick Reference

Load from: tokens/color.tokens.json

Hue Shift Values

Saturation Levels

Brightness Levels

Contrast Levels

Selection Guide

What color effect?
│
├── HUE SHIFT → Change color entirely
│   ├── Subtle mood → shift.subtle (10deg)
│   ├── Noticeable → shift.small (30deg)
│   ├── Complement → shift.complement (180deg)
│   └── Rainbow cycle → shift.full (360deg)
│
├── SATURATION → Color intensity
│   ├── Grayscale → saturation.grayscale (0)
│   ├── Muted/disabled → saturation.muted (0.5)
│   ├── Normal → saturation.normal (1)
│   └── Vibrant/highlight → saturation.vibrant (1.3)
│
├── BRIGHTNESS → Light/dark
│   ├── Darken → brightness.dark (0.5)
│   ├── Normal → brightness.normal (1)
│   ├── Brighten → brightness.bright (1.2)
│   └── Flash/blown → brightness.blown (2)
│
├── CONTRAST → Dynamic range
│   ├── Flat/soft → contrast.flat (0.5)
│   ├── Normal → contrast.normal (1)
│   ├── Punchy → contrast.punchy (1.2)
│   └── Extreme → contrast.extreme (2)
│
└── TEMPERATURE → Warm/cool
    ├── Cool (blue tint) → temperature.cool (-20deg)
    ├── Neutral → temperature.neutral (0deg)
    └── Warm (orange tint) → temperature.warm (20deg)

Patterns

Hue Shift Animation

Animate color through hue rotation.

CSS:

.hue-shift {
  filter: hue-rotate(0deg);
  transition: filter 300ms ease-out; /* {motion.color.duration.standard} */
}

.hue-shift:hover {
  filter: hue-rotate(30deg); /* {motion.color.shift.small} */
}

/* Rainbow cycle */
@keyframes rainbowCycle {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg); /* {motion.color.shift.full} */
  }
}

.rainbow {
  animation: rainbowCycle 5s linear infinite; /* {motion.color.cycle.period-medium} */
}

Framer Motion:

import { motion, useMotionValue, useTransform, animate } from 'framer-motion';

const HueShift = () => {
  const hue = useMotionValue(0);
  const filter = useTransform(hue, h => `hue-rotate(${h}deg)`);

  return (
    <motion.div
      style={{ filter }}
      whileHover={{
        filter: 'hue-rotate(30deg)', // {motion.color.shift.small}
        transition: { duration: 0.3 } // {motion.color.duration.standard}
      }}
    />
  );
};

GSAP:

// Hue shift on hover
gsap.to(element, {
  filter: "hue-rotate(30deg)", // {motion.color.shift.small}
  duration: 0.3, // {motion.color.duration.standard}
  ease: "power2.out"
});

// Continuous rainbow cycle
gsap.to(element, {
  filter: "hue-rotate(360deg)",
  duration: 5, // {motion.color.cycle.period-medium}
  ease: "none",
  repeat: -1
});

Saturation Animation

Animate between color and grayscale.

CSS:

.desaturate {
  filter: saturate(1); /* {motion.color.saturation.normal} */
  transition: filter 300ms ease-out;
}

.desaturate.disabled {
  filter: saturate(0.5); /* {motion.color.saturation.muted} */
}

.desaturate.grayscale {
  filter: saturate(0); /* {motion.color.saturation.grayscale} */
}

/* Reveal saturation on hover */
.grayscale-hover {
  filter: saturate(0);
  transition: filter 300ms ease-out;
}

.grayscale-hover:hover {
  filter: saturate(1.3); /* {motion.color.saturation.vibrant} */
}

Framer Motion:

const SaturationReveal = () => (
  <motion.div
    initial={{ filter: 'saturate(0)' }} // grayscale
    whileHover={{
      filter: 'saturate(1.3)', // {motion.color.saturation.vibrant}
      transition: { duration: 0.3 }
    }}
  />
);

GSAP:

// Desaturate to grayscale
gsap.to(element, {
  filter: "saturate(0)", // {motion.color.saturation.grayscale}
  duration: 0.3,
  ease: "power2.out"
});

// Enhance saturation
gsap.to(element, {
  filter: "saturate(1.3)", // {motion.color.saturation.vibrant}
  duration: 0.3,
  ease: "power2.out"
});

Brightness Flash

Quick brightness increase for attention.

CSS:

@keyframes brightnessFlash {
  0%, 100% {
    filter: brightness(1); /* {motion.color.brightness.normal} */
  }
  50% {
    filter: brightness(2); /* {motion.color.brightness.blown} */
  }
}

.flash-brightness {
  animation: brightnessFlash 200ms ease-out; /* {motion.color.duration.quick} */
}

Framer Motion:

const BrightnessFlash = () => (
  <motion.div
    animate={{
      filter: [
        'brightness(1)', // normal
        'brightness(2)', // {motion.color.brightness.blown}
        'brightness(1)'  // back to normal
      ]
    }}
    transition={{
      duration: 0.2, // {motion.color.duration.quick}
      times: [0, 0.5, 1]
    }}
  />
);

GSAP:

gsap.timeline()
  .to(element, {
    filter: "brightness(2)", // {motion.color.brightness.blown}
    duration: 0.1
  })
  .to(element, {
    filter: "brightness(1)", // {motion.color.brightness.normal}
    duration: 0.1
  });

Theme Transition

Smooth transition between color schemes.

CSS:

:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  transition: background-color 500ms ease-out, color 500ms ease-out;
  /* {motion.color.duration.smooth} */
}

:root.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Framer Motion:

const ThemeTransition = ({ isDark }: { isDark: boolean }) => (
  <motion.div
    animate={{
      backgroundColor: isDark ? '#1a1a1a' : '#ffffff',
      color: isDark ? '#ffffff' : '#1a1a1a'
    }}
    transition={{
      duration: 0.5, // {motion.color.duration.smooth}
      ease: [0.2, 0, 0, 1] // M3 standard
    }}
  />
);

Color Temperature Shift

Warm/cool color adjustment.

CSS:

.warm-filter {
  filter: hue-rotate(20deg) saturate(1.1);
  /* {motion.color.temperature.warm} + slight saturation boost */
  transition: filter 500ms ease-out;
}

.cool-filter {
  filter: hue-rotate(-20deg) saturate(0.9);
  /* {motion.color.temperature.cool} + slight desaturation */
  transition: filter 500ms ease-out;
}

GSAP:

// Warm shift (sunset feel)
gsap.to(element, {
  filter: "hue-rotate(20deg) saturate(1.1)",
  duration: 0.5,
  ease: "power2.out"
});

// Cool shift (moonlight feel)
gsap.to(element, {
  filter: "hue-rotate(-20deg) saturate(0.9)",
  duration: 0.5,
  ease: "power2.out"
});

Contrast Animation

Dynamic contrast adjustment.

CSS:

.high-contrast {
  filter: contrast(1); /* {motion.color.contrast.normal} */
  transition: filter 300ms ease-out;
}

.high-contrast:hover {
  filter: contrast(1.2); /* {motion.color.contrast.punchy} */
}

/* Dramatic reveal */
@keyframes contrastReveal {
  from {
    filter: contrast(0.5); /* {motion.color.contrast.flat} */
  }
  to {
    filter: contrast(1.2); /* {motion.color.contrast.punchy} */
  }
}

.reveal-contrast {
  animation: contrastReveal 500ms ease-out forwards;
}

Combined Color Effects

Multiple color properties animated together.

CSS:

/* Vintage/sepia effect */
.vintage {
  filter:
    sepia(0.8) /* {motion.color.filter.sepia-intensity} */
    saturate(0.75) /* slightly desaturated */
    contrast(1.1); /* slightly punchy */
  transition: filter 500ms ease-out;
}

/* Dramatic mood */
.dramatic {
  filter:
    saturate(1.3) /* {motion.color.saturation.vibrant} */
    contrast(1.2) /* {motion.color.contrast.punchy} */
    brightness(0.9);
  transition: filter 300ms ease-out;
}

/* Faded/muted */
.faded {
  filter:
    saturate(0.5) /* {motion.color.saturation.muted} */
    contrast(0.75)
    brightness(1.1);
  transition: filter 300ms ease-out;
}

Framer Motion:

const colorPresets = {
  normal: { filter: 'saturate(1) contrast(1) brightness(1)' },
  vintage: { filter: 'sepia(0.8) saturate(0.75) contrast(1.1)' },
  dramatic: { filter: 'saturate(1.3) contrast(1.2) brightness(0.9)' },
  faded: { filter: 'saturate(0.5) contrast(0.75) brightness(1.1)' }
};

<motion.div
  variants={colorPresets}
  animate="dramatic"
  transition={{ duration: 0.3 }}
/>

Remotion Implementation

import { interpolate, useCurrentFrame } from 'remotion';

export const ColorTransition: React.FC = () => {
  const frame = useCurrentFrame();

  // Hue cycle over 150 frames (5s at 30fps)
  const hue = interpolate(frame, [0, 150], [0, 360]);

  // Saturation pulse
  const saturation = interpolate(
    frame % 60,
    [0, 30, 60],
    [1, 1.3, 1] // {motion.color.saturation.normal} to vibrant and back
  );

  return (
    <div
      style={{
        filter: `hue-rotate(${hue}deg) saturate(${saturation})`,
        width: '100%',
        height: '100%',
        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)'
      }}
    />
  );
};

Reduced Motion

For prefers-reduced-motion: reduce:

Implementation:

@media (prefers-reduced-motion: reduce) {
  .hue-shift,
  .desaturate,
  .flash-brightness {
    transition: none;
    animation: none;
  }

  .rainbow {
    animation: none;
    /* Pick a static pleasant color instead */
  }

  /* Use non-animated feedback */
  .flash-brightness:active {
    box-shadow: 0 0 0 2px var(--accent-color);
  }
}

Cross-References

• See opacity/ for fade transitions combined with color
• See blur/ for color + blur combinations
• See stylization/ for color grade presets
• See transitions/ for theme transition patterns
• See compositing/ for blend mode effects
• See cinematic/ for color grading in video

References

• No additional references needed for this skill