CSS 中的色彩操作

给单一颜色的基本颜色值集：

:root {
  --h: 100;
  --s: 50%;
  --l: 50%;
  --hsl: var(--h), var(--s), var(--l);
  --hslf: hsl(var(--hsl));
}

您可以通过以下任意一种方式玩彩色游戏。

阿尔法通道

使用Alpha通道的基色和变化

background-color: hsla(
  var(--hsl),
  1
);

background-color: hsla(
  var(--hsl),
  .8
);

background-color: hsla(
  var(--hsl),
  .6
);

background-color: hsla(
  var(--hsl),
  .4
);

background-color: hsla(
  var(--hsl),
  .2
);

Sass颜色功能等效项

`adjust-hue`

background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );

background-color: hsl(
  calc(var(--h) + 72),
  var(--s),
  var(--l)
 );

background-color: hsl(
  calc(var(--h) + 144),
  var(--s),
  var(--l)
 );

background-color: hsl(
  calc(var(--h) + 216),
  var(--s),
  var(--l)
 );

background-color: hsl(
  calc(var(--h) + 288),
  var(--s),
  var(--l)
 );

background-color: hsl(
  calc(var(--h) + 360),
  var(--s),
  var(--l)
 );

`saturate`

background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );

background-color: hsl(
  var(--h),
  calc(var(--s) + 10%),
  var(--l)
 );

background-color: hsl(
  var(--h),
  calc(var(--s) + 20%),
  var(--l)
 );

background-color: hsl(
  var(--h),
  calc(var(--s) + 30%),
  var(--l)
 );

background-color: hsl(
  var(--h),
  calc(var(--s) + 40%),
  var(--l)
 );

`desaturate`

background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );

background-color: hsl(
  var(--h),
  calc(var(--s) - 10%),
  var(--l)
 );

background-color: hsl(
  var(--h),
  calc(var(--s) - 20%),
  var(--l)
 );

background-color: hsl(
  var(--h),
  calc(var(--s) - 30%),
  var(--l)
 );

background-color: hsl(
  var(--h),
  calc(var(--s) - 40%),
  var(--l)
 );

`lighten`

background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );

background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) + 10%)
 );

background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) + 20%)
 );

background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) + 30%)
 );

background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) + 40%)
 );

`darken`

background-color: hsl(
  var(--h),
  var(--s),
  var(--l)
 );

background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) - 10%)
 );

background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) - 20%)
 );

background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) - 30%)
 );

background-color: hsl(
  var(--h),
  var(--s),
  calc(var(--l) - 40%)
 );