指定された 16 進コードの補色を見つける方法は?

指定された色の補色を決定する方法

目的は、指定された色の反対の色を生成することです。たとえば、現在の色が黒の場合、その反対の色は白である必要があります。このタスクは、動的な色のテキストに対照的な背景色を設定して明確な視認性を確保する場合に非常に重要です。

これを実現するには、次のアプローチを採用します。

1. 現在の色を変換します。カラーを 16 進数 (HEX) から赤、緑、青 (RGB) 形式に変換します。
2. RGB カラーの R、G、B コンポーネントを反転します。補数値を取得します。
3. 反転したコンポーネントを HEX 形式に変換します。
4. 必要に応じて、HEX 値の先頭にゼロが埋め込まれていることを確認します。

これはこのアプローチを実装するコード:

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  // Convert 3-digit HEX to 6-digits.
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }
  // Invert color components.
  var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
    g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
    b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
  // Pad each component with leading zeros and return.
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
  len = len || 2;
  var zeros = new Array(len).join('0');
  return (zeros + str).slice(-len);
}

例出力:

「bw」オプションを備えた高度なバージョンでは、結果を黒に近づけるか白に近づけるかを指定でき、コントラストが向上して読みやすさが向上します:

function invertColor(hex, bw) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  // Convert 3-digit HEX to 6-digits.
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }
  var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);
  if (bw) {
    // Formula to determine if the color is closer to black or white.
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }
  // Invert color components.
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  // Pad each component with leading zeros and return.
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

例出力:

[](https://stackshare.io/resources/color-contrast-checker)

以上が指定された 16 進コードの補色を見つける方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。