RGBカラーを16進数カラーコードに直すアロー関数式

スポンサーリンク
JavaScriptロゴ JavaScript

{ r: 255, g: 128, b: 10 } などの10進RGBカラーを引数に渡すと、#FF800Aなどの16進数カラーコードが返ってくるアロー関数式です。

main.js

// {r: XXX, g: XXX, b: XXX} ⇒ #RRGGBB形式に変換
const hexColor = (color) => {
    // 10進⇒16進2桁
    const Dec2Hex = (n) => Number(n).toString(16).padStart(2, "0").toUpperCase();
    // #RRGGBB形式を返す
    return `#${Dec2Hex(color.r)}${Dec2Hex(color.g)}${Dec2Hex(color.b)}`;
}

hexColor関数の引数colorは、r, g, bのプロパティをもつオブジェクト形式とする。

{
    r: 255,
    g: 128,
    b: 10
}

戻り値は、16進数カラーコード文字列。

#FF800A

利用例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="main.js"></script>
    <title>16進カラーコードを取得</title>
</head>
<body>
    <script>
        const color = {
            r: 255,
            g: 128,
            b: 10
        };

        console.log(hexColor(color));
    </script>
</body>
</html>

実行イメージ(コンソールに表示される)

#FF800A
スポンサーリンク

コメント

タイトルとURLをコピーしました