如何基于CSS十六进制颜色码生成更深的颜色，且不改变文字色值？

• 方法1：背景叠加半透明黑色渐变（兼容性最好）
  无需修改原背景色取值，直接在背景层叠一层对应透明度的纯黑渐变即可实现调暗效果，完全不会影响文字等内容的颜色展示。
  示例代码：

.target-element {
  /* 黑色渐变的透明度0.2对应调暗20%，可按需调整，后面替换为你原来的背景色 */
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #原背景色值;
  color: #你的文字颜色; /* 完全不受背景调暗影响 */
}

如果需要调亮背景，把渐变替换为白色rgba(255,255,255,透明度)即可。

• 方法2：使用color-mix直接混合调整背景色（代码最简洁）
  直接将原背景色和黑色按比例混合，得到调暗后的背景色值，兼容性支持Chrome 111+、Firefox 113+、Safari 16.2+，适合不需要兼容老旧浏览器的场景。
  示例代码：

.target-element {
  /* 20%代表混合20%的黑色，即调暗20%，可按需调整比例 */
  background-color: color-mix(in srgb, #原背景色值, black 20%);
  color: #你的文字颜色;
}

• 方法3：拆分背景与内容元素适配brightness滤镜
  如果必须使用filter: brightness()实现，可将背景和内容拆分为独立节点，避免滤镜作用到文字上：
  结构示例：

<div class="container">
  <div class="background-layer"></div>
  <p>你的文字内容</p>
</div>

样式示例：

.container {
  position: relative;
}
.background-layer {
  position: absolute;
  inset: 0;
  background-color: #原背景色值;
  filter: brightness(0.8); /* 按需调整亮度参数 */
  z-index: 0;
}
.container p {
  position: relative;
  z-index: 1;
  color: #你的文字颜色;
}

内容的提问来源于stack exchange，提问作者chovy