「Web用色見本!HTMLカラーコード(16進数・RGB)一覧表」のまとめです。
「Webデザイン」や様々なソフトウェアを利用して作業を行っていると、色(カラー)設定を行う機会が非常に多く有ります。
そんな時に、適当に色を選択する事も多いですが、具体的なカラーを設定したい時に「色見本とカラーコード一覧表」があると非常に役立ちます。
●デザインを行う時に全く同じ色でも、「文字の色」と「背景の色」の組み合わせにより「見え方」や「印象」が、かなり変化する事があります。
尚、今回の記事タイトル画像も、あえて「白」と「黒」のテキスト(文字)を重ねてデザインしているのですが、既にお気づきになりましたか?
今回は「色」に関するデザインの「イメージ」と、実際の「具体的な色」の設定要求を叶える為に、この「Web色見本」をWebサイト構築や様々なデザインの機会に活用して、ぜひ役立てて頂ければと思います。
数ある「色見本」の中でも、最も使用頻度が高いと思われる「基本16色」と「Webセーフカラー(短縮カラーコード)216色」について掲載していますので、ぜひこの「色見本」を利用してカラー比較してみて下さい。
この記事の目次
色見本・カラーコード16進数・短縮(基本16色)RGB値
「16進数」とは
そして、一桁が「0」から「F」で構成される「16進数」は、二桁で表記される場合は「00」から「FF」の合計256の値で表記できます。
つまり、私たちが一般的に使用する「10進数」の場合、二桁で表記した際は、「00」から「99」の合計100までしかカウント(又は計測)できない所を、「16進数」の場合は、二桁で表記しても合計256までカウント出来るという事です。
色見本カラーコード 基本16色
色(カラー名)・16進数・短縮 |
RGB値:R(red),G(green),B(blue)
例:red (255,0,0) |
||||
色(カラー名) | 16進数 | 短縮 | R値 | G値 | B値 |
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セーフカラー(短縮カラーコード)216色
「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カラーコード(16進数・RGB)一覧表」まとめ
今回記事の「Web用色見本!HTMLカラーコード(16進数・RGB)一覧表」の中に、あなたがイメージされた色は、見つかりましたでしょうか?
「用語」説明も補足しましたが、「16進数」の理屈さえ分かればカラーコードが「RGBの各二桁の「16進数」で構成されている」という事が簡単に理解出来ると思います。
構成の仕組みさえ分かれば、カラーコード以外にも、任意で値を無段階に変更する事も可能です。
ぜひ様々なカラーデザインに「Web用色見本」を活用し役立てて頂ければ幸いです。