Tailwind CSS Hue Rotate

Hue Rotate is a filter function that allows you to adjust the hues of an element's colors by rotating them around the color wheel. This technique is particularly useful when you're dynamically manipulating colors for effects like creating vibrant hover states, adjusting visuals in dark/light themes, or making unique transitions.

Tailwind CSS offers a comprehensive set of utilities for applying Hue Rotate effects directly to elements, making it seamless to integrate into your designs without writing custom CSS. This guide outlines everything from applying Hue Rotate in Tailwind CSS to customizing and extending its values.

Class	Properties	Example
`hue-rotate-0`	`filter: hue-rotate(0deg);`	`<div className="hue-rotate-0"></div>`
`hue-rotate-15`	`filter: hue-rotate(15deg);`	`<div className="hue-rotate-15"></div>`
`hue-rotate-30`	`filter: hue-rotate(30deg);`	`<div className="hue-rotate-30"></div>`
`hue-rotate-60`	`filter: hue-rotate(60deg);`	`<div className="hue-rotate-60"></div>`
`hue-rotate-90`	`filter: hue-rotate(90deg);`	`<div className="hue-rotate-90"></div>`
`hue-rotate-180`	`filter: hue-rotate(180deg);`	`<div className="hue-rotate-180"></div>`

Overview of Hue Rotate

Adding the Hue Rotate

To add a Hue Rotate effect to your elements, use hue-rotate-value utilities, e.g., hue-rotate-90, etc.

This is a live editor. Play around with it!

// Tailwind utility: hue-rotate

import React from "react";

export default function RotateHue() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-900">
      <img
        className="hue-rotate-180" // Rotates the hue by 180 degrees
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Hue Rotated"
      />
    </div>
  );
}

Adding the Negative Rotate

Negative Hue Rotate values are also available in Tailwind CSS and allow the reverse manipulation of hues.

This is a live editor. Play around with it!

// Tailwind utility: -hue-rotate

import React from "react";

export default function ReverseRotateHue() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-900">
      <img
        className="-hue-rotate-90" // Rotates the hue negatively by -90 degrees
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Negative Hue Rotation"
      />
    </div>
  );
}

Removing the Filters

If you want to omit all filters, including Hue Rotate, Tailwind provides a filter-none utility class. To remove only the hue, use hue-rotate-0.

This is a live editor. Play around with it!

// Disabling all filters including hue-rotate

import React from "react";

export default function DisableFilters() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-900">
      <img
        className="filter-none" // Removes hue adjustments
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="No Filter Applied"
      />
    </div>
  );
}

States and Responsiveness

Tailwind's utility classes can be applied conditionally to respond to states like hover, focus, or specific screen sizes.

Hover and Focus States

You can also define state-based Hue Rotate adjustments like hover or focus effects in Tailwind CSS.

This is a live editor. Play around with it!

// Hue Rotate on hover state 

import React from "react";

export default function HoverHueEffect() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-900">
      <img
        className="hue-rotate-45 hover:hue-rotate-180 transition duration-300 ease-in-out" // Rotates more intensely on hover
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Hover Effect"
      />
    </div>
  );
}

Breakpoint Modifiers

Responsive design and breakpoint-based customization are supported in Tailwind with modifiers like sm, md, etc.

This is a live editor. Play around with it!

// Adjust hue rotation based on screen size

import React from "react";

export default function ResponsiveHueRotate() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-900">
      <img
        className="hue-rotate-30 sm:hue-rotate-90 lg:hue-rotate-180" // Adjusting rotation for different breakpoints
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Responsive Hue Rotate"
      />
    </div>
  );
}

Custom Hue Rotate

For projects requiring flexibility, you can either extend Hue Rotate values in your Tailwind configuration or assign arbitrary values directly in your utilities.

Extending the Theme

Tailwind allows theme extensions to add your custom steps or ranges for Hue Rotate.

How to use extended Hue Rotate values:

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// Custom Hue Rotate values

import React from "react";

export default function CustomHueRotate() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-900">
      <img
        className="hue-rotate-75 hover:hue-rotate-270 transition duration-500" 
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Custom Hue Rotate"
      />
    </div>
  );
}

Using Arbitrary Values

When ultimate customization is needed, Tailwind's arbitrary value feature allows you to apply any rotation angle.

This is a live editor. Play around with it!

// Arbitrary Hue Rotate values 

import React from "react";

export default function ArbitraryRotate() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-900">
      <img
        className="hue-rotate-[135deg]" // Rotate exactly by 135 degrees
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Arbitrary Hue Value"
      />
    </div>
  );
}

Real World Examples

Product Card Color Shift Gallery

A product showcase that applies hue-rotate on hover to create an engaging color shift effect for fashion items.

This is a live editor. Play around with it!

export default function ProductGallery() {
  const products = [
    {
      id: 1,
      name: "Leather Crossbody Bag",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1584917865442-de89df76afd3",
      alt: "Brown leather crossbody bag"
    },
    {
      id: 2,
      name: "Designer Sunglasses",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1511499767150-a48a237f0083",
      alt: "Stylish sunglasses"
    },
    {
      id: 3,
      name: "Premium Watch",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1524592094714-0f0654e20314",
      alt: "Luxury wristwatch"
    },
    {
      id: 4,
      name: "Silk Scarf",
      price: "$89.99",
      src: "https://images.unsplash.com/photo-1606760227091-3dd870d97f1d",
      alt: "Patterned silk scarf"
    },
    {
      id: 5,
      name: "Gold Bracelet",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1573408301185-9146fe634ad0",
      alt: "Gold chain bracelet"
    },
    {
      id: 6,
      name: "Pearl Necklace",
      price: "$249.99",
      src: "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f",
      alt: "Pearl necklace"
    }
  ];

  return (
    <div className="grid gap-6 p-8">
      {products.map((product) => (
        <div key={product.id} className="group relative">
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-64 object-cover transition-all duration-300 group-hover:hue-rotate-60"
          />
          <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4 text-white">
            <h3 className="text-lg font-bold">{product.name}</h3>
            <p>{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Social profile cards with hue-rotate animation on profile pictures during user interaction.

This is a live editor. Play around with it!

export default function SocialProfiles() {
  const profiles = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "Digital Artist",
      followers: "12.5K",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile picture"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "UX Designer",
      followers: "8.2K",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Michael Chen profile picture"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Content Creator",
      followers: "15.7K",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Emma Williams profile picture"
    },
    {
      id: 4,
      name: "James Rodriguez",
      role: "Photographer",
      followers: "20.1K",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "James Rodriguez profile picture"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "Fashion Blogger",
      followers: "25.3K",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Lisa Thompson profile picture"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Tech Influencer",
      followers: "18.9K",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "David Kim profile picture"
    }
  ];

  return (
    <div className="grid gap-8 p-10">
      {profiles.map((profile) => (
        <div key={profile.id} className="flex items-center space-x-4 group bg-gray-100 p-6 rounded-xl">
          <img
            src={profile.src}
            alt={profile.alt}
            className="w-24 h-24 rounded-full object-cover group-hover:hue-rotate-90 transition-all duration-500"
          />
          <div>
            <h3 className="text-xl font-bold">{profile.name}</h3>
            <p className="text-gray-600">{profile.role}</p>
            <p className="text-blue-500">{profile.followers} followers</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Dynamic Blog Post Header

A blog post header with parallax effect and hue-rotate transition on featured images.

This is a live editor. Play around with it!

export default function BlogHeader() {
  const posts = [
    {
      id: 1,
      title: "The Future of AI in Design",
      author: "Alex Morgan",
      date: "June 15, 2023",
      src: "https://images.unsplash.com/photo-1677442136019-21780ecad995",
      alt: "AI design concept"
    },
    {
      id: 2,
      title: "Sustainable Architecture Trends",
      author: "Maria Garcia",
      date: "June 16, 2023",
      src: "https://images.unsplash.com/photo-1518780664697-55e3ad937233",
      alt: "Modern sustainable building"
    },
    {
      id: 3,
      title: "The Rise of Digital Art",
      author: "Chris Lee",
      date: "June 17, 2023",
      src: "https://images.unsplash.com/photo-1550784343-6bd0ce5d600b",
      alt: "Digital art installation"
    },
    {
      id: 4,
      title: "Future of Remote Work",
      author: "Sarah Wilson",
      date: "June 18, 2023",
      src: "https://images.unsplash.com/photo-1587560699334-cc4ff634909a",
      alt: "Remote work setup"
    },
    {
      id: 5,
      title: "Mindful Technology Usage",
      author: "David Park",
      date: "June 19, 2023",
      src: "https://images.unsplash.com/photo-1522159698025-071104a1ddbd",
      alt: "Mindfulness concept"
    },
    {
      id: 6,
      title: "Cryptocurrency Evolution",
      author: "Emma Thompson",
      date: "June 20, 2023",
      src: "https://images.unsplash.com/photo-1621761191319-c6fb62004040",
      alt: "Cryptocurrency visualization"
    }
  ];

  return (
    <div className="space-y-12 p-6">
      {posts.map((post) => (
        <div key={post.id} className="relative group">
          <div className="h-96 overflow-hidden">
            <img
              src={post.src}
              alt={post.alt}
              className="w-full h-full object-cover transform group-hover:scale-105 group-hover:hue-rotate-30 transition-all duration-700"
            />
          </div>
          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-8">
            <h2 className="text-3xl font-bold text-white">{post.title}</h2>
            <div className="flex items-center space-x-4 text-white mt-4">
              <span>{post.author}</span>
              <span>•</span>
              <span>{post.date}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Artistic Portfolio Grid

A creative portfolio layout with hue-rotate effects on project thumbnails.

This is a live editor. Play around with it!

export default function PortfolioGrid() {
  const projects = [
    {
      id: 1,
      title: "Abstract Harmony",
      category: "Digital Art",
      src: "https://images.unsplash.com/photo-1541701494587-cb58502866ab",
      alt: "Abstract digital artwork"
    },
    {
      id: 2,
      title: "Urban Perspectives",
      category: "Photography",
      src: "https://images.unsplash.com/photo-1449824913935-59a10b8d2000",
      alt: "Urban architecture photo"
    },
    {
      id: 3,
      title: "Nature's Palette",
      category: "Illustration",
      src: "https://images.unsplash.com/photo-1498736297812-3a08021f206f",
      alt: "Nature illustration"
    },
    {
      id: 4,
      title: "Motion Studies",
      category: "Animation",
      src: "https://images.unsplash.com/photo-1550745165-9bc0b252726f",
      alt: "Animation frames"
    },
    {
      id: 5,
      title: "Color Theory",
      category: "Graphic Design",
      src: "https://images.unsplash.com/photo-1550684376-efcbd6e3f031",
      alt: "Color study design"
    },
    {
      id: 6,
      title: "Digital Dreams",
      category: "3D Rendering",
      src: "https://images.unsplash.com/photo-1563089145-599997674d42",
      alt: "3D rendered artwork"
    }
  ];

  return (
    <div className="grid grid-cols-2 gap-1">
      {projects.map((project) => (
        <div key={project.id} className="relative group overflow-hidden">
          <img
            src={project.src}
            alt={project.alt}
            className="w-full h-80 object-cover transform group-hover:scale-110 group-hover:hue-rotate-180 transition-all duration-1000"
          />
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-75 transition-all duration-500 flex items-center justify-center">
            <div className="text-white text-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
              <h3 className="text-2xl font-bold">{project.title}</h3>
              <p className="mt-2">{project.category}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Interactive Music Album Covers

A music album showcase with dynamic hue-rotate effects on album artwork.

This is a live editor. Play around with it!

export default function AlbumCovers() {
  const albums = [
    {
      id: 1,
      title: "Neon Dreams",
      artist: "The Midnight Waves",
      year: "2023",
      src: "https://images.unsplash.com/photo-1619983081563-430f63602796",
      alt: "Neon Dreams album cover"
    },
    {
      id: 2,
      title: "Digital Sunset",
      artist: "Electronic Pulse",
      year: "2023",
      src: "https://images.unsplash.com/photo-1619983081593-e2ba5b543168",
      alt: "Digital Sunset album cover"
    },
  ];

  return (
    <div className="bg-gray-900 p-8 h-screen">
      <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
        {albums.map((album) => (
          <div key={album.id} className="group relative">
            <div className="aspect-square overflow-hidden rounded-lg">
              <img
                src={album.src}
                alt={album.alt}
                className="w-full h-full object-cover transform group-hover:scale-105 group-hover:hue-rotate-[120deg] transition-all duration-700"
              />
            </div>
            <div className="mt-4 text-white">
              <h3 className="text-xl font-bold">{album.title}</h3>
              <p className="text-gray-400">{album.artist}</p>
              <p className="text-sm text-gray-500">{album.year}</p>
            </div>
            <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <button className="bg-white text-black rounded-full p-2">
                ▶ Play
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Customization Examples

Dynamic Photography Portfolio Filter

This example demonstrates how to create a photography portfolio with dynamic hue-rotate filters that can be adjusted through hover states.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function PhotographyPortfolio() {
  return (
    <div className="grid gap-4 p-8 bg-gray-900">
      <div className="group relative overflow-hidden rounded-lg">
        <img
          src="https://images.unsplash.com/photo-1682687220923-c58b9a4592ae"
          className="w-full h-[350px] object-cover transition-all duration-300 hover:hue-rotate-custom"
          alt="Nature"
        />
        <div className="absolute bottom-0 p-4 text-white opacity-0 group-hover:opacity-100 transition-opacity">
          <h3 className="text-xl font-bold">Mountain Sunset</h3>
        </div>
      </div>
    </div>
  )
}

Interactive Product Showcase

This example shows how to implement a product showcase with different hue-rotate values for highlighting featured items.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductShowcase() {
  return (
    <div className="flex flex-col space-y-6 p-10 bg-white">
      <div className="relative group">
        <img
          src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
          className="w-full h-[300px] object-contain transition-all duration-500 
          group-hover:hue-rotate-product"
          alt="Product"
        />
        <div className="absolute bottom-[55px] left-0 right-0 bg-black bg-opacity-50 
        text-white p-4 opacity-0 group-hover:opacity-100 transition-opacity">
          <h2 className="text-2xl font-bold">Limited Edition Sneakers</h2>
          <p className="text-sm">$199.99</p>
        </div>
      </div>
    </div>
  )
}

Animated Button with Gradient Hue Shift

This examples shows a custom button component featuring animated gradient backgrounds with dynamic hue rotation effects.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function AnimatedButton() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-800">
      <button className="relative group">
        <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 
                      rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 
                      group-hover:duration-200 animate-tilt group-hover:hue-rotate-gradient"></div>
        <div className="relative px-7 py-4 bg-black rounded-lg leading-none flex items-center">
          <span className="text-gray-100 group-hover:text-white transition duration-200
                         flex items-center space-x-2">
            <svg
              className="w-6 h-6 group-hover:hue-rotate-pulse transition duration-200"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M13 10V3L4 14h7v7l9-11h-7z"
              />
            </svg>
            <span className="font-semibold">Animated Button</span>
          </span>
        </div>
      </button>
    </div>
  );
}

Best Practices

Maintain Design Consistency

Consistency is key when using Tailwind CSS Hue Rotate utilities, especially in large projects with multiple components. Aligning hue-rotate angles across various elements ensures that your design adheres to a cohesive visual language. Using Tailwind’s default degrees (e.g., 15°, 45°, 90°, etc.) can help maintain uniformity, especially when creating reusable UI components such as buttons, hover effects for cards, and dynamic image galleries.

For centralized control, consider defining hue-rotate values in tailwind.config.js to promote uniformity across the codebase. This allows all developers on your team to use pre-set values that create a cohesive aesthetic. For instance, define common branding adjustments like hue-rotate-primary or hue-rotate-accent for themes, making it seamless to swap out values globally.

Leverage Utility Combinations

Combining Hue Rotate with other filter utilities like brightness, contrast, or layout modifiers such as flex, grid, and position provides flexibility to craft engaging visual designs. For instance, pairing hue-rotate-45 with brightness-125 and hover:scale-105 transition-all can produce an animated effect that shifts colors subtly while maintaining user experience.

For interactive layouts, combine Hue Rotate effects with Tailwind's state and responsive modifiers. For instance, a hover or breakpoint-specific rule like sm:hue-rotate-45 hover:brightness-125 produces contextually adaptive effects without relying on additional JavaScript scripting.

Accessibility Considerations

Enhance Readability and Navigability

While Hue Rotate adds impactful visuals, prioritize contrast ratios under Web Content Accessibility Guidelines (WCAG). High rotation degrees like hue-rotate-180 paired with insufficient contrast in text or background properties can impair readability. Counterbalance with Tailwind’s text utilities (text-opacity, font-bold) and spacing utilities (m-*/p-*) for legible layouts.

When multiple interactive components like sliders, accordions, and tooltips overlap temporally, apply subtle Hue Rotate intervals (hue-rotate-15) to distinguish active/inactive interfaces.

Support Accessible Interactive Elements

Interactive components, such as buttons and toggles, are central to user engagement. Ensuring that these elements remain accessible after applying Hue Rotate is vital.

For clickable components, consider how color changes communicate their states—hover, active, focus, or disabled. A hue rotation can be an engaging way to provide visual feedback, signaling interactivity and status to users. For example, a button could shift to a more vibrant hue when hovered, but it should still retain enough contrast against its text.

Sepia Grayscale

Tailwind CSS Hue Rotate

Overview of Hue Rotate

Adding the Hue Rotate

Adding the Negative Rotate

Removing the Filters

States and Responsiveness

Hover and Focus States

Breakpoint Modifiers

Custom Hue Rotate

Extending the Theme

Using Arbitrary Values

Real World Examples

Product Card Color Shift Gallery

Interactive Social Media Profile Cards

Dynamic Blog Post Header

Artistic Portfolio Grid

Interactive Music Album Covers

Customization Examples

Dynamic Photography Portfolio Filter

Interactive Product Showcase

Animated Button with Gradient Hue Shift

Best Practices

Maintain Design Consistency

Leverage Utility Combinations

Accessibility Considerations

Enhance Readability and Navigability

Support Accessible Interactive Elements