![この記事はCSS3に対応しています。](../../../s-utilities/image/article/ha-artinfo-css3-pc.png)
![この記事はCSS3に対応しています。](../../../s-utilities/image/article/ha-artinfo-css3-sp.png)
#
“<hex-color>”値
“16進数カラーコード(Hexadecimal notations)”や単に“カラーコード”と呼ばれることの多い“<hex-color>”値はRGBカラー・モデルの赤、緑、青の色成分を16進数で指定する方法です。16進数カラーコードは“<color>”値として使用することができます。
![RGBカラー・モデルのイメージ](../image/img_color-001.png)
16進数カラーコードはコンピュータ言語で色を表すもっとも一般的な色の表現方法で、CSSだけでなくHTMLやSVGなどでも使用されてきました。
#
#
#
#
使用例
色を指定する
.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) |
#