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色になっています。
初心者におすすめの学習書籍
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→ 確かな力が身につくJavaScript「超」入門
