CMYK 值作为背景颜色

Posted 2023-02-21

【中文标题】CMYK 值作为背景颜色

【英文标题】：CMYK values as background Color

【发布时间】：2012-09-01 13:54:29

【问题描述】：

我必须使用 RGB 值设置 div 的 backgroundColor 。我能够做到这一点。

<div style="width: 100px; height: 100px; background-color: rgb(255,0,0)">
</div>

现在，由于我也有 CMYK (0,1,0.5,0) 值，所以你能帮助我如何实现这些值。

我这样做了，但没有收获。

<div style="width: 100px; height: 100px; background-color: device-cmyk(0, 1, 0.5, 0)">
</div>

谢谢

【问题讨论】：

CMYK 表示与 RGB 相比非常不同的颜色空间中的颜色值（不仅仅是减法与加法），因此 正确 在 CMYK 和 RGB 之间进行转换只能通过定义颜色配置文件。像下面 Amini 的答案中的 cmyk_to_rgb2 函数这样的转换给出了不错的近似结果，但是如果没有颜色配置文件，屏幕上的颜色将永远不会匹配打印的颜色（否则，如果 CMYK 和 RGB 可以直接来回转换，我们可以只需将 RGB 用于所有内容并完全放弃 CMYK）。 CMYK 也无法与 HSB/HSL 相提并论，因为 HSB/HSL 仍然是加法的。

【参考方案1】：

您不能直接在 CSS 中执行此操作。您必须在其他地方（可能通过服务器端脚本）将 CMYK 值转换为对应的 RGB 值，并在 CSS 中使用转换后的值。请注意，转换实际上与 SVG 函数所做的没有太大区别。

【参考方案2】：

您可以使用这个php函数或使用类似的算法来通过客户端脚本语言实现：

function cmyk_to_rgb2($c, $m, $y, $k)

    $c = (255 * $c) / 100;
    $m = (255 * $m) / 100;
    $y = (255 * $y) / 100;
    $k = (255 * $k) / 100;

    $r = round(((255 - $c) * (255 - $k)) / 255) ;
    $g = round((255 - $m) * (255 - $k) / 255) ;
    $b = round((255 - $y) * (255 - $k) / 255) ; 

    $o->r = $r ;
    $o->g = $g ;
    $o->b = $b ;

    return $o ;

PHP, javascript

【讨论】：

请不要这样滥用 PHP。这就是为什么网页需要很长时间才能加载的原因。是的，这是真的，只有这个小sn-p不会让它减慢任何可测量的量。但是，如果你的代码中使用的其他 sn-ps 乘以 100，你就会遇到一个主要的加载速度问题。

【参考方案3】：

你可以用 SCSS 做到这一点：

@function cmyk($c, $m, $y, $k:0) 
  $c: $c / 255;
  $m: $m / 255;
  $y: $y / 255;
  $k: $k / 1;
  $r: 255 * (1 - $c) * (1 - $k);
  $g: 255 * (1 - $m) * (1 - $k);
  $b: 255 * (1 - $y) * (1 - $k);
  @return rgb($r, $g, $b);

注意：key 的最大值为 1，超过此值，颜色开始反转。