目に見えるrgba-color(透明度を含む)を16進値に変換する方法でrgba
をhex
に変換する方法を知りたいです。
私がこれを持っていると言います:
rgba(0,129,255,.4)
これは「水色」のようなものです...
同じ水色の「可視」色を16進数で取得する方法があるかどうか知りたいので、変換したくない#0081ff
しかし、画面に表示される色に近いもの。
質問:
rgbaを透明度調整済み16進数に変換する方法は?
透明色が適用される背景によって異なります。ただし、背景の色(白など)がわかっている場合は、特定の背景に適用された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
_を与えるか
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);
Chromeのスポイトツールを使用すると、時間と計算を節約できます。私が通常行うことは、大きなdivの背景色をrgbaに設定することです。次に、CSSの色属性をランダムな16進値に追加します。次に、ランダムな16進数値の横にある色付きの四角をクリックし、ページに背景色があるdivにカーソルを合わせ、スポイトを使用して背景色を選択します。それがrgbaとして戻ってきた場合は、その色付きの四角形をもう一度クリックして、右側の上下矢印をクリックすることにより、hsla、rgba、hexを循環できます。