SwitchBox > その他 > その他 > HTMLカラーコードまとめ:色の仕組みとHTMLカラー一覧表

HTMLカラーコードまとめ:色の仕組みとHTMLカラー一覧表

2013年02月16日
HTMLカラーコードまとめ:色の仕組みとHTMLカラー一覧表

HTMLカラーコードは、サイトやブログを作るときに使う「HTML」で色を表すための表記方法です。サイトを作るとき以外にも、ペイントソフトなんかに使われることも多いので、ざっくり知っておくと役に立ちますよ。

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カラーコードの仕組みと一覧表のまとめでした。必要なときにコピペして使ってみてくださいね。

HTMLカラーコードまとめ:色の仕組みとHTMLカラー一覧表
この記事は気に入ってもらえましたか?

記事が役に立ったり楽しかったときは、ぜひシェアしてみてください。
なるべく人気カテゴリーの記事を増やして便利なサイトになるように頑張ります!

オススメの記事

おすすめ記事はこちらです。



RSS

RSS登録はこちらから。好きなカテゴリーだけを選んで登録することも出来ますよ。

トップ / プライバシーポリシー
ページトップ