HTMLカラーコードの色の仕組み
HTMLカラーコードは、色を表す暗号のようなもの。例えば赤色は「#FF0000」という風に表されます。色を表す考え方は「RGB」と同じで、最初の2ケタが赤・次の2ケタが緑・最後の2ケタが青の強さを表しています。
RGBカラーモードについては、以下の記事で紹介しています。
RGBまとめ：色の仕組みとRGBカラーコード一覧表
HTMLカラーコードの特徴は、数字とアルファベットを組み合わせていること。これは、数字には0～9までしかないので、9の次に大きい文字を「A」としているからです。そして一番大きい文字は「F」と決められています。
さっきの「#FF0000」を例にすると、「FF」が赤の強さ、次の「00」が緑の強さ、最後の「00」が青の強さとなります。赤は2ケタとも「F」なので最大に明るくて、緑と青は全部「0」で真っ暗です。つまり、モニターには赤が映ることになります。
先頭についている「#」は、これはカラーコードですよ、と知らせるための記号のようなものです。
HTMLカラーコード一覧表
理屈はちょっとややこしかったので、主な色を一覧表にまとめてみました。実際にカラーコードを使うときは、細かい仕組みまでわからなくてもコピペすればOKです！
8色のグラデーション
| #ffffff | #000000 | ||||||
| #fcfcfc | #fffbfb | #fffffb | #fbfffb | #fbffff | #fbfdff | #fffbfd | #fffbff |
| #f9f9f9 | #fff4f4 | #fffff4 | #f4fff4 | #f4ffff | #f4faff | #fff4fa | #fff4ff |
| #f4f4f4 | #ffeaea | #ffffea | #eaffea | #eaffff | #eaf4ff | #ffeaf4 | #ffeaff |
| #efefef | #ffdfdf | #ffffdf | #dfffdf | #dfffff | #dfefff | #ffdfef | #ffdfff |
| #e9e9e9 | #ffd5d5 | #ffffd5 | #d5ffd5 | #d5ffff | #d5eaff | #ffd5ea | #ffd5ff |
| #dfdfdf | #ffbfbf | #ffffbf | #bfffbf | #bfffff | #bfdfff | #ffbfdf | #ffbfff |
| #bfbfbf | #ff8080 | #ffff80 | #80ff80 | #80ffff | #80bfff | #ff80c0 | #ff80ff |
| #7f7f7f | #ff0000 | #ffff00 | #80ff00 | #00ffff | #0080ff | #ff0080 | #ff00ff |
| #4a4a4a | #950000 | #959500 | #009500 | #009595 | #004a95 | #95004a | #950095 |
| #353535 | #6a0000 | #6a6a00 | #006a00 | #006a6a | #00356a | #6a0035 | #6a006a |
パステルカラー（淡い色）
| #ffeaeb | #ffeaf4 | #ffeafa | #ffeaff | #f4eaff | #eaeaff | #eaf4ff | #eaffff |
| #eafff4 | #eaffea | #f4ffea | #ffffea | #fff4ea | #ffefea | #f3f8f1 | #f2f0f9 |
| #fff9f9 | #fff9fc | #fff9fe | #fff9ff | #fcf9ff | #fbf9ff | #f9f9ff | #f9fcff |
| #f9fffe | #f9fffc | #f9fff9 | #fcfff9 | #fffff9 | #fffcf9 | #fffbf9 | #fdfdfb |
落ち着いた色
| #d9e6df | #d9e6d9 | #dfe6d9 | #e6e6d9 | #e6e2d9 | #e6dfd9 | #e6dcd9 | #e6dbd9 |
| #e8d7d7 | #e6d9df | #e6d9e6 | #dfd9e6 | #dbd9e6 | #d9dbe6 | #d9dfe6 | #d9e6e6 |
| #add1d1 | #add1c9 | #add1bf | #add1b7 | #b7d1ad | #d1d1ad | #d1bfad | #d1b7ad |
| #d1adae | #d1adbf | #d1add1 | #bfadd1 | #b7add1 | #adadd1 | #adb7d1 | #adbfd1 |
| #7a4546 | #7a4560 | #7a456d | #7a457a | #60457a | #45457a | #45607a | #457a7a |
| #457a6d | #457a53 | #537a45 | #7a7a45 | #7a6d45 | #7a6045 | #7a5345 | #7a4b45 |
グレイスケール（グレーのグラデーション）
| #fcfcfc | #f9f9f9 | #f6f6f6 | #f4f4f4 | #efefef | #e9e9e9 | #e4e4e4 | #dfdfdf |
| #d9d9d9 | #d4d4d4 | #c9c9c9 | #bfbfbf | #b4b4b4 | #aaaaaa | #9f9f9f | #949494 |
| #7f7f7f | #747474 | #6a6a6a | #555555 | #3f3f3f | #2a2a2a | #151515 | #0a0a0a |
…というわけで今回は、HTMLカラーコードの仕組みと一覧表のまとめでした。必要なときにコピペして使ってみてくださいね。