javascriptで中間の明度を取得する

同じ色相で2つの色の中間の明度を取得する

同じ色相で、グラデーションが掛かっている部分の一番明るい色と一番暗い色の中間の色が取れないかと思い作成。

デモ

<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));