プログラムで HEX カラーを明るくしたり暗くしたり、RGB カラーを処理したり、色をブレンドしたりするにはどうすればよいですか?

HEX カラー (または RGB、およびカラーのブレンド) をプログラムで明るくまたは暗くする

問題

目標は、次のことができる関数を作成することです。 16 進カラーを特定の量だけ明るくまたは暗くします。さらに、RGB カラーを処理し、カラーをブレンドしたいとします。

解決策

<code class="javascript">function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col &amp; 0x0000FF) + amt) | ((((col >> 8) &amp; 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", 40));

説明

この関数は、16 進数のカラーを整数に変換し、次の値を追加することによって機能します。または、指定された量を各 RGB チャネルから減算し、その結果を 16 進カラーに変換し直します。

機能拡張

関数を拡張するには、エラー処理とさまざまなサポートを追加できます。カラー形式 (RGB、HSL)。 2 番目のカラー パラメータを渡すことで、色をブレンドする機能を追加することもできます。

これが改良版です:

<code class="javascript">function pSBC(p, c0, c1, l) {
  let r, g, b, P, f, t, h, i = parseInt;
  if (typeof(p) != "number" || p <-1 || p > 1 || typeof(c0) != "string" || (c0[0] != 'r' &amp;&amp; c0[0] != '#') || (c1 &amp;&amp; !a)) return null;
  if (!this.pSBCr) this.pSBCr = (d) => {
    let n = d.length, x = {};
    if (n > 9) {
      [r, g, b, a] = d = d.split(",");
      n = d.length;
      if (n < 3 || n > 4) return null;
      x.r = i(r[3] == "a" ? r.slice(5): r.slice(4), 16);
      x.g = i(g);
      x.b = i(b);
      x.a = a ? parseFloat(a) : -1;
    } else {
      if (n == 8 || n == 6 || n < 4) return null;
      if (n < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (n > 4 ? d[4] + d[4] : "");
      d = i(d.slice(1), 16);
      if (n == 9 || n == 5) x.r = d >> 24 &amp; 255, x.g = d >> 16 &amp; 255, x.b = d >> 8 &amp; 255, x.a = m((d &amp; 255) / 0.255) /1000;
      else x.r = d >> 16, x.g = d >> 8 &amp; 255, x.b = d &amp; 255, x.a = -1;
    }
    return x;
  };

  h = c0.length > 9;
  h = a ? c1.length > 9 ? true : c1 == "c"?!h : false : h;
  f = this.pSBCr(c0);
  P = p < 0;
  t = c1 &amp;&amp; c1 != "c" ? this.pSBCr(c1) : P ? {r:0,g:0,b:0,a:-1} : {r:255,g:255,b:255,a:-1};
  p = P ? p*-1 : p;
  P = 1-p;
  if (!f || !t) return null;
  if (l) r = m(P*f.r + p*t.r), g = m(P*f.g + p*t.g), b = m(P*f.b + p*t.b);
  else r = m((P*f.r**2 + p*t.r**2)**0.5), g = m((P*f.g**2 + p*t.g**2)**0.5), b = m((P*f.b**2 + p*t.b**2)**0.5);
  a = f.a, t = t.a, f= a >= 0 || t >= 0, a = f ? a < 0 ? t : t < 0 ? a : a*P + t*p : 0;
  if (h) return "rgb" + (f ? "a(" : "(") +r + "," +g + "," +b + (f ? "," + m(a*1000)/1000 : "") + ")";
  else return "#" + (4294967296+r*16777216+g*65536+b*256+(f ? m(a*255):0)).toString(16).slice(1, (f? undefined : -2));
}</code>

この改良版には次の機能が含まれています:

• エラー処理: この関数は無効な入力をチェックし、入力が無効な場合は null を返します。
• さまざまなカラー形式のサポート: 関数はサポートしています16 進数、RGB、および RGBA カラー形式。
• カラー ブレンド: 2 番目のカラー パラメーターを渡すことで、2 つの色をブレンドできます。
• 線形または対数ブレンディング: 4 番目のパラメーターを渡すことで、線形ブレンディングを使用するか対数ブレンディングを使用するかを指定できます。
• アルファ チャネルのサポート: この関数はアルファ チャネルをサポートしており、アルファ チャネルをブレンドできます。色をブレンドするときに一緒にします。

以上がプログラムで HEX カラーを明るくしたり暗くしたり、RGB カラーを処理したり、色をブレンドしたりするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。