根据背景色计算文本颜色

Question

我想创建一个文本颜色变量，但取决于我设置的背景颜色。

:root {
  --main-color-hue: 205;
  --main-color-saturation: 73%;
  --main-color-luminosity: 29%;

  --main-color: hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
  --main-dark-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
  --main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);

  --main-text-color: red; /* calculate white or black */
  --main-dark-text-color: red; /* calculate white or black */
  --main-light-text-color: red; /* calculate white or black */
}

button {
  background-color: var(--main-color);
  color: var(--main-text-color);
  border: 0;
  padding: 16px;
}

button.dark {
  background-color: var(--main-dark-color);
  color: var(--main-dark-text-color);
  border: 0;
  padding: 16px;
}

button.light {
  background-color: var(--main-light-color);
  color: var(--main-light-text-color);
  border: 0;
  padding: 16px;
}

Main
<button>test</button>
Dark
<button class="dark">test</button>
Light
<button class="light">test</button>

- tonymx227

---

我想只使用CSS代码。 - tonymx227

答案在CSS中。 - Rob

Answer 1

你可以考虑到负亮度的颜色总是黑色，而白色则是亮度大于100%的颜色。

这里有一个想法，我使用calc(30% - 亮度)，当亮度小于30%（白色）时它将返回正值，当亮度大于30%（黑色）时它将返回负值。我将所有值乘以100，以确保在出现较小的正数时也能得到白色。

:root {
  --main-color-hue: 205;
  --main-color-saturation: 73%;
  --main-color-luminosity: 29%;

  --main-color:       hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
  --main-dark-color:  hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
  --main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);

  --main-text-color:       hsl(0,100%, calc((30% - var(--main-color-luminosity))     *100)); 
  --main-dark-text-color:  hsl(0,100%, calc((30% - var(--main-color-luminosity)*0.5) *100)); 
  --main-light-text-color: hsl(0,100%, calc((30% - var(--main-color-luminosity)*1.5) *100)); 
}

button {
  background-color: var(--main-color);
  color: var(--main-text-color);
  border: 0;
  padding: 16px;
}

button.dark {
  background-color: var(--main-dark-color);
  color: var(--main-dark-text-color);
  border: 0;
  padding: 16px;
}

button.light {
  background-color: var(--main-light-color);
  color: var(--main-light-text-color);
  border: 0;
  padding: 16px;
}

Main
<button>test</button>
Dark
<button class="dark">test</button>
Light
<button class="light">test</button>

另一个例子是当您将阈值更改为25％时，注意第一种颜色将切换为黑色。

:root {
  --main-color-hue: 205;
  --main-color-saturation: 73%;
  --main-color-luminosity: 29%;

  --main-color:       hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
  --main-dark-color:  hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
  --main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);

  --main-text-color:       hsl(0,100%, calc((25% - var(--main-color-luminosity))     *100)); 
  --main-dark-text-color:  hsl(0,100%, calc((25% - var(--main-color-luminosity)*0.5) *100)); 
  --main-light-text-color: hsl(0,100%, calc((25% - var(--main-color-luminosity)*1.5) *100)); 
}

button {
  background-color: var(--main-color);
  color: var(--main-text-color);
  border: 0;
  padding: 16px;
}

button.dark {
  background-color: var(--main-dark-color);
  color: var(--main-dark-text-color);
  border: 0;
  padding: 16px;
}

button.light {
  background-color: var(--main-light-color);
  color: var(--main-light-text-color);
  border: 0;
  padding: 16px;
}

Main
<button>test</button>
Dark
<button class="dark">test</button>
Light
<button class="light">test</button>

- Temani Afif

---

谢谢，它有效了！但是将阈值设为25％后，结果似乎无法访问。 - tonymx227

@tonymx227，我更注重展示它的工作原理而不是找到最佳值。25%是为了展示第一个变成黑色 ;) - Temani Afif