CSS フィルターのみを使用して黒を任意の RGB カラーに変換するにはどうすればよいですか?

CSS フィルターのみを使用して黒を任意の色に再着色する

問題:
ターゲットの RGB カラーが指定された場合、 CSSのみを使用して黒(#000)をその色に変換します

解決策:

この解決策には、ターゲット カラーを入力として受け取り、黒をターゲット カラーに変換する CSS フィルター文字列を返す関数が含まれます。

この関数は、反転、セピア、彩度、色相回転、明るさ、コントラストなどのフィルターの組み合わせを使用して、

1. 反転: 色を反転し、黒を白に変えます。
2. セピア: セピアの色合いを追加し、温かみを与えます。色。
3. 飽和:色の彩度を調整します。
4. 色相回転: 色の色相を回転します。
5. 明るさ: 色の明るさを調整します。 .
6. コントラスト:色のコントラストを調整します。

実装:

function recolorBlack(targetColor) {
  // Convert RGB color to HSL
  const hsl = targetColor.toHSL();

  // Calculate filter values
  const invert = (255 - targetColor.r) / 255;
  const sepia = (targetColor.g - targetColor.b) / 255;
  const saturate = targetColor.s / 100;
  const hueRotate = hsl.h;
  const brightness = targetColor.l / 100;
  const contrast = (targetColor.r - targetColor.g + targetColor.b - 128) / 128;

  // Generate CSS filter string
  return `filter:
    invert(${invert * 100}%)
    sepia(${sepia * 100}%)
    saturate(${saturate * 100}%)
    hue-rotate(${hueRotate}deg)
    brightness(${brightness * 100}%)
    contrast(${contrast * 100}%);`;
}

例:

.element {
  background-color: black;
  filter: recolorBlack(rgb(255, 0, 0));
}

「rgb」パラメータとして青が指定されているため、これにより要素に青の色合いが適用されます。 ((255, 0, 0) は青です)。

注: 上記の JavaScript 関数と CSS 実装は、説明を目的とした仮説です。実際の実装は異なる場合があります。

以上がCSS フィルターのみを使用して黒を任意の RGB カラーに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。