One important aspect to consider is choosing an initial color. Technically, white, black, and grayscale are not actual colors as they cannot be saturated or rotated. To work with these shades, a form of colorization must be applied, such as the sepia filter.

If the image were a 100% pure red, it would be easier to achieve the desired result by directly adding the target degree and adjusting saturation and lightness using HSL (Hue, Saturation, Lightness). However, since we are starting with white, the first step is to convert it into an intermediate color that can be later saturated and rotated.

Let's begin by darkening the white image and applying the sepia filter to obtain a "base" color for further adjustments:

filter: brightness(50%) sepia(1);

The above code will produce an approximately RGB color value of:

rgb(178, 160, 128)

The second step involves converting this base color to the target color. This process remains static, meaning its result can be reused every time a target adjustment is needed. By converting the target color (#689d94 in this example) to its corresponding HSL values, we get:

hsl(170, 21.3%, 51.2%);

Resulting Base Color

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: brightness(50%) sepia(1);
  filter: brightness(50%) sepia(1);
}

<div></div>

Converting Base Color to Target Color

The hue, saturation, and lightness values between the base color and target color need to be calculated. To determine the hue, subtract the base hue value from the target hue value. For saturation and lightness, assume a base value of 100% and calculate the difference accordingly:

H:  170 - 38             ->  132°
S:  100 + (24.5 - 21.3)  ->  103.2%  (relative to base 100% =  3.2%)
L:  100 + (51.2 - 60.0)  ->   91.2%  (relative to base 100% = -8.8%)

Concatenate these values into a filter string and append them to the existing filter. Finally, apply this updated filter to the div element:

/*      ------ base color ------  -------  new target -------------------------------*/
filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

To set this filter dynamically, utilize JavaScript and modify the style of the div element:

...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divElement.style.filter = filter;
divElement.style.webkitFilter = filter;

Note that due to rounding errors between integer-based RGB and floating point HSL representations, the actual result may not be exact but should closely approximate the target color.

Live Example

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
  filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
}

<div></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>

Viable alternatives include:

• Predefining SVGs with the desired colors already set.
• Working directly with HSL/RGB values in JavaScript and modifying the SVG tree to incorporate the required color. This approach avoids filters, which can impact performance, especially when chaining multiple filters together as shown here. Additionally, not all browsers support filters.

The answer provided is incorrect. The hue-rotate method does not maintain saturation or brightness, requiring complex calculations to obtain accurate values.

[Update: The original poster has modified their response and the statements mentioned above are no longer valid]

A simpler approach that guarantees correct results is to use a CSS filter that references an SVG filter. By utilizing the feColorMatrix primitive within SVG filters, it becomes possible to directly select a color.

For instance, take the color #424242 - divide each RGB channel value by #FF and input them into the fifth column of the first three rows within your color matrix. In this specific case, hex #42 equals 68 in decimal, dividing it by 255 (#FF in decimal) yields 0.257 - which will be placed in the fifth column of the first three rows.

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: url(#colorize);
  filter: url(#colorize);
}

<div>
  </div>

<svg>
<defs>
<filter id="colorize" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0 0 0 0 .257
                                 0 0 0 0 .257
                                 0 0 0 0 .257
                                 0 0 0 1 0"/>
 
/filter>
</defs>
</svg>

CSS Filter Converter for Hex Colors

Discover an efficient tool to convert hex colors into CSS filters by visiting:

Here is a unique extension method in C# that I came up with:

public static class CustomColorExtensions
{
    public static string ConvertToSvgFilter(this string value)
    {
        Color color = ColorTranslator.FromHtml(value);
        int r = Convert.ToInt16(color.R);
        int g = Convert.ToInt16(color.G);
        int b = Convert.ToInt16(color.B);

        decimal converted_r = (decimal)r / 255;
        decimal converted_g = (decimal)g / 255;
        decimal converted_b = (decimal)b / 255;

        return $"url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"{value.Replace("#", "")}\" color-interpolation-filters=\"sRGB\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 {converted_r} 0 0 0 0 {converted_g} 0 0 0 0 {converted_b} 0 0 0 1 0\"/></filter></defs></svg>{value}')";
    }
}

You can use it like this:

    protected override async Task OnInitializedAsync()
    {
        _menuItemSvgFilter = "#f20c96".ConvertToSvgFilter();            

        await base.OnInitializedAsync();
    }

Here is an example of how to use it in your razor code:

<NavLink class="menu-font" href="inboundorders">
     <img src="/img/svg_icon/ICON_ORDER.svg" /> Orders
</NavLink>

To apply the styling, make sure to add this CSS at the end:

<style type="text/css">
.menu-font img 
{
    filter: @_menuItemSvgFilter;
}
</style>