将调色板转换为另一种颜色

Question

我正在尝试将整个网站的页面从粉红色转换为绿色。他们使用的粉红色调色板可以很好地协同工作，我需要将调色板转换为绿色版本，但似乎无法正常使用。

当前面板

#fff0f0

#b18585

#b18597

#ffe3e2

#ffe9e9

#f9c4d2

关于如何将这些颜色转换为绿色调色板的任何建议？

Answer 1

将所有颜色从十六进制转换为HSL，然后将每种颜色的色相（第一个数字）调整120度。

然后根据需要将其转换回十六进制，但实际上没有必要，CSS支持HSLA。

示例：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-wrap: wrap;
}

div {
  height: 50px;
  width: 33.33%;
  border: 1px solid grey;
}

.pink.a {
  background: hsla(0, 25%, 50%, 1)
}

.green.a {
  background: hsla(120, 25%, 50%, 1)
}

.pink.b {
  background: hsla(0, 22%, 61%, 1)
}

.green.b {
  background: hsla(120, 22%, 61%, 1)
}

.pink.c {
  background: hsla(335, 22%, 61%, 1)
}

.green.c {
  background: hsla(95, 22%, 61%, 1) /* 355 + 120 - 360 = 95*/
}

<div class="pink a"></div>
<div class="pink b"></div>
<div class="pink c"></div>

<div class="green a"></div>
<div class="green b"></div>
<div class="green c"></div>

Answer 2

也许是这样的：#f0f19c, #bec020, #acad4c, #dddf90, #eaebb2, #d7d95a：