ホームページ  >  記事  >  ウェブフロントエンド  >  指定された 16 進数コードの補色を見つける方法は?

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

DDD
DDDオリジナル
2024-11-14 11:43:02994ブラウズ

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

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

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

  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);
}

例出力:

How to Find the Complementary Color of a Given Hex Code?

「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);
}

例出力:

[How to Find the Complementary Color of a Given Hex Code? 
](https://stackshare.io/resources/color-contrast-checker)

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。