●今回の記事タイトル画像も「白」と「黒」のテキストを重ねてデザインしています。既にお気づきですか?
この記事の目次
色見本・カラーコード16進数・短縮(基本16色)RGB値
「16進数」とは
つまり、私たちが一般的に使用する「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セーフカラー」とは
「短縮カラーコード」とは
よって、今回の「色見本」のカラーコードは、あえて「表記」及び「入力作業」も効率的な「短縮カラーコード」で表記しました。
| #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進数」で構成されている」という事が簡単に理解出来ると思います。
構成の仕組みさえ分かれば、カラーコード以外にも、任意で値を無段階に変更する事も可能です。


