元の色から計算して少し暗い色を取得して表示する

javascript01

JavaScriptを使って、ベースとなる色から少し暗い色を計算して取得する方法。

例ではBoxの背景色を元にして、少し暗い色のBorderを設定する。

 

HTML

<div class="element"></div>

 

CSS

:root {
  --primary-color: #4D926F;
}

.element {
  background-color: var(--primary-color);
  border: 5px solid;
  width: 100px;
  height: 100px;
}

 

JavaScript

function hexToRGB(hex) {
  hex = hex.replace(/^#/, '');
  let bigint = parseInt(hex, 16);
  let r = (bigint >> 16) & 255;
  let g = (bigint >> 8) & 255;
  let b = bigint & 255;
  return [r, g, b];
}

function RGBToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
}

function darkenHEX(hex, percent) {
  const rgb = hexToRGB(hex);
  const r = Math.max(0, Math.min(255, rgb[0] - (rgb[0] * percent / 100)));
  const g = Math.max(0, Math.min(255, rgb[1] - (rgb[1] * percent / 100)));
  const b = Math.max(0, Math.min(255, rgb[2] - (rgb[2] * percent / 100)));
  return RGBToHex(r, g, b);
}

// CSSからベース色を取得
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();

// ベース色から計算
const primaryColorDark = darkenHEX(primaryColor, 10);

//新しい CSS 変数を設定
document.documentElement.style.setProperty('--primary-color-dark', primaryColorDark);

// 計算した色をBorderに適用する
document.querySelector('.element').style.borderColor = `var(--primary-color-dark)`;

 

  1. hexToRGB関数は、HEX値をRGB値に変換。
  2. RGBToHex関数は、RGB値をHEX値に変換。
  3. darkenHEX関数は、HEXカラーを受け取り、指定されたパーセンテージだけ各成分の値を減らして新しいHEXカラーを返す。
  4. getComputedStyleを使ってCSS変数--primary-colorの値を取得します。
  5. darkenHEX関数を使用して、元の色を10%暗くした新しいHEXカラーを計算。
  6. 新しいHEXカラーをCSS変数--primary-color-darkに設定。
  7. .elementの境界線の色として、新しく設定した--primary-color-darkを適用する。