Web制作

XDなどで良くある8桁のカラーコードの見方と一覧

XDなどで良くある8桁のカラーコードの見方と一覧
XDでカラーコードが8桁なんだけどどういう事?

今回はそんな疑問にお答えしていきます。

カラーコードといえば通常6桁かRGBだと思いますが、XDのカンプでは8桁表示の時もあるので「??」となる人もいるでしょう。

効率よくコーディングしたい人はこちら

XDなどで良くある8桁のカラーコードの見方と一覧

カラーコードは6桁が一般的かと思います。

なのでまず最初に6桁のカラーコードから見てみましょう。

 

6桁のカラーコード

まずは赤を通常のカラーコードで表したいと思います。

6桁(16進数)color: #ff0000;
RGBcolor: rgb(255, 0, 0);
RGBA(透過)color: rgb(255, 0, 0, 0.3);

6桁とRGBは全く同じですが、RGBAは透過率も含まれています。

上記の場合は0.3の部分が透過率となり、

  • 1.0:透過率0%(透過しない)
  • 0.5:透過率50%(半透明)
  • 0.0:透過率100%(見えない)

となります。

0.3は透明寄りになりますね。

こちらがデモになります。

See the Pen
通常のカラーコード
by junpei (@junpei-sugiyama)
on CodePen.

 

8桁のカラーコード一覧

それでは本題の8桁カラーコードの説明です。

8桁のカラーコードの場合、下2桁は透過率を表します。

下2桁が表す透過率は以下になります。

透過率下2桁
0%(透過しない)FF
5%F2
10%E6
15%D9
20%CC
25%BF
30%B3
35%A6
40%99
45%8C
50%80
55%73
60%66
65%59
70%4D
75%40
80%33
85%26
90%1A
95%0D
100%(見えない)00

つまり赤で半透明(透過率50%)にしたい場合は、

color: #ff000080;

となります。

以下はデモになります(透過率100%は当然見えません)

See the Pen
8桁のカラーコード
by junpei (@junpei-sugiyama)
on CodePen.

8桁だと透過率がイメージしにくいですね・・・

より細かい数値は以下のページで確認出来ます。

rgba変換

ただ8桁ってどういう意味?というモヤモヤがこれで晴れればと思います。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-Web制作