Design Studio LEVEL.7

ブログ

最新記事 html/css アルファチャンネルを使わずに透明度のある色と同じ色を作る

アルファチャンネルを使わずに透明度のある色と同じ色を作る

アルファチャンネルを使わずに透明度のある色と同じ色を作る

CSSで色指定をする際、opacityやアルファチャンネルを使って透明度(透過率)をつけるときがあります。 rgba(255,0,0,0.5)で赤の50%ですね。

背景が透けるのでbox-shadowやtext-shadowなどで使うと綺麗だったり、重ねた要素をちょっと透けさせるときなど便利に使えるのですが、背景色が透過して薄く見えるこの色自体を直接指定したいときってありませんか?
ですが、アルファチャンネルはあくまで背景が透けているだけで、指定した色が変わっているわけではないので、透けてみえる今まさに表示されている色そのものを調べたいという場合ちょっと大変です。

例えば、背景が水色rgb(122,192,212)で透明度50%の赤色rgba(255,0,0,0.5)だったとすると、

透明度50%の赤色
rgba(255,0,0,0.5)
背景色が透けて見える

この場合の水色が透けて見える赤色の部分を『透明度のある赤色 rgba(255,0,0,0.5)』ではなくアルファチャンネルなしのrgbや16進数のカラーコードそのものとして直接調べたいような場合です。
背景色と透過後の色を合成するようなイメージですね。

実は簡単な計算で割り出せます。
表示したい色 = 元の色 * a + 背景色 * ( 1 – a )
aは透明度(0~1)です。

この計算をrgbそれぞれ行うと、上に表示した水色が透けて見える赤と同じ赤色はrgb(189,96,106)となります。

上の赤をアルファチャンネルを使わずに作った色
rgb(189,96,106)
#bd606a

下記のリンク先に簡単に割り出せるツールを作りましたのでぜひご利用ください。

制作ツール
アルファチャンネルを使わずに透明度のある色と同じ色を作る

コメントを残す

コメントは承認後に反映されます。
承認には数日かかる場合があります。