|
HTML教室 色の表現 |
色コード
色を表す時には、#000000や#ffffff等のように表現します。
これは下のように、#の後の6桁が2桁ずつ赤・緑・青の光の3原色の強さを表しています。
#rrggbb
それぞれの色は16進数で表され、00が一番弱く、ffが一番強い状態になります。
簡単に主な色をこの形式で表現すると下のようになります。
| #000000 黒 | #000000 黒 |
| #0000ff 青 | #0000ff 青 |
| #00ff00 緑 | #00ff00 緑 |
| #00ffff 水色 | #00ffff 水色 |
| #ff0000 赤 | #ff0000 赤 |
| #ff00ff 紫 | #ff00ff 紫 |
| #ffff00 黄色 | #ffff00 黄色 |
| #ffffff 白 | #ffffff 白 |
注意
ここから下の内容はWindowsユーザーを対象としています。
Macユーザーの人の情報を待ってます
色コードの見付方
ただしこのままでは、自分の好きな色を設定するのは非常に難しい。
中間色の色コードを自分で決めるのは、無理というものです。
ではどうするかというと、ペイントを立ちあげます。これならどこでも入っているでしょう。
ペイントを立ちあげたら、オプションメニューの色の設定を選択します。
色の設定ダイアログが出てきたら、色の作成というボタンを押します。
そうすると、このようなダイアログになっていると思います。

まず、(1)色の選択と書いてある部分で、好きな色の部分をクリックします。
そうすると、その部分に黒の十字カーソルが移動します。
次に(2)明度の設定の部分で三角のつまみをドラッグして好きな明るさを選択します。
選択されている色は(3)選択色の部分に出てくるので、そこを見ながら設定するとよいでしょう。
好きな色が選択できたら、右下の赤・緑・青の部分に表示されている数字をメモします。
最後に先ほどメモした数字を16進数になおして、#rrggbbの形にすればいいわけです。
10進数・16進数
さて、先ほどの方法の中には、一つだけ問題があります。
色の設定ダイアログで出てくる数字は10進数ですが、ここで使用したい色コードは16進数になっている事です。
中には簡単になおせる人もいるかも知れませんが、普通は無理です。
では、どうするかというと、電卓をたちあげて下さい。これも普通ついてますよね。
電卓が立ち上がったら、まず電卓の種類を関数電卓にします。

そうすると左上のところに、16進・10進・8進・2進と書かれたラジオボタンがあるはずです。
まず、10進のところを選択して、先ほどメモした数字を入力します。
入力したら、そののまま16進のところを選択してください。
表示されている数字が10進から、16進に変わったはずです。
これを赤・緑・青それぞれについて行えば、先ほど自分で選択した色の色コードがわかるわけです。
例:
| 色 | 10進 | 16進 | 色コード | 見本 |
|---|---|---|---|---|
| 赤 | 47 | 2f | #2f9550 | #2f9550 |
| 緑 | 149 | 95 | ||
| 青 | 80 | 50 |