●今回の記事タイトル画像も「白」と「黒」のテキストを重ねてデザインしています。既にお気づきですか?
この記事の目次
色見本・カラーコード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進数」で構成されている」という事が簡単に理解出来ると思います。
構成の仕組みさえ分かれば、カラーコード以外にも、任意で値を無段階に変更する事も可能です。