Css 将十六进制转换为RGBa

我想在RGB中转换十六进制颜色，但在网上搜索时，我知道我可以使用SASS，但只能使用RGBa

请考虑这个代码：

@mixin hex-rgba($hexcolor, $opacity) {
  background-color: rgba($hexcolor, $opacity); 
}

div {
  @include hex-rgba(#333333, .3);
}

它返回：

div {
  background-color: rgba(51, 51, 51, 0.3);
}

但如果我将alpha设置为1（或100%），它将返回十六进制值：

div {
  @include hex-rgba(#333333, 1);
}

div {
  background-color: #333333;
}

即使alpha为100%，我如何获得rgba值

以这样的方式

div {
  background-color: rgba(51, 51, 51, 1);
}

已解决

@function rgb($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgb(#{$red},#{$green},#{$blue})");
}

:root {
  --color: #{rgb(#ffffff)};
}

试试这个代码

 @mixin hex-rgba($hexcolor, $opacity) {
  @if $opacity == 1 or $opacity == 100% {

  background-color:hex($hexcolor);
  }
  @else {
   background-color: rgba($hexcolor, $opacity);
  }
}


@function hex($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
}

div {
  @include hex-rgba(#333333, 0.2);
}

尝试此更新代码

@function hex($hexcolor,$opacity){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @if $opacity == 1 or $opacity == 100% {
    @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
  }
  @else{
    @return unquote("rgba(#{$red},#{$green},#{$blue},#{$opacity})");
  }
}

body {
  background-color:#{hex(#333333,0.5)};
}

:root {
  --color: #{hex(#ff0000,1)};
}
div{
  height:50px;
  width: 50px;
  background-color: var(--color);
}

你也可以试试Sassmeister

---

如果您只想要RGB，请尝试使用此选项

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

color: toRGB(#ffffff); /* returns color: rgb(255, 255, 255)*/

---

如果有人想用SCS切换颜色主题

新方法（不需要函数或新变量。） 学分：

旧方法（使用函数） 学分：

摘要：在rgba中，Alpha不适用于根十六进制变量。例如：rgba（var（--体色），1） 但rgba（#fefbfb，1）确实如此。但是主题转换是不可能的。

---

阅读以上文章了解更多信息。

尝试更新的百分比代码如果有人提供了您问题的答案，您应该接受他们的答案，而不是用解决方案更新问题。这看起来不错，但如果我想将此函数用于css var，该怎么办？请看这里，当您可以使用来自SASS的变量时，为什么要使用CSS变量？你所要做的就是：

$primary:toRGB（#ffffff）然后，例如
背景：$primary
，因为我想切换web应用程序的颜色主题；-）如果我想将该函数用于cssvar声明，该怎么办@antoniomatera，请找到更新的代码块。这是你需要的吗？
.div {
  background-color: var(--body-color);
}

.div::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: var(--body-color);
  opacity: 0.5;
}

// To convert hex to RGB codes.
@function hexToRGB($hex) {

      @return red($hex), green($hex), blue($hex); // Plain comma seperated RGB values.
     
}

$body-color: #fefbfb; // Light Theme
$body-color-d: #0f111a; // Dark Theme

:root {
  --body-color-rgb: #{hexToRGB($body-color)}; // Calling 
}

body.dark{
  --body-color: #{$body-color-d};
}

body {
  background-color: var(--body-color);
}

.div {
  background-color: rgba(var(--body-color-rgb), 0.9);
}