JavaScriptでプログラム的にHexカラーを明るくしたり暗くしたりする方法

2024-05-21

JavaScript でプログラム的に Hex カラー (または RGB カラー) を明るくしたり暗くしたりする方法について説明します。

Hex カラーと RGB カラー

Hex カラーは、16 進数表記で表現されるカラーコードです。例えば、赤色は #FF0000、緑色は #00FF00、青色は #0000FF といったように表現されます。

RGB カラーは、赤 (Red)、緑 (Green)、青 (Blue) のそれぞれの成分の値で表現されるカラーコードです。例えば、赤色は (255, 0, 0)、緑色は (0, 255, 0)、青色は (0, 0, 255) といったように表現されます。

カラーを明るくしたり暗くしたりするには、それぞれの成分の値を調整します。

明るくする: 各成分の値を増やします。

プログラム例

function lightenColor(hexColor, amount) {
  // Hex カラーを RGB カラーに変換
  const rgb = hexToRgb(hexColor);

  // 各成分の値を増やす
  rgb.r += amount;
  rgb.g += amount;
  rgb.b += amount;

  // RGB カラーを Hex カラーに変換
  return rgbToHex(rgb);
}

function darkenColor(hexColor, amount) {
  // Hex カラーを RGB カラーに変換
  const rgb = hexToRgb(hexColor);

  // 各成分の値を減らす
  rgb.r -= amount;
  rgb.g -= amount;
  rgb.b -= amount;

  // RGB カラーを Hex カラーに変換
  return rgbToHex(rgb);
}

// 例: 赤色を 20 だけ明るくする
const lightenedColor = lightenColor('#FF0000', 20);
console.log(lightenedColor); // '#FF2020'

// 例: 緑色を 30 だけ暗くする
const darkenedColor = darkenColor('#00FF00', 30);
console.log(darkenedColor); // '#00C000'

補足

カラーを明るくしたり暗くしたりする度合いは、 amount パラメータで調整できます。
カラー値が 0 以下または 255 以上の場合は、0 または 255 にクランプされます。
上記のコードはあくまで例であり、必要に応じて修正することができます。

サンプルコード：JavaScript で Hex カラーを操作する

カラー値の取得と設定

// Hex カラーから RGB カラーを取得
function hexToRgb(hexColor) {
  const r = parseInt(hexColor.slice(1, 3), 16);
  const g = parseInt(hexColor.slice(3, 5), 16);
  const b = parseInt(hexColor.slice(5, 7), 16);
  return { r, g, b };
}

// RGB カラーから Hex カラーを設定
function rgbToHex(rgb) {
  const r = rgb.r.toString(16).padStart(2, '0');
  const g = rgb.g.toString(16).padStart(2, '0');
  const b = rgb.b.toString(16).padStart(2, '0');
  return `#${r}${g}${b}`;
}

// カラー値の取得例
const rgbColor = hexToRgb('#FF0000'); // 赤色
console.log(rgbColor); // { r: 255, g: 0, b: 0 }

const hexColor = rgbToHex({ r: 0, g: 255, b: 0 }); // 緑色
console.log(hexColor); // #00FF00

カラーの明るさ操作

// カラーを明るくする関数
function lightenColor(hexColor, amount) {
  const rgb = hexToRgb(hexColor);
  rgb.r = Math.min(rgb.r + amount, 255);
  rgb.g = Math.min(rgb.g + amount, 255);
  rgb.b = Math.min(rgb.b + amount, 255);
  return rgbToHex(rgb);
}

// カラーを暗くする関数
function darkenColor(hexColor, amount) {
  const rgb = hexToRgb(hexColor);
  rgb.r = Math.max(rgb.r - amount, 0);
  rgb.g = Math.max(rgb.g - amount, 0);
  rgb.b = Math.max(rgb.b - amount, 0);
  return rgbToHex(rgb);
}

// カラーを明るくする例
const lightenedColor = lightenColor('#FF0000', 50); // 50 だけ明るくした赤色
console.log(lightenedColor); // #FFA5A5

// カラーを暗くする例
const darkenedColor = darkenColor('#00FF00', 30); // 30 だけ暗くした緑色
console.log(darkenedColor); // #00C000

カラーの変換と操作

// カラーをランダムな明るさに変換する例
function randomizeColor(hexColor) {
  const amount = Math.random() * 100;
  if (Math.random() < 0.5) {
    return lightenColor(hexColor, amount);
  } else {
    return darkenColor(hexColor, amount);
  }
}

// ランダムな色の例
const randomColor = randomizeColor('#0000FF');
console.log(randomColor); // ランダムな青系のカラー

// 特定の明るさのカラーパレットを作成する例
function createColorPalette(baseColor, steps) {
  const palette = [];
  for (let i = 0; i < steps; i++) {
    const amount = i * (255 / (steps - 1));
    const color = lightenColor(baseColor, amount);
    palette.push(color);
  }
  return palette;
}

// 特定の明るさのカラーパレットの例
const palette = createColorPalette('#FFAA00', 5);
console.log(palette); // #FFAA00 から #FFFFF0 までの 5 段階のパレット

これらのサンプルコードは、あくまでも例です。

カラー値の取得・設定、明るさ操作、カラー変換など、様々な操作を組み合わせることで、様々な色の処理を行うことができます。
必要に応じて、関数やロジックを修正して、独自の処理を作成してください。

JavaScript で Hex カラーを操作するその他の方法

CSS 関数を利用する

CSS には、カラー値を操作する関数があります。これらの関数を使用して、JavaScript から Hex カラーを操作することができます。

// CSS 関数を使用してカラーを明るくする
function lightenColorWithCSS(hexColor, amount) {
  const element = document.createElement('div');
  element.style.backgroundColor = hexColor;
  const filter = `brightness(${1 + amount / 100})`;
  element.style.filter = filter;
  const lightenedColor = element.style.backgroundColor;
  return lightenedColor;
}

// CSS 関数を使用してカラーを暗くする
function darkenColorWithCSS(hexColor, amount) {
  const element = document.createElement('div');
  element.style.backgroundColor = hexColor;
  const filter = `brightness(${1 - amount / 100})`;
  element.style.filter = filter;
  const darkenedColor = element.style.backgroundColor;
  return darkenedColor;
}

// 例：赤色を 20% 明るくする
const lightenedColor = lightenColorWithCSS('#FF0000', 20);
console.log(lightenedColor); // #ff2020

// 例：緑色を 30% 暗くする
const darkenedColor = darkenColorWithCSS('#00FF00', 30);
console.log(darkenedColor); // #00c000