web-dev-qa-db-ja.com

RGBAを透明度調整済み16進数に変換する方法は？

目に見えるrgba-color（透明度を含む）を16進値に変換する方法でrgbaをhexに変換する方法を知りたいです。

私がこれを持っていると言います：

rgba(0,129,255,.4)

これは「水色」のようなものです...

同じ水色の「可視」色を16進数で取得する方法があるかどうか知りたいので、変換したくない#0081ffしかし、画面に表示される色に近いもの。

質問：
rgbaを透明度調整済み16進数に変換する方法は？

csscolorshextransparencyrgba
27
frequent

透明色が適用される背景によって異なります。ただし、背景の色（白など）がわかっている場合は、特定の背景に適用されたRGBA色の結果であるRGB色を計算できます。

これは、色と背景の間の加重平均であり、重みはアルファチャネル（0〜1）です。

_Color = Color * alpha + Background * (1 - alpha);
_

透明な明るい青rgba(0,129,255,.4)に対して白rgb(255,255,255)に対して：

_Red   =   0 * 0.4 + 255 * 0.6 = 153
Green = 129 * 0.4 + 255 * 0.6 = 204.6
Blue  = 255 * 0.4 + 255 * 0.6 = 255
_

どちらがrgb(153,205,255)または_#99CDFF_を与えるか

52
zakinster
function hexify(color) {
  var values = color
    .replace(/rgba?\(/, '')
    .replace(/\)/, '')
    .replace(/[\s+]/g, '')
    .split(',');
  var a = parseFloat(values[3] || 1),
      r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
      g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
      b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
  return "#" +
    ("0" + r.toString(16)).slice(-2) +
    ("0" + g.toString(16)).slice(-2) +
    ("0" + b.toString(16)).slice(-2);
}

var myHex = hexify('rgba(57,156,29,0.05)'); // "#f5faf3"

console.log(myHex);
7
David Rosson

Chromeのスポイトツールを使用すると、時間と計算を節約できます。私が通常行うことは、大きなdivの背景色をrgbaに設定することです。次に、CSSの色属性をランダムな16進値に追加します。次に、ランダムな16進数値の横にある色付きの四角をクリックし、ページに背景色があるdivにカーソルを合わせ、スポイトを使用して背景色を選択します。それがrgbaとして戻ってきた場合は、その色付きの四角形をもう一度クリックして、右側の上下矢印をクリックすることにより、hsla、rgba、hexを循環できます。

0
warrendugan