css - 如何将 RGB 转换为 HEX(用于渐变)

Question

我正在使用这个:css progress bar

太棒了，我们几乎对每个方面都进行了定制。问题是，我真的很讨厌渐变，但它们是 rgba 值。

有谁知道如何将渐变更改为十六进制值，以便我们可以完成样式。

(我们拥有的 css)是:

background-color: #74d04c;
/* Webkit background stripes and gradient */
background: -webkit-gradient(linear, 0 0, 44 44, color-stop(0, rgba(255, 255, 255, 0.17)), color-stop(0.25, rgba(255, 255, 255, 0.17)), color-stop(0.26, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.51, rgba(255, 255, 255, 0.17)), color-stop(0.75, rgba(255, 255, 255, 0.17)), color-stop(0.76, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0.35))), #74d04c;


background: -moz-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
 /* Give it a higher contrast outline */
 border: 1px solid #4c8932;

我只是没有得到 rgb(所以想看看我们如何转换为 #hex 值)

即使是链接也可以。

干杯

Answer 1

您的示例使用了透明度。用于定义透明颜色的 css3 规范使用 rgba(r,g,b,a)

在渐变中有一个使用 HEX 的替代语法:

rgba(255, 255, 255, 0.25) => #FFFFFF 25%

参见:http://gradients.glrzad.com/

此外，您“没有得到 rgb”的理由确实应该得到检验。也许您应该花点时间理解 RGB 作为数字色彩中一个非常重要的概念。