指定された 16 進コードの反対の色を生成するにはどうすればよいですか?-CSSチュートリアル-php.cn

指定された 16 進コードの反対の色を生成するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-11-13 16:24:03

オリジナル

360 人が閲覧しました

How to Generate the Opposite Color of a Given Hex Code?

指定された色から反対の色を生成する

指定された色から反対の色を決定することは、Web およびグラフィックデザインで頻繁に必要になります。これは、テキストの色が動的で、読みやすいように背景色を調整する必要がある場合に重要になります。私たちの目標は、現在の色を取得してその反対の色を生成し、その結果、高コントラストでテキストの鮮明な視認性を提供する色を生成する関数を作成することです。

反対の色を生成するアルゴリズム

目的を達成するために、次のアルゴリズムを提案します。

現在のカラーを HEX 形式から RGB 形式に変換します。 これには、赤、緑、およびHEX コードの青色の値。
R、G、B の各コンポーネントを反転します。 これは、(255 - コンポーネント) を計算することを意味します。
変換反転されたコンポーネントを HEX 形式に戻します。
各 HEX コンポーネントにゼロを埋め込みます。長さが 2 文字になるようにします。
出力反転した色を 16 進コードとして表示します。

JavaScript でのアルゴリズムの実装

以下は、概要を示したアルゴリズムの JavaScript 実装です。

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  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 = (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);
  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);
}

ログイン後にコピー

この関数は 16 進数のカラーコードを受け入れ、その反対の色を返します。たとえば、色「#F0F0F0」を指定すると、反対の色として「#0F0F0F」が得られます。

詳細オプション: 明るさを考慮する

一部の場合場合によっては、反対の色の生成時にその色の明るさを考慮する必要があるかもしれません。以下は、bw パラメーターを含む関数の修正バージョンです。

function invertColor(hex, bw) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  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) {
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }

  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

ログイン後にコピー

bw パラメーターが true に設定されている場合、関数は、指定された色が明るい (#000000) 場合は黒を返し、明るい色 (#000000) の場合は白を返します。暗いです (#FFFFFF)。それ以外の場合は、以前と反対の色が生成されます。

以上が指定された 16 進コードの反対の色を生成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。