start learning
Image 1
28101010111

Hue, Saturation, Color, and Luminosity mode

The "hue," "saturation," "color," and "luminosity" blend modes are special CSS blend modes that specifically target and modify different color properties of the top element based on the underlying element. These blend modes don't use the usual mathematical calculations like "multiply" or "screen." Instead, they alter the top element's colors to match the underlying element's colors in specific ways.

Here's a brief explanation of each mode:

  1. Hue Blend Mode: Adjusts the hue (color) of the top element to match the hue of the underlying element while preserving the luminance and saturation of the top element.
  2. Saturation Blend Mode: Adjusts the saturation of the top element to match the saturation of the underlying element while preserving the hue and luminance of the top element.
  3. Color Blend Mode: Adjusts both the hue and saturation of the top element to match the hue and saturation of the underlying element while preserving the luminance of the top element.
  4. Luminosity Blend Mode: Adjusts the luminance (brightness) of the top element to match the luminance of the underlying element while preserving the hue and saturation of the top element.

These modes can be used to create unique color effects, harmonize elements with different colors, or even desaturate elements to create grayscale effects.
Here's a simplified example of using the "hue" blend mode in CSS:


.hue-blend-example {
    background-color: red; /* Background color of the container */
    mix-blend-mode: hue; /* Applying the hue blend mode */
    color: white;
    padding: 20px;
    font-size: 24px;
}

In this example, the element with the class hue-blend-example would appear with a red background color using the "hue" blend mode. The text within this element would take on the hue (color) of the background while preserving its original luminance and saturation.
These blend modes can create artistic and visually interesting effects when applied thoughtfully to your web design.

×