【CSS】カラーコードからrgbaへ変更する方法

cssでopacityプロパティを使用して透過させようとすると、

背景だけのつもりが文字まで透明になってしまった!

ほとんどのウェブデザイナーがこの経験をすると思います。

そこを解決するのが、rgbaでの色指定です。

rgbaの使い方

[~.css]

p{
color: rgba(0, 0, 0, 0.5);
}

各値は、Red, Green, Blue, alphaの順で指定します。

alphaは、透明度の指定です。opacityプロパティと同じ、透明度を0.0〜1.0までの小数点で指定します。
0.0は透明、1.0は不透明となり値が低くなるごとに透明度が上がります。

Red, Green, Blueはカラーコードではなく、0〜255の10進数で指定します。
10進数を使った色の指定は、PhotoshopやIllustratorなどのグラフィックアプリケーションでよく使われます。

最後に、カラーコードからrgbの変換例を紹介します。

  • 黒 → #000000 → 0, 0, 0
  • 白 → #FFFFFF → 255, 255, 255
  • 赤 → #FF0000 → 255, 0, 0
  • 緑 → #00FF00 → 0, 255, 0
  • 青 → #0000FF → 0, 0, 255

↓こちらで変換できます。

カラーコード変換ツール

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です