CSSで色を設定する方法

CSSで背景色などの色を指定する方法がいろいろあるため、まとめました。
以下、4種類の方法を記載していますが、全て同じ色となります。

色名を指定する

.button1 {
  background: aqua;
}

CSSには名前で使用できる色があらかじめ用意されていて、それを指定することで色をつけることができます。

16進数で指定する

.button2 {
  background: #00ffff;
}

16進数での指定方法もあります。ここのサイトにいろいろ載っているので参考にしましょう。

rgbで指定する

.button3 {
  background: rgb(0, 255, 255);
}

rgbを指定することで、色を決めることもできます。
rgb(赤, 青, 緑)と値を指定して使用します。 なお、透明度を指定することができるrgbaもあります。

hslで指定する

.button4 {
  background: hsl(180, 100%, 50%);
}

hslでは、hsl(色相, 彩度, 輝度)という形で色を指定します。 なお、不透明度を指定することができるhslaもあります。

色の指定方法一つとっても、いろいろあるんですね。
CSSさっぱりわからない。