CSSの特殊な色変更方法

通常の指定方法は？

色の名前や、カラーコードで指定することが一般的。

/* 色の名前で指定 */
h1 {
  color: pink;
}

/* カラーコードで指定 */
h1 {
  color: #ccc;
}

rgbaプロパティ

色・透明度を指定するすることが出来るプロパティ。
赤・緑・青には0 ~ 255までの数値を指定し、透明度には0 ~ 1までの数値を指定します。透明度は0が0%、0.5が50%、1が100%で数字が小さいほど透明度が高いです。
rgbaジェネレーターを使うことで、10段階で比べてくれるので好きな色を選択できます。

h1 {
  /* color: rgba(赤 , 緑 , 青 , 透明度) */
  color: rgba(255, 0, 0, 1.0);
}

h1 {
  /* 透明度が1.0(100%)の場合は省略できる */
  color: rgba(255, 0, 0);
}

hslaプロパティ

色の他に、彩度や輝度、透明度を指定できる。
値を指定する時の覚え方としては、「Hue（色相）」,「Saturation（彩度）」,「Luminance（輝度）」,「Alpha（透明度）」と、とhslaの頭文字を取った順番になっていると覚えればよい。
色相は0～360の値で指定する。
彩度は、0%が無彩色、100%が純色となります。
輝度は、一番暗い0%から100％に向かって明るくなります。
透明度は、0〜1の間で指定します。70%の場合は0.7という具合です。

h1 {
  /* color: hsla(色相, 彩度, 輝度, 透明度) */
  color: hsl(180, 100%, 50%, 1);
}

h1 {
  /* 透明度が1.0(100%)の場合は省略できる */
  color: hsl(180, 100%, 50%);
}