Convert rich text content colors in dark mode like MS outlook

I am trying to convert the rich text content colors into dark mode. As of now, for rich text content I am using filter:invert(1) option. But, I want to solve this through alternative way. For example, Microsoft outlook parses it correctly.

Outlook Light Mode:

Outlook Dark Mode:

filter:invert(1) option turns magenta color into green in dark mode. But, MS outlook turns magenta color into some light violet in dark mode.

I want to know the calculation method to convert the rich text background and text colors in dark mode instead of CSS filter:invert method. I tried this, but it didn't work out as expected.

function HslToRgb(h, s, l) {
                h /= 360;
                s /= 100;
                l /= 100;
                let r, g, b;
                if (s === 0) {
                    r = g = b = l; // achromatic
                } else {
                    const hue2rgb = (p, q, t) => {
                    if (t < 0) t += 1;
                    if (t > 1) t -= 1;
                    if (t < 1 / 6) return p + (q - p) * 6 * t;
                    if (t < 1 / 2) return q;
                    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                    return p;
                    };
                    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                    const p = 2 * l - q;
                    r = hue2rgb(p, q, h + 1 / 3);
                    g = hue2rgb(p, q, h);
                    b = hue2rgb(p, q, h - 1 / 3);
                }
                return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
                // const toHex = x => {
                //     const hex = Math.round(x * 255).toString(16);
                //     return hex.length === 1 ? '0' + hex : hex;
                // };
                // return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
            }

            function adjustGamma(p) {
                if (p <= 0.03928) {
                    return p / 12.92;
                } else {
                    return Math.pow( ( p + 0.055 ) / 1.055, 2.4 );
                }
            }

            function relativeLuminance(rgb) {
                const r = adjustGamma( rgb[0] / 255 );
                const g = adjustGamma( rgb[1] / 255 );
                const b = adjustGamma( rgb[2] / 255 );
                return 0.2126 * r + 0.7152 * g + 0.0722 * b;
            }
            
            $(document).ready(function() {
                var hue = $("#h").text();
                var saturation = $("#s").text();
                var lightness = $("#l").text();
                var lightnessPercentage = lightness / 100;
                var luminance = $("#relativeLuminance").text();

                $('#slider').slider({
                    value: 27,
                    max: 360,
                    min: 0,
                    slide: function(event, ui) {
                        $(":root").css({
                            '--hue': ui.value+''
                        });
                        $(".hue").text(ui.value+'');
                        $("#outputrect").css('background-color', 'hsl('+ui.value+', '+saturation+'%, '+lightness+'%)');
                    }
                });
                $('#saturation').slider({
                    value: 30,
                    max: 100,
                    min: 0,
                    slide: function(event, ui) {
                        $(":root").css({
                            '--saturation': ui.value+'%'
                        });
                        $(".saturation").text(ui.value+'');
                        $("#outputrect").css('background-color', 'hsl('+hue+', '+ui.value+'%, '+lightness+'%)');
                    }
                });
                $('#lightness').slider({
                    value: 47,
                    max: 100,
                    min: 0,
                    slide: function(event, ui) {
                        $(":root").css({
                            '--lightness': ui.value+'%'
                        });
                        $(".lightness").text(ui.value+'');
                        if (($("#l").text() / 100) < 0.5) {
                            $("#newlightness").text(0.5 + (0.5 - ($("#l").text() / 100)));
                            $("#resultlight").text((0.5 + (0.5 - ($("#l").text() / 100))) * 100);
                            resultlight = (0.5 + (0.5 - ($("#l").text() / 100))) * 100;
                        } else if (($("#l").text() / 100) > 0.5) {
                            $("#newlightness").text(0.5 - (($("#l").text() / 100) - 0.5));
                            $("#resultlight").text((0.5 - (($("#l").text() / 100) - 0.5)) * 100);
                            resultlight = (0.5 - (($("#l").text() / 100) - 0.5)) * 100
                        }
                        $("#outputrect").css('background-color', 'hsl('+hue+', '+saturation+'%, '+resultlight+'%)');
                    }
                });
            });

:root {
                --hue: 27;
                --saturation: 30%;
                --lightness: 47%;
            }
            .rect {
                width: 100px;
                height: 50px;
                background-color: hsl(var(--hue), var(--saturation), var(--lightness));
            }

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>They parse the color in terms of Hue / Saturation / Lightness, and reflect the Lightness value across the 0.5 plane, for use on the dark background. So, for old lightness < 0.5, the new lightness is 0.5 + (0.5 - old). For old lightness > 0.5, new lightness is 0.5 - (old - 0.5).</p>
        <h4>Slide to change Hue:</h4>
        <div id="slider"></div>
        <b>Hue value: <span id="hueValue" class="hue">27</span></b>
        <br/><br/>
        <div id="saturation"></div>
        <b>Saturation value: <span id="saturationValue" class="saturation">30</span>%</b>
        <br/><br/>
        <div id="lightness"></div>
        <b>Lightness value: <span id="lightnessValue" class="lightness">47</span>%</b>
        <br/><br/>
        <div class="rect"></div>
        <span><b>HSL:</b> hsl(<span id="h" class="hue">27</span>, <span id="s" class="saturation">30</span>, <span id="l" class="lightness">47</span>)</span><br/>
        <span><b>Lightness:</b> <span id="newlightness"></span><br/>
        <span><b>Output HSL:</b> hsl(<span class="hue">27</span>, <span class="saturation">30</span>, <span id="resultlight">47</span>)</span><br/>
        <div class="rect" id="outputrect"></div>
        <br/>

from Convert rich text content colors in dark mode like MS outlook