Bootstrap5中如何在CSS内直接将十六进制颜色转RGB设置透明度

纯原生CSS方案（无预处理器依赖，适配Bootstrap 5 运行时主题能力） #

所有现代主流浏览器已支持CSS Color Module Level 4 标准的相对颜色语法，不需要自定义hex转rgb工具函数，也不需要额外定义带alpha通道的色值变量，直接从已有的十六进制色值派生透明版本即可：

:root {
  --base-color: #123456; /* 你原有的十六进制基础色变量，无需修改 */
}

.demo-block {
  /* 逻辑和你期望的rgba(hextorgb(#123456),0.5)效果完全一致 */
  background: rgb(from var(--base-color) r g b / 0.5);
}

语法里的from 基础色会自动把任意格式的基础色（十六进制、rgb、hsl、命名色都支持）拆分为r、g、b三个独立通道值，/后面直接写透明度即可，浏览器会自动渲染为合法的颜色值。

如果你用Bootstrap 5自带的主题色体系，框架本身已经提前为所有内置主题色生成了对应的RGB通道值变量，格式为--bs-*色名-rgb，直接调用即可，不需要自己转换：

.bs-primary-semi {
  /* 直接用Bootstrap提前生成的primary色通道值加透明度 */
  color: rgba(var(--bs-primary-rgb), 0.5);
}

Sass编译方案（兼容全版本浏览器，可直接用Bootstrap内置工具） #

你既然可以使用Bootstrap 5内置的Sass能力，连转换逻辑都不用自己写，两种最常用的写法：

• 固定透明度场景：直接给Sass内置的rgba()函数传十六进制色值即可，编译阶段Sass会自动完成十六进制到RGB通道的转换，输出标准CSS代码：

$base-color: #123456; // 你的基础十六进制色值，无需额外定义透明版本变量

.fixed-alpha-element {
  background: rgba($base-color, 0.5);
  // 编译后输出为：background: rgba(18, 52, 86, 0.5);
}

• 运行时动态调整透明度场景：用Bootstrap自带的to-rgb()工具函数，自动把十六进制色值拆分为逗号分隔的RGB通道字符串，存为CSS变量后可以在任意位置随时搭配不同透明度使用，不需要重复定义色值：

$base-color: #123456;
:root {
  --base-color: #{$base-color};
  // 调用Bootstrap内置函数自动生成通道值，不需要手动计算色值
  --base-color-rgb: #{to-rgb($base-color)};
}

.hover-effect:hover {
  background: rgba(var(--base-color-rgb), 0.7);
}
.light-border {
  border-color: rgba(var(--base-color-rgb), 0.15);
}

注意：不要自己手写hex转rgb的自定义函数，Bootstrap内置的to-rgb()已经兼容了短十六进制（如#123）、带原生alpha通道的十六进制（如#123456f0）等各种边缘场景，直接调用即可。

内容的提问来源于stack exchange，提问作者stats con chris