スポンサーリンク

シェアする

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


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

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へ

スポンサーリンク

シェアする

フォローする

トップへ戻る