CSS 変数で色を透過したりパレットを生成する

2022-09-22

CSS

CSS 変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、rgb()やhsl()、lch()などの関数に渡して、色を生成することができる。

基本#

CSS 変数で色を扱う場合の基本的な書き方。

1
:root {
2
  --custom-variable: purple;
3
}
4
h1 {
5
  color: var(--custom-variable);
6
}

透過#

RGB を CSS 変数に持たせるパターン。この例では色を透過している。

1
section {
2
  --theme-color: 255 255 0;
3
  background-color: rgb(var(--theme-color));
4
}
5
section {
6
  background-color: rgb(var(--theme-color) / 0.7);
7
}

パレット#

hsl や lcp を利用をしてカラーテーマを作る。この例では Hue の値を変数に持たせている。

1
div {
2
  --color-hue-angle: 100;
3
  background: linear-gradient(
4
    hsl(var(--color-hue-angle) 100% 70%),
5
    hsl(var(--color-hue-angle) 100% 20%)
6
  );
7
}