ホームページ > ウェブフロントエンド > CSSチュートリアル > 明るいまたは暗いという点で、特定の色の反対の色を生成するにはどうすればよいでしょうか?

明るいまたは暗いという点で、特定の色の反対の色を生成するにはどうすればよいでしょうか?

Susan Sarandon
リリース: 2024-11-13 14:04:02
オリジナル
994 人が閲覧しました

How do you generate the opposite color of a given color in terms of light or dark?

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

問題:

どのようにして反対の色を作成できますか?現在の色は明暗でしょうか?現在の色が黒の場合は白を生成する必要があり、その逆も同様です。

解決策:

この機能を実現するには、次の手順:

  1. 最初に、現在の色を 16 進数 (HEX) 形式から同等の赤、緑、青 (RGB) コンポーネントに変換します。
  2. 次に、それぞれの色を反転します。 R、G、B コンポーネントの値を 255 から減算します。
  3. 次に、反転された RGB コンポーネントが HEX 形式に変換されます。
  4. 最後に、必要に応じて、各 HEX コンポーネントの先頭にゼロを埋め込みます。有効な出力を確保するため。

次の手順に従って、現在の HEX カラーを入力として受け取り、その反対の色を返す invertColor という名前の関数を作成できます。

function invertColor(hex) {
  // Convert HEX to RGB
  var r = parseInt(hex.slice(1, 3), 16);
  var g = parseInt(hex.slice(3, 5), 16);
  var b = parseInt(hex.slice(5, 7), 16);

  // Invert color components
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);

  // Pad each with 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);
}
ログイン後にコピー

この関数は、明暗の反対の色合いを作成するために色を反転する必要性を考慮しています。

例:

色 "#F0F0F0" (a明るい色) を invertColor 関数への入力として指定すると、「#202020」 (暗い色) が返されます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート