色したい（color）
p {
color: #333333;
}
colorプロパティで文字色を変更できます。
色の指定には、16進数、rgb()、hsl()、色名などいくつかの書き方があります。
background-colorで背景色、
border-colorで枠線の色をを変更できます。
文字色したい（color）
body {
color: #333333;
}
a {
color: #0066cc;
}
colorプロパティで文字色を変更できます。
colorは継承されるプロパティなので、bodyに指定しておけば、中の見出しや段落にも同じ色が適用されます。
一部だけ色を変えたいときに、その要素にcolorを指定し直します。
背景色したい（background-color）
.note {
background-color: #f4f4f4;
color: #333333;
}
background-colorプロパティで背景色を変更できます。
背景色を指定するときは、文字色もセットで指定します。 背景だけ濃くすると、文字が読めなくなることがあるためです。
16進数表記したい（#rrggbb）
.box {
color: #ff6600;
background-color: #fff;
}
色は16進数表記で指定できます。
#のあとに赤・緑・青の明るさを2桁ずつ並べて指定します。
#ff6600なら、赤がff、緑が66、青が00です。
各桁は00からffまでで、数字が大きいほどその色が明るくなります。
同じ数字が2つずつ並ぶときは、#ffffffを#fffのように3桁に省略できます。
半透明にしたい（rgb()）
.overlay {
background-color: rgb(0 0 0 / 50%);
}
rgb()で赤・緑・青を10進数の数値で指定できます。
値は0から255までです。
/のあとに不透明度を書くと、半透明の色になります。
50%ならちょうど半分の透明度で、下にある要素が透けて見えます。
色をなじませて調整したい（hsl()）
:root {
--accent: hsl(210 100% 50%);
--accent-dark: hsl(210 100% 35%);
}
hsl()で、色相・彩度・明度の3つで色を指定できます。
1つ目は色相で、
0から360の角度です。0が赤、120が緑、240が青です2つ目は彩度で、
0%が灰色、100%が鮮やかな色です3つ目は明度で、
0%が黒、100%が白です
色相と彩度をそろえて明度だけ変えると、同じ系統の濃い色・淡い色を作れます。 テーマ色のバリエーションを用意するときに便利です。
色名で指定したい
.demo {
color: red;
background-color: white;
border: 1px solid black;
}
redやwhiteのような色名でも色を指定できます。
色名はred、blue、green、white、blackなど約150種類が使えます。
すぐ書けるので試作や学習には便利ですが、微妙な色の調整ができないため、本番では16進数やhsl()を使うことが多いです。
transparentは完全な透明を表す特別なキーワードです。