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

2022年9月22日

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

#CSS

Table of Contents

# 基本
# 透過
# パレット

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

基本

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

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

透過

RGBを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の値を変数に持たせている。

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