JavaScriptでカラーが暗いかどうかを判定する方法

1. RGB値を使用して判定する方法:

function isColorDark(color) {
  // カラーのRGB値を取得
  var r = parseInt(color.substring(1, 3), 16);
  var g = parseInt(color.substring(3, 5), 16);
  var b = parseInt(color.substring(5, 7), 16);
  // 輝度を計算
  var brightness = (r * 299 + g * 587 + b * 114) / 1000;
  // 輝度が閾値未満ならば暗いと判定
  return brightness < 128;
}
// 使用例
var color = "#333333";
var isDark = isColorDark(color);
console.log(isDark); // 結果: true

2. HSL値を使用して判定する方法:

function isColorDark(color) {
  // カラーのHSL値を取得
  var hsl = getHSLValues(color);

  // 輝度が閾値未満ならば暗いと判定
  return hsl.l < 0.5;
}
// カラーのHSL値を取得するヘルパー関数
function getHSLValues(color) {
  var tempElement = document.createElement("div");
  tempElement.style.color = color;
  var rgbColor = window.getComputedStyle(tempElement).color;
  tempElement.remove();

  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = rgbColor;
  ctx.fillRect(0, 0, 1, 1);
  var data = ctx.getImageData(0, 0, 1, 1).data;
  var r = data[0] / 255;
  var g = data[1] / 255;
  var b = data[2] / 255;
  var max = Math.max(r, g, b);
  var min = Math.min(r, g, b);
  var l = (max + min) / 2;
  var s = 0;

  if (max !== min) {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  }

  var h = 0;

  if (max === r) {
    h = (g - b) / d + (g < b ? 6 : 0);
  } else if (max === g) {
    h = (b - r) / d + 2;
  } else if (max === b) {
    h = (r - g) / d + 4;
  }

  h /= 6;

  return { h: h, s: s, l: l };
}
// 使用例
var color = "#333333";
var isDark = isColorDark(color);
console.log(isDark); // 結果: true

これらの方法を使用することで、JavaScriptで与えられたカラーが暗いかどうかを判定することができます。