「Web用色見本！HTMLカラーコード（１６進数・ＲＧＢ）一覧表」でデザインに役立つ色を探そう！
Webデザインやソフトウェア作業では、色の設定が頻繁に必要になります。適当に色を選ぶこともありますが、具体的なカラーを設定したい時には「色見本とカラーコード一覧表」が非常に役立ちます。
デザイン作業では、同じ色でも「文字の色」と「背景の色」の組み合わせによって見え方や印象が大きく変わることがあります。
●実際、今回の記事タイトル画像でも「白」と「黒」のテキストを重ねてデザインしていますが、既に気づかれましたか？
この「Web色見本」を活用することで、デザインのイメージと具体的な色の設定を実現しましょう。Webサイト構築やデザインの機会に役立ててください。
この色見本では、最もよく使われる「基本１６色」と「Webセーフカラー（短縮カラーコード）２１６色」を掲載しています。ぜひこの色見本を利用してカラー比較してみてください。
この記事の目次
色見本・カラーコード16進数・短縮（基本16色）ＲＧＢ値
「16進数」とは
つまり、私たちが一般的に使用する「１０進数」の場合、二桁で表記した際は、「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用色見本」を活用し役立て下さい。
