Skip to main content

css-colors

For achieving a singular grayscale or monotone palette on a multicolor image using CSS, you have two primary approaches leveraging the filter property and its functions:

1. Grayscale Palette (Black, White, and Shades of Gray)​

To convert a multicolor image to a simple grayscale palette, use the grayscale() filter function.

  • Syntax:

    img {
      filter: grayscale(100%); /* Completely converts to grayscale */
    }

  • Explanation:

    • The grayscale() function accepts a percentage or a number (0 to 1).
    • A value of 100% (or 1) fully converts the image to grayscale, effectively removing all color saturation and leaving only shades of gray.
    • A value of 0% (or 0) leaves the image unchanged. Values between 0% and 100% apply a partial grayscale effect.

2. Tinted Monotone Palette (A Single Color and its Shades)​

To create a monotone effect where the image is rendered in a single color (like blue, red, or sepia) and its shades, you need to combine the sepia() and hue-rotate() filter functions.

  • Step 1: Convert to a base color:

    • Start by applying the sepia() filter with a value of 100% (or 1). This converts the image to a sepia (brownish-yellow) monotone base.
    img {
      filter: sepia(100%);
    }

  • Step 2: Change the tint to the desired color:

    • Chain the hue-rotate() filter to shift the hue of the sepia-toned image to your target color. The value is an angle in degrees (deg).
    img.monotone-blue {
      filter: sepia(100%) hue-rotate(180deg); /* Adjust hue for a blue tint */
    }

    img.monotone-green {
      filter: sepia(100%) hue-rotate(90deg);  /* Adjust hue for a green tint */
    }

  • Alternative Monotone Method (Advanced): For more complex or precise monotone effects, or if the sepia()/hue-rotate() combination doesn't yield the exact result, you can use a combination of filters like grayscale(), brightness(), and contrast(), or even employ SVG filters applied via the url() function within the CSS filter property.

  • Note on Order: When chaining multiple filter functions, the order matters. Filters are applied sequentially from left to right.

You can learn more about how to use the grayscale() filter function in this tutorial on Apply the #Grayscale CSS #Filter to an Image and Change to Color on Hover.