auの日記

プログラミング初心者の日記。(auはハンドルネームです)

HTMLで使われているフォントカラーを特定する方法

auです。

あのサイトで使われているフォントの色いいなーと思うことありますよね。

その時に、どんな色が使われているのかを特定する方法を見つけたので調べてみます。

フォントカラーを特定する方法

この画像の、グレー色を特定しましょう。

f:id:program-shoshinsya:20210712011159p:plain

デベロッパーツールを使います。

F12キーを押すか、画面右上の3点マークから、その他のツール>デベロッパーツールを押しましょう。

f:id:program-shoshinsya:20210712011633p:plain

デベロッパーツール内の、左上にあるカーソルマークを押して、詳しくみたい箇所をクリックします。

f:id:program-shoshinsya:20210712011753p:plain

すると、HTMLでの表示と、それに適応されているCSSがあります。

colorと書かれている箇所が該当箇所ですね。

「color: #959c9e;」

f:id:program-shoshinsya:20210712011959p:plain

これが、灰色を表現しているCSSとなります。

16進数で使いたい場合はこれで大丈夫です。

しかし、パワーポイントなどで使う場合、10進数の方が都合が良い場合もあります。

そこで、この値を変換してみます。

実はこの値、RGB(赤・緑・青)値の値を示しています。

灰色を例に挙げると

R(95)
G(9c)
B(9e)

と対応しています。
パワーポイントなどでは、このRGBの値を10進数で入力します。

自分で計算してもいいですが、サイトを使った方が楽ですよね。

hogehoge.tk

変換後の値は

R(149)
G(156)
B(158)

となります。

これを、RGB値を入力する項目に入力すれば、同じ色を表現することができます。