Как по умному использовать hsla?

[sol_los]

хочется использовать прозрачности в hslа c заранее заготовленной переменной
т.е.

вместо
#F1602220
#F1602240

:root{
--orange: #F16022;
}

#bgr{
background: var(--orange)20
}
#bgr2{
background: var(--orange)40
}

можно ли что-то подобное изобразить?

 

[maxisoft]

если на чистом css тогда только так

/**common-colors*/
:root {
  /* base color 1 */
  --base-color1: 60;
  --color1-light: hsla(var(--base-color1), 50%, 75%, 100%);
  --color1-normal: hsla(var(--base-color1), 50%, 50%, 100%);
  --color1-darker: hsla(var(--base-color1), 50%, 35%, 100%);
  /* base color 2 */
  --base-color2: 120;
  --color2-light: hsla(var(--base-color2), 50%, 75%, 100%);
  --color2-normal: hsla(var(--base-color2), 50%, 50%, 100%);
  --color2-darker: hsla(var(--base-color2), 50%, 35%, 100%);
  /*base color 3*/
  --base-color3: 200;
  --color3-light: hsla(var(--base-color3), 50%, 75%, 100%);
  --color3-normal: hsla(var(--base-color3), 50%, 50%, 100%);
  --color3-darker: hsla(var(--base-color3), 50%, 35%, 100%);
}

ul {
  display: flex;
  margin: 0 auto;
  width: 240px;
  margin-bottom: 10px;
}

li {
  margin: 10px;
}

[class*=box] {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border-radius: 8px;
}

.box1:nth-child(1) {
  background: var(--color1-light);
}
.box1:nth-child(2) {
  background: var(--color1-normal);
}
.box1:nth-child(3) {
  background: var(--color1-darker);
}

.box2:nth-child(1) {
  background: var(--color2-light);
}
.box2:nth-child(2) {
  background: var(--color2-normal);
}
.box2:nth-child(3) {
  background: var(--color2-darker);
}

.box3:nth-child(1) {
  background: var(--color3-light);
}
.box3:nth-child(2) {
  background: var(--color3-normal);
}
.box3:nth-child(3) {
  background: var(--color3-darker);
}

body {
  margin-top: 20px;
}

 

[sol_los]

Познавательно, спасибо!