JavaScript での色の指定は、HTMLやスタイルシートと同じ方式となっています。 ユーザーの操作に合わせてページの背景色や、リンクの色、フォントの色などに、 元の色とは違う色を指定することで、変化のあるページの作成が可能です。

様々な色の指定方法

[ 色の指定方法 ]

＃RRGGBB 方式

＃RGB 方式

rgb(%指定) 方式

rgb(10進数指定) 方式

カラーネーム 方式

[ ＃RRGGBB 方式 ]

色の指定には、光の3原色である赤(red)･緑(green)･青(blue) を使用します。 #RRGGBB 方式では、この3原色である赤緑青を2桁の16進数(00〜ff)･256段階で指定します。 (使用例) document.bgColor = "#ff0000"; ･･･ 背景色を赤色に指定

[ ＃RGB 方式 ]

#RGB 方式は、赤緑青を1桁の16進数(0〜f) ･16段階で指定します。 (使用例) document.bgColor = "#f00"; ･･･ 背景色を赤色に指定

[ rgb(%指定) 方式 ]

rgb(%指定) 方式では、赤青緑をそれぞれ０〜１００％で指定します (使用例) document.bgColor = rgb(100%,0%,0%); ･･･ 背景色を赤色に指定

[ rgb(10進数指定) 方式 ]

(使用例) document.bgColor = rgb(255,0,0); ･･･ 背景色を赤色に指定

[ カラーネーム 方式 ]

(使用例) document.bgColor = "red"; ･･･ 背景色を赤色に指定

カラーグラデーションを表示してみよう！

#RRGGBB 方式でカラーテーブルを表示します。
3色のうち1色の値を基準値として決めて｢表示する｣ ボタンをクリックすると、残りの2色でグラデーションテーブルが表示されます。

テーマ別のカラーテーブル表示もあるのでクリックしてみてください。

赤(R)の値が 00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff の時の緑(G) ⇒ 青(B) のグラデーションを
緑(G)の値が 00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff の時の赤(R) ⇒ 青(B) のグラデーションを
青(B)の値が 00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff の時の赤(R) ⇒ 緑(G) のグラデーションを

テーマ別カラーテーブル オーシャンブルー 初夏の新緑 ディ―プブルー 紅葉 アクアリウム 秋の夕暮れ 古都の夜 幻想夜曲

/ 00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff 00                                 11                                 22                                 33                                 44                                 55                                 66                                 77                                 88                                 99                                 aa                                 bb                                 cc                                 dd                                 ee                                 ff