{ 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
コメント