JavaScriptで基本色に対する濃淡色を返す関数を作った

クライアントと打合せをする際にモックアップを見せるんですが、
その際に全体のテーマ色（ベースカラー）を決定するだけで各コンポーネントの色を変更したかったのがきっかけです。

引数

• 「ベースカラー(#ffffff形式)」
• 濃淡倍率（0.0～1.0）
  （値が小さいほどベースカラーに近く、値が大きいほど#ffffffまたは#000000に近い）

戻り値

• 濃淡度合いを反映したカラーコード(rgb(255,255,255)形式)

moc.js

/**
 * ベースカラーコードから淡色のカラーコードを取得する
 * @param {String} baseColorCode #ffffff
 * @param {Number} lightWeight 0.0 ~ 1.0
 * @returns {String} カラーコード(rgb(255,255,255))
 */
function getLightColor(baseColorCode, lightWeight) {
    let red = parseInt(baseColorCode.substring(1, 3), 16);
    let green = parseInt(baseColorCode.substring(3, 5), 16);
    let blue = parseInt(baseColorCode.substring(5, 7), 16);

    let redNew = red + Math.round((255 - red) * lightWeight);
    let greenNew = green + Math.round((255 - green) * lightWeight);
    let blueNew = blue + Math.round((255 - blue) * lightWeight);

    return 'rgb(' + redNew + ',' + greenNew + ',' + blueNew + ')'
}

/**
 * ベースカラーコードから濃色のカラーコードを取得する
 * @param {String} baseColorCode #ffffff
 * @param {Number} darkWeight 0.0 ~ 1.0
 * @returns {String} カラーコード(rgb(255,255,255))
 */
function getDarkColor(baseColorCode, darkWeight) {
    let red = parseInt(baseColorCode.substring(1, 3), 16);
    let green = parseInt(baseColorCode.substring(3, 5), 16);
    let blue = parseInt(baseColorCode.substring(5, 7), 16);

    let redNew = Math.round(red * (1 - darkWeight));
    let greenNew = Math.round(green * (1 - darkWeight));
    let blueNew = Math.round(blue * (1 - darkWeight));

    return 'rgb(' + redNew + ',' + greenNew + ',' + blueNew + ')'
}

使い方

jQueryと純JSが混在しているのは私のスキル不足ですのでご容赦ください。

moc.js

$(function () {
    $('input[name="color"]').on("change", function () {
        let baseColorCode = $(this).val();
        // 淡色（ベースカラーの0.7）を取得
        let lightColorCode = getLightColor(baseColorCode, 0.7);
        // 濃色（ベースカラーの0.3）を取得
        let darkColorCode = getDarkColor(baseColorCode, 0.3);

        $(':root').css('--base-color', baseColorCode);
        $(':root').css('--base-color-light', lightColorCode);
        $(':root').css('--base-color-dark', darkColorCode);
    });
});

※CSS変数を利用しております。

参考URL

［teratail］カラーコードをrgb情報に変えたい