5

我正在尝试将文件从 Adob​​e InDesign 导出到基本的 HTML + CSS。

用户可以选择一些文本并更改文本颜色。使用 InDesign SDK，我可以获取该颜色的 RGB 值，并在 CSS 文件中声明color: rgb(R,G,B)效果非常好。

您还可以更改文本色调值。到目前为止，我只是采用 tint 值，将其转换为 0-1 范围，并在 CSS 中将条目设置为color: rgba(R,G,B,Tint)

在测试过程中，我意识到 tint = 0 实际上应该表示白色文本，但它没有显示在 HTML 上，因为 A (in RGBA) = 0 表示透明！！！

任何人都知道如何处理 CSS 中的色调值？

4

5 回答 5

4

CSS 中没有色调、色调、饱和度或亮度。您应该将这些属性“构建”到您的 RGB 颜色中。要在 RGB 上应用色调，请使用以下表达式：

当 R,G,B 从 0..255 开始时，从 0..1 开始着色

new R = tint*R + (1-tint)*255;
new G = tint*G + (1-tint)*255;
new B = tint*B + (1-tint)*255;

色调是您的颜色和白色的凸组合。参见维基百科。

于 2013-05-09T14:49:26.440 回答
2

Ivan Kuckir 的解决方案是正确的，我只是添加一个解释，因为它可能会帮助以后的人。

解释- 色调意味着在颜色中添加白色。色调 %X 意味着 = 白色和您的颜色混合在一起，其中白色是混合物的 (100-X)%，而您的颜色在混合物中占 X%。
因此，假设颜色为红色 (255,0,0) 和色调 0.6 => 创建 60% 红色和 40% 白色的混合物。

因此，得到的混合应该是 -
.6 * RED + .4 * WHITE
这可以按照一定比例混合任何 2 种颜色（C1、C2）= p:q

new R = p/(p+q) * R1 + q/(p+q) * R2
new G = p/(p+q) * G1 + q/(p+q) * G2
new B = p/(p+q) * B1 + q/(p+q) * B2

对于色调，(R2,G2,B2) = (255,255,255)

new R = tint*R + (1-tint)*255;
new G = tint*G + (1-tint)*255;
new B = tint*B + (1-tint)*255;
于 2013-05-10T12:49:53.723 回答
1

不幸的是，没有办法使用纯 CSS 进行文本着色。

CSS 中的颜色可以通过以下方法指定：

  • 十六进制颜色 - #RRGGBB
  • RGB 颜色 - rgb（红、绿、蓝）
  • RGBA 颜色 - rgb（红、绿、蓝、阿尔法）
  • HSL 颜色 - hsl（色相、饱和度、亮度）
  • HSLA 颜色 - hsl（色相、饱和度、亮度、alpha）
  • 预定义/跨浏览器颜色名称 - 'red'、'aqua' 等

资源

所以你需要一个 JS 脚本。（参见 Ivan Kuckir 的回答）；

于 2013-05-09T14:50:52.343 回答
1

您可以使用 CSS 变量来执行此操作 - 请参阅此示例。将 R、G、B 和 tint 定义为四个不同的 CSS 变量。

body {
    --content-R: 100%;
    --content-G: 0%;
    --content-B: 0%;
    --text-tint: 0.5;
}

然后，您可以将其用作：

.content {
   color: rgb(
        calc(var(--content-R) * var(--text-tint) + 100% - 100% * var(--text-tint)),
        calc(var(--content-G) * var(--text-tint) + 100% - 100% * var(--text-tint)),
        calc(var(--content-B) * var(--text-tint) + 100% - 100% * var(--text-tint))
    );
}

笔记：

  • 它仅在使用百分比 0% 到 100%（而不是整数 0 到 255）定义颜色时才有效。这是因为 rgb 函数将接受浮点数作为百分比。尝试使用整数 255 的计算值为 255 * 0.5，即 127.5，它不是有效的整数颜色值（因此 rgb 颜色不起作用）。您还需要注意calc函数的限制。

  • 您可以使用级联样式独立地改变子元素的颜色和色调（当我将 rgb calc 放入它自己的 body CSS 变量时它不起作用）。

  • 我只在 Chrome 65 上尝试过 -其他浏览器可能会有所不同！

  • 它可能对浏览器中的 CSS 样式引擎产生负面的性能影响？

于 2018-08-20T06:38:55.250 回答
0

.Less 对此有一个非常简单的实现。

添加 .less 文件后，您可以随意变暗和变亮

.element{
  color:darken(#444,20%);
  // or
  // color: lighten(#444,50%);
}

取自less.org

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);
于 2014-04-17T12:51:44.947 回答