根据背景颜色计算文本颜色

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>

Answer 1

您可以考虑这样一个事实：具有负光度的颜色始终是黑色，而白色是光度大于 的颜色100%。

这是我使用的一个想法，calc(30% - luminosity)如果亮度小于 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>