Colores corporativos:<br/>
<table id="mapeoColores">
    <thead><tr><td>Color</td><td>H</td><td>S</td><td>L</td><td>A</td><td>Evaluada</td><td>Complementario</td></tr></thead>
    <tbody></tbody>
</table>
Selección colores:<br/>
<table id="mapeoColoresAjustable">
    <thead><tr><td>Color</td><td>Seleccionado</td><td>Evaluado</td></tr></thead>
    <tbody></tbody>
</table>
<style type="text/css" >
    #mapeoColores td:nth-of-type(1){
        min-width: max-content;
    }
    #mapeoColores td:nth-of-type(2){
        min-width: min-content;
    }
    #mapeoColores td:nth-of-type(3){
        min-width: min-content;
    }
    #mapeoColores td:nth-of-type(4){
        min-width: min-content;
    }
    #mapeoColores td:nth-of-type(5){
        min-width: min-content;
    }
    #mapeoColores td:nth-of-type(6){
        min-width: min-content;
        font-size: 1.2em;
        font-weight: 900;
    }
    #mapeoColores td:nth-of-type(7){
        width: auto;
        font-size: 1.2em;
        font-weight: 900;
    }

    #mapeoColoresAjustable td:nth-of-type(1){
        width: max-content;
    }
    #mapeoColoresAjustable td:nth-of-type(2){
        width: max-content;
    }
    #mapeoColoresAjustable td:nth-of-type(3){
        width: max-content;
    }
    #mapeoColoresAjustable td:nth-of-type(4){
        width: auto;
    }
</style>
<script type="text/javascript">
    function mostrarColor(i) {
        let H = $('#' + i + '_H').val();
        let S = $('#' + i + '_S').val();
        let L = $('#' + i + '_L').val();
        let A = $('#' + i + '_A').val();
        let color = 'hsla(' + H + ',' + S + '%,' + L + '%,' + A + '%)';
        let donde = '#mapeoColores>tbody>tr[id="' + i + '"]>:nth-child(6)';
        $(donde).html(color);
        $(donde).css('background-color', color);
        $(donde).css('color', complementario(color));
        $('#' + i + '>td:nth-of-type(2)').css('background-color', 'hsl(' + H + ',100%,50%)');
        $('#' + i + '>td:nth-of-type(7)').html(complementario(color));
        $('#' + i + '>td:nth-of-type(7)').css('color', color);
        $('#' + i + '>td:nth-of-type(7)').css('background-color', complementario(color));

    }

    function extraerValores(hsl) {
        let res = hsl.match(/hsla[(](.*?),(.*?)%,(.*?)%,(.*?)%[)]/);
        return res;
    }
    function complementario(hsla) {
        let componentes = extraerValores(hsla);
        componentes[1] = parseFloat(componentes[1]);
        componentes[2] = parseFloat(componentes[2]);
        componentes[3] = parseFloat(componentes[3]);
        componentes[4] = parseFloat(componentes[4]);

        let saturacion = componentes[2];
        let luminosidad = (100 - componentes[3]);
        let contraste = (componentes[3] > luminosidad) ? ((componentes[3] + 0.05) / (luminosidad + 0.05)) : ((luminosidad + 0.05) / (componentes[3] + 0.05));
        let alfa = componentes[4];

        let minRatio = 4.5;
        if (contraste < minRatio) {
            if ((componentes[3] > luminosidad)) {
                luminosidad = Math.round(((componentes[3] + 0.05) / minRatio) - 0.05);
            } else {
                luminosidad = Math.round(((componentes[3] + 0.05) * minRatio) - 0.05);
            }
        }
        if (luminosidad > 100)
            luminosidad = 100;

        contraste = (componentes[3] > luminosidad) ? ((componentes[3] + 0.05) / (luminosidad + 0.05)) : ((luminosidad + 0.05) / (componentes[3] + 0.05));

        /*
         let ratio=21;
         // ratio=(a+0.05)/(b+0.05) ->
         // Si origen>50 : b=((a+0.05)/ratio)-0.05
         // Si origen<50 : a=((a+0.05)*ratio)-0.05
         let luminosidad=-1;
         if(componentes[3]>50){
         luminosidad = Math.round(((componentes[3]+0.05)/ratio)-0.05);            
         }else{
         luminosidad = Math.round(((componentes[3]+0.05)*ratio)-0.05);
         if(luminosidad<50) luminosidad=50;
         }
         if(luminosidad>100) luminosidad=100;
         */

//        console.log(hsl + " -> " + 'hsl(' + ((componentes[1] + 180) % 360) + ',' + saturacion + '%,' + luminosidad + '%)' + " " + contraste);
        return 'hsla(' + ((componentes[1] + 180) % 360) + ',' + saturacion + '%,' + luminosidad + '%,' + alfa + '%)';
    }

    function mapeoColores() {
        for (var pos in prop_colores) {
            let i = prop_colores[pos];
            let actual = leerRegla('/css.css', i);
            let calculado = body.css(i);
            let complement = complementario(body.css(i));

            $('#mapeoColores>tbody').append('<tr id="' + i + '">' +
                    '<td>' + i + '</td>' +
                    '<td><input id="' + i + '_H" type="range" min="0" max="359" /><input id="' + i + '_H_N" type="number" min="0" max="359" /></td>' +
                    '<td><input id="' + i + '_S" type="range" min="0" max="100" /><input id="' + i + '_S_N" type="number" min="0" max="100" /></td>' +
                    '<td><input id="' + i + '_L" type="range" min="0" max="100" /><input id="' + i + '_L_N" type="number" min="0" max="100" /></td>' +
                    '<td><input id="' + i + '_A" type="range" min="0" max="100" /><input id="' + i + '_A_N" type="number" min="0" max="100" /></td>' +
//                    '<td>' + leerRegla('/css.css', i) + '</td>' +
                    '<td title="ORIGINAL: ' + calculado + '">' + calculado + '</td>' +
                    '<td>' + complement + '</td>' +
                    '</tr>');

            $('#mapeoColores>tbody>tr[id="' + i + '"]>:nth-child(6)').css('background-color', calculado);

            let componentes = extraerValores(calculado);
            $('#' + i + '_H').val(componentes[1]);
            $('#' + i + '_H_N').val(componentes[1]);
            $('#' + i + '_S').val(componentes[2]);
            $('#' + i + '_S_N').val(componentes[2]);
            $('#' + i + '_L').val(componentes[3]);
            $('#' + i + '_L_N').val(componentes[3]);
            $('#' + i + '_A').val(componentes[4]);
            $('#' + i + '_A_N').val(componentes[4]);
            mostrarColor(i);

            let cambios = $('#' + i)[0];
            cambios.original = calculado;      

            $('#' + i + '_H').on('input', function () {
                let valor = $(this).val();
                $('#' + i + '_H_N').val(valor);
                modificarRegla('/css.css', i + '-h', valor);
                valor = body.css(i);
                mostrarColor(i);

                cambios.haCambiado = (cambios.original !== valor);
                let weight = (cambios.haCambiado) ? '900' : 'initial';
                $('#' + i + '>:nth-child(1)').css('font-weight', weight);

            });
            $('#' + i + '_S').on('input', function () {
                let valor = $(this).val();
                $('#' + i + '_S_N').val(valor);
                modificarRegla('/css.css', i + '-s', valor + '%');
                valor = body.css(i);
                mostrarColor(i);

                cambios.haCambiado = (cambios.original !== valor);
                let weight = (cambios.haCambiado) ? '900' : 'initial';
                $('#' + i + '>:nth-child(1)').css('font-weight', weight);
            });
            $('#' + i + '_L').on('input', function () {
                let valor = $(this).val();
                $('#' + i + '_L_N').val(valor);
                modificarRegla('/css.css', i + '-l', valor + '%');
                valor = body.css(i);
                mostrarColor(i);

                cambios.haCambiado = (cambios.original !== valor);
                let weight = (cambios.haCambiado) ? '900' : 'initial';
                $('#' + i + '>:nth-child(1)').css('font-weight', weight);
            });
            $('#' + i + '_A').on('input', function () {
                let valor = $(this).val();
                $('#' + i + '_A_N').val(valor);
                modificarRegla('/css.css', i + '-a', valor + '%');
                valor = body.css(i);
                mostrarColor(i);

                cambios.haCambiado = (cambios.original !== valor);
                let weight = (cambios.haCambiado) ? '900' : 'initial';
                $('#' + i + '>:nth-child(1)').css('font-weight', weight);
            });
        }
    }
    function mapeoColoresAjustable() {
        for (var pos in prop_ajustables_colores) {
            let i = prop_ajustables_colores[pos];
            let actual = leerRegla('/css.css', i);
            let color = /.*?var[(](.*?)[)].*?/.exec(actual)[1];
            $('#mapeoColoresAjustable>tbody').append('<tr id="' + i + '">' +
                    '<td>' + i + '</td>' +
                    '<td><select id="' + i + '_color"></select></td>' +
                    //'<td>' + leerRegla('/css.css', i) + '</td>' +
                    '<td title="ORIGINAL: ' + leerRegla('/css.css', i) + '">' + body.css(i) + '</td>' +
                    '</tr>');

            let col_comp = Array.from(prop_colores);
            col_comp = col_comp.concat(prop_colores_comp);

            for (var key in col_comp) {
                let option = $('<option value="' + col_comp[key] + '" onfocus="this.size=12;" onblur="this.size=0;" onchange="this.size=1; this.blur()">' + col_comp[key] + '</option>');
                $('#' + i + '_color').append(option);
            }
            
            let cambios = $('#' + i)[0];
            cambios.original = actual;            
            
            $('#' + i + '_color').val(color);
            $('#' + i + '>:nth-child(3)').css('background-color', body.css(i));
            $('#' + i + '_color').on('change', function () {                
                let valor = 'var(' + $('#' + i + '_color').val() +')';
                modificarRegla('/css.css', i, valor);
                $('#' + i + '>:nth-child(3)').html(body.css(i));
                $('#' + i + '>:nth-child(3)').css('background-color', body.css(i));                
                $('#' + i + '>:nth-child(3)').css('color', body.css(i+'-comp'));   
                
                console.log(cambios.original);
                console.log(valor);
                cambios.haCambiado = (cambios.original !== valor);
                let weight = (cambios.haCambiado) ? '900' : 'initial';
                $('#' + i + '>:nth-child(1)').css('font-weight', weight);
                
            });
        }
        /*
         $('#mapeoColoresAjustable>tbody>tr').on('click', function () {
         $('#mapeoColoresAjustable>tbody>tr').css('background-color', 'initial');
         $(this).css('background-color', 'red');
         });
         */
    }

    mapeoColores();
    mapeoColoresAjustable();
</script>