170文字
1分
編集

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

#CSS

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

#基本

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

css
:root {
  --custom-variable: purple;
}
h1 {
  color: var(--custom-variable);
}

#透過

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

css
section {
  --theme-color: 255 255 0;
  background-color: rgb(var(--theme-color));
}
section {
  background-color: rgb(var(--theme-color) / 0.7);
}

#パレット

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

jsx
div {
  --color-hue-angle: 100;
  background: linear-gradient(
    hsl(var(--color-hue-angle) 100% 70%),
    hsl(var(--color-hue-angle) 100% 20%)
  );
}
編集