자바스크립트로 중간 밝기 얻기

같은 색조로 두 가지 색의 중간 밝기를 얻다

<section id="lowColor" class="color-sec">
<h1>low color</h1>
<!-- .low-color // --></section>

<section id="midColor" class="color-sec">
<h1>mid color</h1>
<!-- .mid-color // --></section>

<section id="highColor" class="color-sec">
<h1>high color</h1>
<!-- .high-color // --></section>

// 取得したい中間色に対する2色を設定する（16進数のみ）
var color1 = '#171a46';
var color2 = '#414eac';

// 中間色を返す関数
function getMedianColor(color1,color2){

    color1 = color1.match(/\w/g).join('');
    var r1 = color1.substr(0,2);
    r1 = parseInt('0x'+r1);
    var g1 = color1.substr(2,2);
    g1 = parseInt('0x'+g1);
    var b1 = color1.substr(4,2);
    b1 = parseInt('0x'+b1);

    color2 = color2.match(/\w/g).join('');
    var r2 = color2.substr(0,2);
    r2 = parseInt('0x'+r2);
    var g2 = color2.substr(2,2);
    g2 = parseInt('0x'+g2);
    var b2 = color2.substr(4,2);
    b2 = parseInt('0x'+b2);

    var r3 = (r1+r2)/2;
    r3 = r3.toString(16);
    var g3 = (g1+g2)/2;
    g3 = g3.toString(16);
    var b3 = (b1+b2)/2;
    b3 = b3.toString(16);

    var bgclr = '#'+r3+g3+b3;

    return bgclr;

}

// 生成された中間色をbackgroundに設定する
$('#midColor').css('background',getMedianColor(color1,color2));

// 取得したい中間色に対する2色を設定する（16進数のみ）
var color1 = '#171a46';
var color2 = '#414eac';

// 中間色を返す関数
function getMedianColor(color1,color2){

    color1 = getColorBase10(color1);
    color2 = getColorBase10(color2);

    // 16進数を10進数に変換する
    function getColorBase10(base16){

        var rgb = [];
        var color = '';

        base16 = base16.match(/\w/g).join('');

        for(var i=0; i<base16.length;i+=2){
            color = base16.substr(i,2);
            color = parseInt('0x'+color);
            rgb.push(color);
        }

        return rgb;
    }

    // 2色間の「r」「g」「b」それぞれの平均値を取得して
    // 16進数に戻す
    function getColor(color1,color2){

        var rgb = [];

        for(var i=0; i<color1.length; i++){
            rgb.push((color1[i]+color2[i])/2);
            rgb[i] = rgb[i].toString(16);
        }

        return '#'+rgb.join('');
    }

    return getColor(color1,color2);
}

// 生成された中間色をbackgroundに設定する
$('#midColor').css('background',getMedianColor(color1,color2));