このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

<hex-color>”値~16進数カラーコード

記事Aug. 11th,2021
色の指定に使用することができる16進数カラーコード、“<hex-color>”値。
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

<hex-color>”値

16進数カラーコード(Hexadecimal notations)”や単に“カラーコード”と呼ばれることの多い“<hex-color>”値はRGBカラー・モデルの赤、緑、青の色成分を16進数で指定する方法です。16進数カラーコードは<color>”値として使用することができます。

RGBカラー・モデルのイメージ
RGBカラー・モデルのイメージ

16進数カラーコードはコンピュータ言語で色を表すもっとも一般的な色の表現方法で、CSSだけでなくHTMLやSVGなどでも使用されてきました。

色の例
RGB値 RGB値
  #ff0000   #00ffff
  #ff3300   #00ccff
  #ff6600   #0099ff
  #ff9900   #0066ff
  #ffcc00   #0033ff
  #ffff00   #0000ff
  #ccff00   #3300ff
  #99ff00   #6600ff
  #66ff00   #9900ff
  #33ff00   #cc00ff
  #00ff00   #ff00ff
  #00ff33   #ff00cc
  #00ff66   #ff0099
  #00ff99   #ff0066
  #00ffcc   #ff0033

<hex-color>”値の構文

ハッシュ(“#”)に続けて色成分を2桁ずつの16進数で続けて記述します。

#〚赤〛〚緑〛〚青〛

色成分は赤、緑、青の順に記述し、範囲は“00”から“ff”です。1桁の色成分には“0”を付けて2桁にします。

a”~“f”は大文字と小文字は区別されません。

透明度の指定

<hex-color>”値は最後に2桁を追加した8桁の16進数で透過度を示すアルファ値を指定することができます。

不透明な黒
#000000ff

透明な黒
#00000000

アルファ値の範囲は“00”から“ff”で、“00”が完全な透明、“ff”は不透明を表します。1桁のアルファ値には“0”を付けて2桁にします。

短縮表記

3桁表記

<hex-color>”値には3桁で各色成分を表す短縮表記があります。


#f00


#0f0


#00f

赤、緑、青の各色成分を“0”~“9”と“a”~“f”のうちの1文字で表し、“0”が最低値、“f”が最大値を表します。

4桁表記

<hex-color>”値には3桁で各色成分を表す短縮表記にアルファ値を表す1桁を追加した記述方法です。

0”~“9”と“a”~“f”のうちの1文字でアルファ値を表し、“0”が完全に透明、“f”が不透明を表します。

不透明な黒
#000f

透明な黒
#0000

使用例

色を指定する

.banana { background-color: #ffd700;}
.apple { background-color: #dc143c;}
.peach { background-color: #ffdab9;}
.kiwi { background-color: #808000;}
.mangosteen { background-color: #db7093;}
.melon { background-color: #98fb98;}
.orange { background-color: #ffa500;}
.grape { background-color: #483d8b;}
.durian { background-color: #eee8ff;}
バナナ リンゴ モモ
キウイ マンゴスチン メロン
オレンジ ブドウ ドリアン

アルファ値を含む色

.purple-100p { background-color: #c66faaff;}
.purple-90p { background-color: #c66faae6;}
.purple-80p { background-color: #c66faacc;}
.purple-70p { background-color: #c66faab3;}
.purple-60p { background-color: #c66faa99;}
.purple-50p { background-color: #c66faa80;}
.purple-40p { background-color: #c66faa66;}
.purple-30p { background-color: #c66faa4d;}
.purple-20p { background-color: #c66faa33;}
.purple-10p { background-color: #c66faa1a;}
.purple-0p { background-color: #c66faa00;}
100% (ff) 90% (e6) 80% (cc)
70% (b3) 60% (99) 50% (80)
40% (66) 30% (4d) 20% (33)
10% (1a) 0% (00)

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
<hex-color>
定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク