色見本
HTMLでのカラー指定でカラーネームを使う場合は、ブラウザのバージョンなどで、使用できない色があります。色使いは画像にも同じことが言えます。
ＲＧＢ hexとは、HTMLでの色の指定はＲＧＢ値でしていします。数値は16進数で00からＦＦまでです。00の次は01となり、09の次は0Ａです。0Ｆの次は1Fのようになります。
 |
Ｒ | Ｇ | Ｂ | |
| ＃ | 00〜FF | 00〜FF | 00〜FF | |
| 例 | #66CC00 | |||
#RRGGBB 6桁指定(256段階)
例･･･#FFFFFF,
#888888
#RGB 3桁指定(16段階)
例･･･#FFF, #888
RGB Dec Codeとは
RGB値を0から255の10進数で指定します。(256では無いので注意）
赤は255,0,0 です。
rgb(n,n,n) 数値指定(0〜255)
例･･･rgb(255,255,255),
rgb(136,136,136)
RGB% Codeとは
ＲＧＢ値をそれぞれ％で指定します
(100%,0%,0%)
rgb(n%,n%,n%) ％指定(0〜100)
例･･･rgb(100%,100%,100%),
rgb(50%,50%,50%)
HSL Code とは
色相（Hue）、彩度（Saturation）、明度（Lightness）
また色相を円上に配置したものを色相環と言います。同じ赤の中でも赤紫に近い赤や橙に近い赤など色々な赤がありますが、ここでは代表的な赤、黄、緑、青、紫の5色にその中間の色を加えて赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の10色を作り、その中間にもう1色加えて全部で20色相の色相環を作っております。
左の色相環を365度で色を指定します。0〜364
明度とは明るさの違いのことで、最も明るい色は白、最も暗い色は黒となっております。
通常明度を表す場合は明るい色のことを「明るい」「明度が高い」というような表現をします
色の明るさを0〜100％で表現数値が高いほど明るくなります
彩度とは彩度とは色の鮮やかさを表す属性です。彩度も明度と同じように「高い」「低い」でその度合いを表します。彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。
色の鮮やかさを0〜100％で指定し数値が高くなるほど色の鮮やかさが濃くなります
Windowsでは、基本の１６色から２５６色で配色するのが最も効果的と言われています。
 |
原始的、野性的、生命、性、生きる、情熱、怒り | |
 |
現実的、活動的、人間的、家庭的、明快、労働、嫉妬 | |
 |
好奇心、知性、注意力、向上心、欲求、希望、光明 | |
 |
社会性、調整、平和、バランス、協調、新鮮、安全、青春 | |
 |
理性的、抑制、理解、思慮深さ、悠久、清澄、厳粛、誠実 | |
 |
精神的、孤独、気品、高貴、安定、洗練 | |
 |
非現実的、霊的、神秘、死、高位、優美、魅惑 |
| black #000000 | gray#808080 | silver #C0C0C0 | white #FFFFFF |
| maroon #800000 | red #FF0000 | purple #800080 | fuchsia #FF00FF |
| green #008000 | lime #00FF00 | olive #808000 | yellow #FFFF00 |
| navy #000080 | blue #0000FF | teal #008080 | aqua #00FFFF |
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
[色の日本語表記] [COLOR NAME (HEX)] [COLOR NAME][ALL Color Name ]
警告：各カラーサンプルは大きなテーブルで作成されており、表示に少々時間がかかります。
ＨＴＭＬ解説
目的別要素
広告
