白い背景で使用するために、RGB カラーを透明な RGBA カラーに変換するにはどうすればよいですか?

白い背景の RGB を透明な RGBA に変換します

白い背景の上に色を表示する場合、それらの色が透明に見えるように調整することが望ましいです視覚的なインパクトを維持しながら、可能な限り。このプロセスには、RGB から RGBA への変換が含まれ、アルファ チャネルによって透明度のレベルが決まります。

RGB から RGBA への変換のアルゴリズム

次のアルゴリズムは、RGBA を計算します。指定された RGB カラー コンポーネントに基づく値:

1. 最小コンポーネントの特定: RGB コンポーネントの最小値を決定します (最小値 = min)。
2. アルファ値の計算: 最小コンポーネントをアルファ値 (a) に変換: a = (255 - 分) / 255.

3. RGB コンポーネントのスケール:各 RGB コンポーネントから最小値を減算し、結果をアルファ値で割ります。これによりコンポーネントがスケーリングされます:

   • r = (r - min) / a
   • g = (g - min) / a
   • b = (b - min ) / a
4. RGBA 文字列のフォーマット: 計算された値を使用して RGBA 文字列を構築します: rgba(r, g, b, a).

実装:

<code class="javascript">function RGBtoRGBA(r, g, b) {
  if ((g == null) && (typeof r === 'string')) {
    var hex = r.replace(/^\s*#|\s*$/g, '');
    if (hex.length === 3) {
      hex = hex.replace(/(.)/g, '');
    }
    r = parseInt(hex.substr(0, 2), 16);
    g = parseInt(hex.substr(2, 2), 16);
    b = parseInt(hex.substr(4, 2), 16);
  }

  var min = Math.min(r, g, b);
  var a = (255 - min) / 255;

  return {
    r: 0 | (r - min) / a,
    g: 0 | (g - min) / a,
    b: 0 | (b - min) / a,
    a: (0 | 1000 * a) / 1000,
    rgba: 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')',
  };
}</code>

例:

RGBtoRGBA(204, 153, 102) == RGBtoRGBA('#CC9966') == RGBtoRGBA('C96') ==
  {
    r: 170,
    g: 85,
    b: 0,
    a: 0.6,
    rgba: 'rgba(170, 85, 0, 0.6)'
  }

以上が白い背景で使用するために、RGB カラーを透明な RGBA カラーに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。