CSS Property: filter: hue-rotate()

The filter: hue-rotate property applies a hue rotation to an image. The value specifies the number of degrees around the color circle by which the hues of the image will be adjusted. 0deg is the default and represents the original image. The maximum value is 360 degrees (360deg).

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filter: hue-rotate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        img {
            filter: hue-rotate(45deg);
        }
    </style>
</head>
<body>
<img src="/demo/smiley.png" width="403" height="336" alt="Smiley">
</body>
</html>

RESULT