JavaScriptで色を指定する方法｜16進数・色名・CSS指定を初心者向けに解説
JavaScriptで色を指定する方法は、HTML/CSS と同様に複数あります。代表的なのは次の2つです。
- 16進数（#rrggbb）で指定する方法
- 色名（red、blue など）で指定する方法
このページでは、それぞれの指定方法と、JavaScriptからCSSの色を変更する方法を初心者向けにわかりやすく解説します。
#rrggbb（16進数）で指定する
# に続けて、赤（r）、緑（g）、青（b）の値を 00〜ff の16進数6桁 で表します。
例：
- 黒：
#000000 - 白：
#ffffff - 赤：
#ff0000
基本的な16色は以下の表を参考にしてください。
色名（色の名前）で指定する
色名を直接指定する方法です。大文字・小文字は区別されません。
HTML4.01 では基本16色が定義されています。
| red | #ff0000 | navy | #000080 | green | #008000 | black | #000000 |
| fuchsia | #ff00ff | blue | #0000ff | lime | #00ff00 | gray | #808080 |
| purple | #800080 | aqua | #00ffff | olive | #808000 | silver | #c0c0c0 |
| maroon | #800000 | teal | #008080 | yellow | #ffff00 | white | #ffffff |
JavaScriptでCSSの色を変更する
JavaScriptでは、CSSのスタイルを操作して色を変更することもできます。
以下は、midashi という要素の文字色を赤に設定する例です。
midashi.style.color = “#ff0000”;
midashi.style.color = “#f00”;
midashi.style.color = “rgb(100%,0%,0%)”;
midashi.style.color = “rgb(255,0,0)”;
midashi.style.color = “red”;
midashi.style.color = “#f00”;
midashi.style.color = “rgb(100%,0%,0%)”;
midashi.style.color = “rgb(255,0,0)”;
midashi.style.color = “red”;
CSS2.1 では、HTML4.01 の基本16色に orange（#ffa500） が追加され、合計17色になっています。
