【HTML / CSS】よく使う色を整理してみる

使い勝手が良い色、自分がよく使う色を整理しておきたいと思います!!!


基本色

まずは、赤。
色んな用途で使われることが多い色。
強調する時、エラーを表す時には一番最初にあがる色ではないでしょうか?

カラー名 : red
HEX   : #FF0000
RGB   : 255, 0, 0


CSS

.back-color-red {
  background-color: #FF0000 ;
}
.font-color-red {
  color: #FF0000;
}


基本的な色の1つ。
デフォルトの文字色によく使われる。
薄い背景色では文字色として優秀。

カラー名 : black
HEX   : #000000
RGB   : 0, 0, 0

※ソースコードは、赤と同様のため割愛。。。


デフォルトの背景色や、濃い目の背景色の時の文字色に使用される。

カラー名 : white
HEX   : #FFFFFF
RGB   : 255, 255, 255

※白は背景色と同化しちゃうので、灰色の線や背景色を入れています。

※ソースコードは、赤と同様のため割愛。。。


このままの青を使うというよりも少し薄めの色にして使うことが多い。
赤の反対でポジティブ色として使われることが多い。

カラー名 : blue
HEX   : #0000FF
RGB   : 0, 0, 255

※ソースコードは、赤と同様のため割愛。。。


信号などの進めからか、OKという意味合いで使われることが多い。
少し色合いを薄めにして使うと使いやすい。

カラー名 : green
HEX   : #008000
RGB   : 0, 128, 0

※ソースコードは、赤と同様のため割愛。。。


警告色として使うことが多い。
蛍光色なので、背景色によっては見えづらいため色合いの調整が必要。

カラー名 : yellow
HEX   : #FFFF00
RGB   : 255, 255, 0

※ソースコードは、赤と同様のため割愛。。。


オレンジ

個人的に好きな色。
いろんなところで使いやすいが、多用すると画面がカラフルになって逆に見辛くなることがあるので注意。

カラー名 : orange
HEX   : #FFA500
RGB   : 255, 165, 0

オレンジ

※ソースコードは、赤と同様のため割愛。。。


このサイトで使われている色

見出しなどに使っている緑

このサイトではベースの色として使用し、見出しなどで多用している。

HEX   : #05a5ab
RGB   : 5, 165, 171

緑?

※ソースコードは、赤と同様のため割愛。。。


薄めの灰色

灰色系は白ではなく色をつけたいが、薄めにしたい場合や、
取り消した状態を表現する際に使用することが多い。

HEX   : #ddd(#dddddd)
RGB   : 221, 221, 221

※ソースコードは、赤と同様のため割愛。。。


薄いブルー

後ほど追記


もう一段薄いブルー

後ほど追記


あとはこんな色が使いやすい

後ほど追記