このサイトは、ディスプレイの発色モードをTrue Color（32ビット）にしてご覧ください。
| １２５色カラーチャート | 赤、緑、青の各色を５段階で組み合わせた１２５色チャート。 |
| ７２９色カラーチャート | 赤、緑、青の各色を９段階で組み合わせた７２９色チャート。 |
| ＲＧＢ値指定使用例 | 背景色や文字の色を指定したり、セル単位で色をつける方法。 |
| カラーネーム一覧表 | カラーを指定するのに使えるカラーネーム一覧表。 |
| カラーディスプレー | カラーディスプレーの発色の仕組みと画面。 |
|
|
|
１６進数で００からFFまでを、３３hずつ増やしながら等
分していくと、００，３３，６６，９９，ＣＣ，ＦＦの６個の数値が得られます。１色につき６個の数値を用いて３色組み合わせるので、６×６×６＝２１６色のカラーチャートが得られます。これらの数値を組み合わせて表示したのが下に示すチャートです。これを用いることで、このように、いろいろな色を作ることが出来ます。
ホームページ作成ソフトで色を決める場合などに、この色の組み合わせ方は、よく使われています。 |
|
|
RGBの値を２０hずつ変えたときの色の変化の様子です。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
赤＝XX0000 緑＝００XX00 青＝００００XX XX=００〜FFまでの値を入れます。
上の表の色は、いずれも純色で値を変えた場合です。
値を小さくするほどくすんだ暗い色になり、黒色に近づきます。値を大きくするほど、明るい鮮やかな色になります。
RGB値微調整による色合いの変化
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
これは、色合いの変化の様子を、この紫色を例に表にしてみました。左端の色を基準にして比較してみてください。
１行目は、３色のうち赤の部分のみ値を変えた場合です。だんだん赤味がかってきます。
２行目は、３色のうち緑の値を１６ずつ４段階変えていますが，この場合には、３色の数値が等しくなる方向ですから、色合いが灰色に近づいていきます。
３行目は、３色のうち青の値を１６ずつ４段階変えてみました。だんだん青の勝った明るい色になります。
４行目は、３色ともに値を１６ずつで４段階変えてみました。だんだん色が薄くなって明るい色になります。
次に、上の表と同じ色の８０００８０から青の値を１ずつ増して、色の違いを見たものが、下の表ですが、下位桁を変えるのでは色合いの変化に気づかないほどです。
|
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
A |
B |
C |
D |
E |
F |
次に示す表は、中央にあるA040E0を基準値として、色の微調整のために、各色指定の値を８〜１６ずつ値を増減して変えてみたものですが、色あいが少しずつ違ってくることが分かります。
|
|
|
|
|
|
|
|
|
|
|
|
それぞれ色を同じ値にすると、黒または灰色になります。(任意な値を入れた例）
|
|
|
|
|
|
|
|
1 |
2 |
3 |
4 |
この例でわかるように、００に近い値ほど黒が濃くなり、ＦＦに近い値を指定するほど、白に近い明るい色になります。
参考資料 １０進数と１６進数、２進数との関係
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ホームページの背景の色を変える方法は、ホームページ作成用ソフトなどにもいろいろ含まれていますが、数値を指定して自分の望むきれいな色を作るときなど、組み合わせの数値を変えると、どんな発色になるかをつかむために一覧表にまとめました。数値で表すことで、再現性のある色が指定できますし、色指定の仕組みを理解するための参考資料としても利用できます。発色の原理を理解すると、色々な応用も出来るようになります。
RGB
Top
ホタル目次
NEXT