HTMLコーディングでCSSで指定することのできるグレーのカラーチャートです。個人的にグレーをよく使うのでまとめました。
目次
白から黒までのウェブカラー[11色]
明るさを100%と考えて順に10%低くし、最終的にブラックになるまでの11色グラデーション。
- #ffffff｜rgba(255, 255, 255, 1)
- #e2e2e2｜rgba(226, 226, 226, 1)
- #c6c6c6｜rgba(198, 198, 198, 1)
- #ababab｜rgba(171, 171, 171, 1)
- #919191｜rgba(145, 145, 145, 1)
- #777777｜rgba(119, 119, 119, 1)
- #5f5f5f｜rgba(95, 95, 95, 1)
- #464646｜rgba(70, 70, 70, 1)
- #313131｜rgba(49, 49, 49, 1)
- #1b1b1b｜rgba(27, 27, 27, 1)
- #000000｜rgba(0, 0, 0, 1)
100%～90%のウェブカラー[11色]
明るさ100%～90%の11色グラデーション。
- #ffffff｜rgba(255, 255, 255, 1)
- #fcfcfc｜rgba(252, 252, 252, 1)
- #f9f9f9｜rgba(249, 249, 249, 1)
- #f6f6f6｜rgba(246, 246, 246, 1)
- #f3f3f3｜rgba(243, 243, 243, 1)
- #f1f1f1｜rgba(241, 241, 241, 1)
- #eeeeee｜rgba(238, 238, 238, 1)
- #ebebeb｜rgba(235, 235, 235, 1)
- #e8e8e8｜rgba(232, 232, 232, 1)
- #e5e5e5｜rgba(229, 229, 229, 1)
- #e2e2e2｜rgba(226, 226, 226, 1)
#999999系
黒指定で微妙な色合いを分けたい場合によく使われます。個人的に#333333は背景色にも使えて好みです。3桁で指定できるため#999のように書けます。
- #999999｜rgba(153, 153, 153, 1)
- #888888｜rgba(136, 136, 136, 1)
- #777777｜rgba(119, 119, 119, 1)
- #666666｜rgba(102, 102, 102, 1)
- #555555｜rgba(85, 85, 85, 1)
- #444444｜rgba(68, 68, 68, 1)
- #333333｜rgba(51, 51, 51, 1)
- #222222｜rgba(34, 34, 34, 1)
- #111111｜rgba(17, 17, 17, 1)
- #000000｜rgba(0, 0, 0, 1)
#E系グレー
#e3e3e3辺りがよくボーダーに使われるので記載。肉眼ではほぼわかりませんね。
- #e9e9e9｜rgba(233, 233, 233, 1)
- #e8e8e8｜rgba(232, 232, 232, 1)
- #e7e7e7｜rgba(231, 231, 231, 1)
- #e6e6e6｜rgba(230, 230, 230, 1)
- #e5e5e5｜rgba(229, 229, 229, 1)
- #e4e4e4｜rgba(228, 228, 228, 1)
- #e3e3e3｜rgba(227, 227, 227, 1)
- #e2e2e2｜rgba(226, 226, 226, 1)
- #e1e1e1｜rgba(225, 225, 225, 1)
#f系グレー
絶妙に背景色を付けたい時に便利です。個人的によく#f7f7f7を使います。
- #f9f9f9｜rgba(249, 249, 249, 1)
- #f8f8f8｜rgba(248, 248, 248, 1)
- #f7f7f7｜rgba(247, 247, 247, 1)
- #f6f6f6｜rgba(246, 246, 246, 1)
- #f5f5f5｜rgba(245, 245, 245, 1)
- #f4f4f4｜rgba(244, 244, 244, 1)
- #f3f3f3｜rgba(243, 243, 243, 1)
- #f2f2f2｜rgba(242, 242, 242, 1)
- #f1f1f1｜rgba(241, 241, 241, 1)
