Hue Rotation Playground
Explore the effects of CSS hue rotation on colors and images. Understand how different rotation angles affect various colors and create dynamic color transformations for your web projects.
Generated CSS
.filtered-element {
filter:
hue-rotate(0deg)
saturate(100%)
brightness(100%)
contrast(100%)
;
}Understanding Hue Rotation
Hue rotation is a powerful CSS filter that allows you to shift colors around the color wheel without affecting brightness or saturation. It's particularly useful for creating dynamic color effects and theme variations.
Key Concepts
- Rotation occurs around the color wheel (0-360 degrees)
- Preserves brightness and saturation levels
- Can be animated for dynamic effects
- Works on both images and solid colors
Common Applications
- Theme color variations
- Image filters and effects
- Interactive color transitions
- Brand color adaptations
Implementation Techniques
1. Basic Hue Rotation
Apply hue rotation using the CSS filter property:
.color-shift {
filter: hue-rotate(90deg);
}
/* Multiple filters */
.color-transform {
filter: hue-rotate(180deg) saturate(150%) brightness(120%);
}2. Animated Rotation
Create dynamic color transitions with CSS animations:
@keyframes rotate-hue {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
.animated-hue {
animation: rotate-hue 5s linear infinite;
}3. Interactive Controls
Implement user-controlled hue rotation with CSS custom properties:
:root {
--hue-rotation: 0deg;
}
.adjustable-hue {
filter: hue-rotate(var(--hue-rotation));
transition: filter 0.3s ease;
}4. Combining with Other Filters
Create complex color transformations by combining multiple filters:
.complex-transform {
/* Order matters for filter combinations */
filter:
hue-rotate(90deg) /* Shift colors */
saturate(120%) /* Increase color intensity */
brightness(110%) /* Adjust lightness */
contrast(110%); /* Enhance contrast */
}Color Theory and Hue Rotation
Color Wheel Relationships
Understanding how colors shift during rotation:
- 90° rotation shifts primary colors to their neighbors
- 180° rotation creates complementary colors
- 270° rotation produces triadic relationships
- 360° rotation returns to original colors
Effect on Different Colors
How hue rotation affects various color types:
- Primary colors shift predictably around the wheel
- Grayscale values remain unchanged
- Saturation levels are preserved
- Brightness relationships stay constant
Performance Considerations
Optimize hue rotation implementations:
- Use hardware acceleration when possible
- Consider animation performance impact
- Test on various devices and browsers
- Monitor GPU usage for complex effects
Related Tools and Resources
Frequently Asked Questions
How does hue rotation affect grayscale colors?
Grayscale colors (including black, white, and pure grays) are not affected by hue rotation since they have no hue component. However, colors with even slight saturation will shift around the color wheel.
Can I animate hue rotation smoothly?
Yes, hue rotation can be animated using CSS transitions or animations:
/* Smooth transition on hover */
.color-shift {
filter: hue-rotate(0deg);
transition: filter 0.3s ease;
}
.color-shift:hover {
filter: hue-rotate(180deg);
}
/* Continuous animation */
.rainbow-effect {
animation: rainbow 5s linear infinite;
}
@keyframes rainbow {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}How do I combine hue rotation with other filters?
Multiple filters can be combined, but order matters:
/* Example filter combinations */
.filter-combo {
/* Adjust colors first, then modify intensity */
filter:
hue-rotate(45deg)
saturate(150%)
brightness(110%)
contrast(120%);
}What's the browser support for hue rotation?
Implement with appropriate fallbacks:
/* Progressive enhancement */
.color-effect {
/* Fallback for older browsers */
background-color: #ff0000;
/* Modern browsers */
@supports (filter: hue-rotate(0deg)) {
background-color: #ff0000;
filter: hue-rotate(90deg);
}
}Advanced Techniques
Dynamic Theme Generation
/* Theme generation with hue rotation */
.theme-generator {
--base-hue: 0deg;
--complement-hue: calc(var(--base-hue) + 180deg);
--accent-hue: calc(var(--base-hue) + 90deg);
}
.theme-color {
filter: hue-rotate(var(--base-hue));
}
.complement-color {
filter: hue-rotate(var(--complement-hue));
}
.accent-color {
filter: hue-rotate(var(--accent-hue));
}Image Effects
/* Creative image effects */
.duotone-effect {
filter:
grayscale(100%)
sepia(50%)
hue-rotate(var(--effect-hue))
saturate(150%);
}
.color-splash {
filter:
hue-rotate(var(--splash-hue))
saturate(200%)
contrast(150%);
mix-blend-mode: hard-light;
}