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

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>