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

2024-05-20 • 问答

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

: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),calc(var(--main-color-luminosity) * 0.5),1);
  --main-light-color: hsla(var(--main-color-hue),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>

您可以考虑以下事实：负色度的颜色总是黑色，而白色是色度大于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),calc(var(--main-color-luminosity) * 0.5),1);
  --main-light-color: hsla(var(--main-color-hue),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,calc((30% - var(--main-color-luminosity)*0.5) *100)); 
  --main-light-text-color: hsl(0,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),calc((25% - var(--main-color-luminosity))     *100)); 
  --main-dark-text-color:  hsl(0,calc((25% - var(--main-color-luminosity)*0.5) *100)); 
  --main-light-text-color: hsl(0,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>

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

slamming123456 回答：根据背景颜色计算文本颜色

大家都在问