【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

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

カラーコード変換ツール

 

コメントを残す

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

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は驚異の4万冊。