Web用色見本!HTMLカラーコード(16進数・RGB)一覧表

※本記事には広告リンクが含まれています。

ブログ・デザイン
Web用色見本!HTMLカラーコード(16進数・RGB)一覧表」でデザインに役立つ色を探そう!
Webデザインやソフトウェア作業では、色の設定が頻繁に必要になります。適当に色を選ぶ事もありますが、具体的なカラーを設定したい時には「色見本とカラーコード一覧表」が非常に役立ちます。
デザイン作業では、同じ色でも「文字の色」と「背景の色」の組み合わせによって見え方や印象が大きく変わることがあります。

●今回の記事タイトル画像も「白」と「黒」のテキストを重ねてデザインしています。既にお気づきですか?

この「Web色見本」を活用する事で、デザインのイメージと具体的な色の設定を実現しましょう!Webサイト構築やデザインの機会に役立ててください。
この色見本では、最もよく使われる「基本16色」と「Webセーフカラー(短縮カラーコード)216色」を掲載しています。ぜひこの色見本を利用してカラー比較してみてください。
きっとお好みの色が見つかるはずです♪

色見本・カラーコード16進数・短縮(基本16色)RGB値

「16進数」とは

16進数」とは、通常一般的に使われている「0」から「9」までの、計「10」の数字に加え、「A」から「F」までの計「6」個を加えた、合計16」の数字と記号で構成され表記する事ができます。
また、一桁が「0」から「F」で構成される「16進数」は、二桁で表記される場合は「00」から「FF」の合計256の値で表記できます。

つまり、私たちが一般的に使用する「10進数」の場合、二桁で表記した際は、「00」から「99」の合計100までしかカウント(又は計測)できない所を、「16進数」の場合は、二桁で表記しても合計256までカウント出来るという事です。

その他にも「2進数」と呼ばれるものがあり、「2進数」の場合は各桁が「0」と「1」のみで構成されています。
色見本カラーコード 基本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セーフカラー」とは、8ビットカラー256色のうち、各OS(Windows、Macintosh)で異なる40色を除いた216色を「Webセーフカラー」と言います。
この「Webセーフカラー」は、「どのブラウザでも同じように見える」とされている色(カラー)で、「短縮カラーコード」で表す事が可能です。

「短縮カラーコード」とは

短縮カラーコード」とは、通常「赤色red)の場合、16進数「#FF0000」と表記されますが、「#F00」のように各RGB二桁の隣接する同じ値同士を、各一桁に短縮して表記する事が可能です
この「短縮カラーコード」は、「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用色見本」を活用し役立て下さい。

>> 「自由生活情報サイト!コスパるTiME」TOPへ