How to Change Image Color in CSS?

Last Updated : 16 Jan, 2025

Here are the methods to Change Image Color in CSS:

1. Applying CSS Filters

CSS filters allow you to apply visual effects directly to images, such as changing colors, adjusting brightness, or applying grayscale.

HTML

<html>
<head>
    <style>
        .grayscale {
            filter: grayscale(100%);
        }
        .sepia {
            filter: sepia(100%);
        }
        .invert {
            filter: invert(100%);
        }
        .hue-rotate {
            filter: hue-rotate(90deg);
        }
    </style>
</head>
<body>
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20250110152645755970/How-is-Multimodal-Machine-Learning-Transforming-the-Biomedical-Sector.jpg" alt="Original Image">
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20250110152645755970/How-is-Multimodal-Machine-Learning-Transforming-the-Biomedical-Sector.jpg" class="grayscale" alt="Grayscale Image">
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20250110152645755970/How-is-Multimodal-Machine-Learning-Transforming-the-Biomedical-Sector.jpg" class="sepia" alt="Sepia Image">
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20250110152645755970/How-is-Multimodal-Machine-Learning-Transforming-the-Biomedical-Sector.jpg" class="invert" alt="Inverted Image">
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20250110152645755970/How-is-Multimodal-Machine-Learning-Transforming-the-Biomedical-Sector.jpg" class="hue-rotate" alt="Hue Rotated Image">
</body>
</html>

The filter property applies visual effects to the image.
Different filter functions like grayscale(), sepia(), invert(), and hue-rotate() adjust the image's appearance accordingly.

2. Using SVG with CSS

Scalable Vector Graphics (SVG) can be manipulated with CSS to change their colors dynamically.

HTML

<html>
<head>
    <style>
        .svg-icon {
            fill: blue;
            width: 100px;
            height: 100px;
        }
        .svg-icon:hover {
            fill: red;
        }
    </style>
</head>
<body>
    <svg class="svg-icon" viewBox="0 0 64 64">
        <circle cx="32" cy="32" r="30" />
    </svg>
</body>
</html>

The fill property in CSS changes the color of the SVG shape.
Hovering over the SVG changes its color from blue to red.

3. Overlaying with Background Color and Blend Modes

This method involves placing a colored overlay over an image and using blend modes to achieve the desired color effect.

HTML

<html>
<head>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        .image-container img {
            display: block;
        }
        .image-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 0, 0, 0.5); /* Red overlay with 50% opacity */
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20250110152839429850/Machine-Learning-Transforming-the-Biomedical-Sector.jpg" alt="Image with Red Overlay">
    </div>
</body>
</html>

A pseudo-element (::after) is used to create an overlay with a semi-transparent background color.
The mix-blend-mode property defines how the overlay blends with the image beneath it.

How to Change Font Color in HTML?

maheshdaxt

Improve

Article Tags :

How to Change Image Color in CSS?

1. Applying CSS Filters

2. Using SVG with CSS

3. Overlaying with Background Color and Blend Modes

Similar Reads

Thank You!

What kind of Experience do you want to share?