Web制作がはかどる!暗記すると便利なカラーコード集

Webサイトを制作する上でよく使うカラーコードは、暗記しておくとスピードアップに繋がり便利です。

今回は汎用性が高く、かつ単純で覚えやすいカラーコードをまとめました。普段のWeb制作にお役立てください。この記事では主に無彩色を取り扱います。

黒系

文字色やダークテーマを取り扱う上で欠かせない黒系色です。白背景に対する文字色は、真っ黒ではなく少し淡い#333あたりが読みやすいとされています。

カラーコード 色見本
#000000
#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999

灰色系

いろいろな場面で応用のきく灰色系です。白背景の上で灰色の枠線で囲みたいときは、この辺りの色と親和性が高いです。

カラーコード 色見本
#aaaaaa
#bbbbbb
#cccccc
#dddddd
#eeeeee

白系

白に近い灰色です。主に記事背景色(#fff)と組み合わせて使います。

カラーコード 色見本
#f1f1f1
#f2f2f2
#f3f3f3
#f4f4f4
#f5f5f5
#f6f6f6
#f7f7f7
#f8f8f8
#f9f9f9
#ffffff
カラーコード 色見本
#f4f5f5
#f4f5f6
#f4f5f7
#f4f5f8
#f4f5f9

こちらは赤みの少ない灰色です。

その他

主にデバッグに使う派手な色です。要素の範囲を視覚的に捉えたいときなどに、一時的に使いましょう。

カラーコード 色見本
#ff0000
#0000ff
#ffff00