「Web用色見本！HTMLカラーコード（１６進数・ＲＧＢ）一覧表」のまとめです。
「Webデザイン」や様々なソフトウェアを利用して作業を行っていると、色（カラー）設定を行う機会が非常に多く有ります。
そんな時に、適当に色を選択する事も多いですが、具体的なカラーを設定したい時に「色見本とカラーコード一覧表」があると非常に役立ちます。
●デザインを行う時に全く同じ色でも、「文字の色」と「背景の色」の組み合わせにより「見え方」や「印象」が、かなり変化する事があります。
尚、今回の記事タイトル画像も、あえて「白」と「黒」のテキスト（文字）を重ねてデザインしているのですが、既にお気づきになりましたか？
今回は「色」に関するデザインの「イメージ」と、実際の「具体的な色」の設定要求を叶える為に、この「Web色見本」をWebサイト構築や様々なデザインの機会に活用して、ぜひ役立てて頂ければと思います。
数ある「色見本」の中でも、最も使用頻度が高いと思われる「基本１６色」と「Webセーフカラー（短縮カラーコード）２１６色」について掲載していますので、ぜひこの「色見本」を利用してカラー比較してみて下さい。
この記事の目次
色見本・カラーコード16進数・短縮（基本16色）ＲＧＢ値
「16進数」とは
そして、一桁が「0」から「F」で構成される「１６進数」は、二桁で表記される場合は「00」から「FF」の合計２５６の値で表記できます。
つまり、私たちが一般的に使用する「１０進数」の場合、二桁で表記した際は、「00」から「99」の合計１００までしかカウント（又は計測）できない所を、「１６進数」の場合は、二桁で表記しても合計２５６までカウント出来るという事です。
| 色見本カラーコード 基本１６色
色（カラー名）・１６進数・短縮 |
RGB値:Ｒ(red),Ｇ(green),Ｂ(blue)
例：red (255,0,0) |
||||
| 色（カラー名） | １６進数 | 短縮 | Ｒ値 | Ｇ値 | Ｂ値 |
| black | #000000 | #000 | 0 | 0 | 0 |
| gray | #808080 | 128 | 128 | 128 | |
| silver | #C0C0C0 | 192 | 192 | 192 | |
| white | #FFFFFF | #FFF | 255 | 255 | 255 |
| blue | #0000FF | #00F | 0 | 0 | 255 |
| navy | #000080 | 0 | 0 | 128 | |
| teal | #008080 | 0 | 128 | 128 | |
| green | #008000 | 0 | 128 | 0 | |
| lime | #00FF00 | #0F0 | 0 | 255 | 0 |
| aqua | #00FFFF | #0FF | 0 | 255 | 255 |
| yellow | #FFFF00 | #FF0 | 255 | 255 | 0 |
| red | #FF0000 | #F00 | 255 | 0 | 0 |
| fuchsia | #FF00FF | #F0F | 255 | 0 | 255 |
| olive | #808000 | 128 | 128 | 0 | |
| purple | #800080 | 128 | 0 | 128 | |
| maroon | #800000 | 128 | 0 | 0 | |
Webセーフカラー（短縮カラーコード）２１６色
「Webセーフカラー」とは
この「Webセーフカラー」は、「どのブラウザでも同じように見える」とされている色（カラー）で、「短縮カラーコード」で表す事が可能です。
「短縮カラーコード」とは
この「短縮カラーコード」は、「CSS」などに直接記載して入力する際にも利用できるので、入力する作業時間自体も減りますし、カラーコードも見やすくて非常に便利です。
よって、今回の「色見本」のカラーコードは、あえて「表記」及び「入力作業」も効率的な「短縮カラーコード」で表記しました。
| #000 | #FFC | #9F9 | #6FF | #33F | #F0F |
| #333 | #FF9 | #6F6 | #3FF | #00F | #F0C |
| #666 | #FF6 | #3F3 | #0FF | #30F | #C09 |
| #999 | #FF3 | #0F0 | #0CF | #30C | #F3C |
| #CCC | #FF0 | #0F3 | #09C | #63F | #906 |
| #FFF | #CF0 | #0C3 | #3CF | #309 | #C39 |
| #F30 | #9C0 | #3F6 | #069 | #63C | #F6C |
| #C30 | #CF3 | #093 | #39C | #96F | #F09 |
| #F63 | #690 | #3C6 | #6CF | #30F | #603 |
| #930 | #9C3 | #6F9 | #09F | #306 | #936 |
| #C63 | #CF6 | #0F6 | #036 | #639 | #C69 |
| #F96 | #9F0 | #063 | #369 | #96C | #C06 |
| #F60 | #360 | #396 | #69C | #60C | #F9C |
| #630 | #693 | #6C9 | #06C | #C9F | #F39 |
| #963 | #9C6 | #0C6 | #9CF | #93F | #F06 |
| #C96 | #6C0 | #9FC | #39F | #90F | #903 |
| #C60 | #CF9 | #3F9 | #06F | #609 | #C36 |
| #FC9 | #9F3 | #0F9 | #039 | #93C | #F69 |
| #F93 | #6F0 | #096 | #36C | #C6F | #C03 |
| #F90 | #390 | #3C9 | #69F | #90C | #F36 |
| #960 | #6C3 | #6FC | #03C | #C3F | #F03 |
| #C93 | #9F6 | #0C9 | #36F | #C0F | #300 |
| #FC6 | #3C0 | #3FC | #03F | #303 | #633 |
| #C90 | #6F3 | #0FC | #003 | #636 | #600 |
| #FC3 | #3F0 | #033 | #336 | #606 | #966 |
| #FC0 | #030 | #366 | #006 | #969 | #933 |
| #330 | #363 | #066 | #669 | #939 | #900 |
| #666 | #060 | #699 | #339 | #909 | #C99 |
| #660 | #696 | #399 | #009 | #C9C | #C66 |
| #996 | #393 | #099 | #99C | #C6C | #C33 |
| #993 | #090 | #9CC | #66C | #C3C | #C00 |
| #990 | #9C9 | #6CC | #33C | #C0C | #FCC |
| #CC9 | #6C6 | #3CC | #00C | #FCF | #F99 |
| #CC6 | #3C3 | #0CC | #CCF | #F9F | #F66 |
| #CC3 | #0C0 | #CFF | #99F | #F6F | #F33 |
| #CC0 | #CFC | #9FF | #66F | #F3F | #F00 |
「Web用色見本！HTMLカラーコード（１６進数・ＲＧＢ）一覧表」まとめ
今回記事の「Web用色見本！HTMLカラーコード（１６進数・ＲＧＢ）一覧表」の中に、あなたがイメージされた色は、見つかりましたでしょうか？
「用語」説明も補足しましたが、「１６進数」の理屈さえ分かればカラーコードが「ＲＧＢの各二桁の「１６進数」で構成されている」という事が簡単に理解出来ると思います。
構成の仕組みさえ分かれば、カラーコード以外にも、任意で値を無段階に変更する事も可能です。
ぜひ様々なカラーデザインに「Web用色見本」を活用し役立てて頂ければ幸いです。
