カラーチャート利用方法
Click⇒ Web Safeカラー表グラデ表RGB→Web変換表

<利用方法>
ホームページを作成する上で必要不可欠な表です。ホームページを作り初めのころは感覚で適当な色を設定していましたが、後々各部品の連動や各種類のブラウザの相性等で苦労しました。初めからこの表と“Color Name”表で設定しておけばよかった!

<表の見方>

 WEB SAFE COLOR/RR固定表  Click⇒  GG固定へ    BB固定へ 
●このページをサブウインドで開く
RR固定INDEX Click⇒ RR/00RR/33RR/66RR/99RR/CCRR/FF 
#RRGGBBB  RR/00固定   GG/00〜FF   BB/00〜FF
G/FF            
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
G/CC            
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
G/99            
#009900 #009933 #009966 #009999 #0099CC #0099FF
G/66            
#006600 #006633 #006666 #006699 #0066CC #0066FF
G/33            
#003300 #003333 #003366 #003399 #0033CC #0033FF
G/00            
#000000 #000033 #000066 #000099 #0000CC #0000FF
B/00 B/33 B/66 B/99 B/CC B/FF

=各色固定チャートとは=====
●RGBはR(赤)・G(緑)・B(青)の3色の色配分で特定の色を表示する表示方法です。この表示方法をタテ・ヨコの表にするには特定の1色を固定し、他の2色の値を変化させて一覧表としたものです。
●たとえば赤系の色を設定したい場合はR固定表で色を探すと便利です。緑系、青系の場合は各、G固定表、B固定表を選択してください。
●上の表はR固定表でRR/00で固定されています。RR/00とは赤を含まないという意味ですので、純粋にG(緑)・B(青)の2色の配合で作られた色です。
●RR/33〜FFでは33は色が暗くFFは色が明るい事を表示していますので明るい赤系の色を選択したいならRR/FF固定表から選択するととになります。

=16進数各色2桁のRGBの表示方法=====
●WebSafeColorは0〜9・A〜Fを16文字を利用した16進数を各3色2桁で表示し先頭に#をつけて設定します。理論的には6桁で16文字ですので16の6乗 16,777,216色の表示が可能なのですが、ブラウザの種類やモニターの性能で表示できない色もありますので通常確実に表示できる“WebSafeColor”と“Color Name”で設定するのが通常ですが、現在はモニターの性能は向上し、ブラウザもバージョンアップを重ねていますので表示に関してはあまり問題ないと思いますが、16,777,216色をGifファイルで表現するのは不可能ですから他との連動を重視するならやはり“WebSafeColor”を中心とした色設定をオススメします。

=16進数各色2桁のRGBの表示方法以外の表示方法=====
●現在は上記の表示と“Color Name”で表記するのが一般的ですがそれ以外にも表示方法はあります
●16進数各色1桁のRGBで表示
0〜9・A〜Fを16文字で各3色1桁で表示する方法です。たとえば#9F6と指定した場合、2桁表示の#99FF66と同じ結果となります。
●RGB256等分で表示
各3色を0〜255で表示する方法です。たとえばRedはrgb(255,0,0)と指定します。数値と数値は,(カンマ)で区切ります。
●RGBを%で表示
各3色を0〜100%で表示する方法です。RGB16進数の00は0% FFは100%です。表示例としてはrgb(100%,0%,20%)と指定します。数値と数値は,(カンマ)で区切ります。

=ヘッダーの説明=====
○1行目は、表のタイトルと別の固定表に移動するリンクボタンです。
○2行目は、作業しやすいようにこの表をサブウインドで開くリンクボタンです。
○3行目は、同一ページ内のブックマークへのリンクボタンです。


<利用方法>

基本的な色合いが決定してその色の濃淡を微調整する場合、ついいい加減な色を設定してしまって、後でGifファイル作成や他の色との合わせで苦労したことがたびたびありましたので個人的に作成したチャートです。

<表の見方>

単色グラデーション色見本表
                 
単色グラデーション
color #RRGGBB 備  考
あいうえおAB #191970 ●MidnightBlue
あいうえおAB #00008D ●DarkBlue
あいうえおAB #0000FF ○●Blue
あいうえおAB #0066FF
あいうえおAB #1E90FF ●DodgerBlue
あいうえおAB #00BFFF ●DeepSkyBlue
○はWeb Safe color  ●はColor name

=列の説明=====
●1&2列目は、色見本と同色の文字色見本です。
●3列目は、16進数RGBで色を表示しています。カット&ペーストでご利用できます。
●4列目は、指定色が“Color name”がある場合、Web Safe colorである場合、そのことを表記しています。

=ヘッダーの説明=====
○1行目は表のタイトルです。
○2行目は他の色のグラデチャートへ移動するリンクボタンです。


<利用方法>

一般的な利用方法としてhtmlファイルの背景色とGifファイルの色を合わせたい場合などに利用します。円形のものや文字等をGifファイルで作成する場合、透過Gifでの作成が困難な場合が多いためhtmlファイルの背景色とGifファイルの背景色を合わせたい場合が多々あります。その場合事前にてhtmlファイルの背景色をWeb Safeカラーで設定すれば簡単にこのチャートで同一色にあわすことが可能です。(Gifファイルの圧縮設定で一部の色が劣化して同一色にならない場合があります)

<表の見方>

RGBカラー ⇒WEBカラー変換表 R/000固定  G/0〜255固定  B/0〜255

R/000固定  G/000 | G/051 | G/102 | G/153 | G/204 | G/255  B/0〜255

CHART-02R/000  G/051  B/0〜255 TOPへ
R G B Web safe Color sample 文字見本 文字見本2
000/051/000 #003300 太陽と海
SOLMARE
太陽と海
SOLMARE
000/051/051 #003333 太陽と海
SOLMARE
太陽と海
SOLMARE
000/051/102 #003366 太陽と海
SOLMARE
太陽と海
SOLMARE
000/051/153 #003399 太陽と海
SOLMARE
太陽と海
SOLMARE
000/051/204 #0033CC 太陽と海
SOLMARE
太陽と海
SOLMARE
000/051/255 #0033FF 太陽と海
SOLMARE
太陽と海
SOLMARE

=列の説明=====
●1列目は、0〜255の256等分RGB表記です。通常Gifファイル等の色指定で利用します。
●2列目は、Web用の16進数RGB表記です。カット&ペーストでご利用できます。
●3列目は、色見本です。
●4&5列目は、同色の文字色見本です。

=ヘッダーの説明=====
○1行目は、表のタイトルと掲載色の色配分を256等分RGBで表示しています。
○2行目は、他の配分表へのリンクボタンです。

<16進数RGBへの変換方法>
RGBカラーはR(赤)、G(緑)、B(青)の各色を0〜255の256段階で表示しすが、Web Safe colorは“00・33・66・99・CC・FF”の数字、文字を利用して6段階で表示されます。よってRGBカラーも6段階表示として変換します。

具体的には、

Web Safeカラー 00 ←→ RGBカラー   0
Web Safeカラー 33 ←→ RGBカラー  51
Web Safeカラー 66 ←→ RGBカラー 102
Web Safeカラー 99 ←→ RGBカラー 153
Web Safeカラー CC ←→ RGBカラー 204
Web Safeカラー FF  ←→ RGBカラー 255

 となり、表に置き換えることができます。

<例  題>
一般的な “赤” を RGBで表示すると

  R/255 G/000 B/000 となり Web Safeカラーでは #FF0000 となります。