【发布时间】：2021-03-04 05:25:18
【问题描述】：
我需要在我的网页上使用 CMYK 颜色。有没有办法在 CSS 中使用 CMYK 或者可以使用 JavaScript 将 CMYK 转换为 RGB？
编辑：
我的意思是我有 CMYK 符号的颜色创建算法，我需要在网页上使用它。
【问题讨论】：
-
如果您要麻烦转换它，请首先使用十六进制...您无法控制颜色吗？
标签： javascript html css
【发布时间】：2021-03-04 05:25:18
【问题描述】：
没有将 CMYK 转换为 RGB 的完美算法方法。 CYMK 是减色系统，RGB 是加色系统。每个都有不同的gamuts，这意味着有些颜色无法在其他颜色系统中表示，反之亦然。两者都是依赖于设备的颜色空间，这实际上意味着您真正获得的颜色取决于您使用哪个设备来再现该颜色，这就是为什么您为每个设备设置颜色配置文件来调整它如何将颜色生成为更“绝对”的东西.
您能做的最好的事情就是将一个空间近似模拟到另一个空间。整个计算机科学领域都致力于这种工作，而且它的重要性不言而喻。
如果您正在寻找这样做的启发式方法，那么 Cyrille 提供的链接是非常简单的数学运算，并且很容易反转以接受 CYMK 颜色并生成合理的 RGB 传真。
一个非常简单的启发式方法是将青色映射到0x00FFFF，品红色映射到0xFF00FF，黄色映射到0xFFFF00，黑色（键）映射到0x000000。然后做这样的事情：
function cmykToRGB(c,m,y,k) {
function padZero(str) {
return "000000".substr(str.length)+str
}
var cyan = (c * 255 * (1-k)) << 16;
var magenta = (m * 255 * (1-k)) << 8;
var yellow = (y * 255 * (1-k)) >> 0;
var black = 255 * (1-k);
var white = black | black << 8 | black << 16;
var color = white - (cyan | magenta | yellow );
return ("#"+padZero(color.toString(16)));
}
使用 cmyk 范围从 0.0 到 1.0 调用 cmykToRGB。这应该会给你一个 RGB 颜色代码。但这只是一种启发式方法，这些色彩空间之间的实际对话要复杂得多，并且考虑到更多的变量，然后在这里表示。您的里程可能会有所不同，并且从中获得的颜色可能不会“看起来正确”
【讨论】：
没有办法在 CSS 中使用 CMYK。您可以使用 RGB 或 HSL（仅限 CSS3）。这是一个JavaScript algorithm，用于将 CMYK 转换为 RGB（反之亦然）。
编辑：链接现在似乎失效了，这是来自缓存版本的代码：
/**
*
* Javascript color conversion
* http://www.webtoolkit.info/
*
**/
function HSV(h, s, v) {
if (h <= 0) { h = 0; }
if (s <= 0) { s = 0; }
if (v <= 0) { v = 0; }
if (h > 360) { h = 360; }
if (s > 100) { s = 100; }
if (v > 100) { v = 100; }
this.h = h;
this.s = s;
this.v = v;
}
function RGB(r, g, b) {
if (r <= 0) { r = 0; }
if (g <= 0) { g = 0; }
if (b <= 0) { b = 0; }
if (r > 255) { r = 255; }
if (g > 255) { g = 255; }
if (b > 255) { b = 255; }
this.r = r;
this.g = g;
this.b = b;
}
function CMYK(c, m, y, k) {
if (c <= 0) { c = 0; }
if (m <= 0) { m = 0; }
if (y <= 0) { y = 0; }
if (k <= 0) { k = 0; }
if (c > 100) { c = 100; }
if (m > 100) { m = 100; }
if (y > 100) { y = 100; }
if (k > 100) { k = 100; }
this.c = c;
this.m = m;
this.y = y;
this.k = k;
}
var ColorConverter = {
_RGBtoHSV : function (RGB) {
var result = new HSV(0, 0, 0);
r = RGB.r / 255;
g = RGB.g / 255;
b = RGB.b / 255;
var minVal = Math.min(r, g, b);
var maxVal = Math.max(r, g, b);
var delta = maxVal - minVal;
result.v = maxVal;
if (delta == 0) {
result.h = 0;
result.s = 0;
} else {
result.s = delta / maxVal;
var del_R = (((maxVal - r) / 6) + (delta / 2)) / delta;
var del_G = (((maxVal - g) / 6) + (delta / 2)) / delta;
var del_B = (((maxVal - b) / 6) + (delta / 2)) / delta;
if (r == maxVal) { result.h = del_B - del_G; }
else if (g == maxVal) { result.h = (1 / 3) + del_R - del_B; }
else if (b == maxVal) { result.h = (2 / 3) + del_G - del_R; }
if (result.h < 0) { result.h += 1; }
if (result.h > 1) { result.h -= 1; }
}
result.h = Math.round(result.h * 360);
result.s = Math.round(result.s * 100);
result.v = Math.round(result.v * 100);
return result;
},
_HSVtoRGB : function (HSV) {
var result = new RGB(0, 0, 0);
var h = HSV.h / 360;
var s = HSV.s / 100;
var v = HSV.v / 100;
if (s == 0) {
result.r = v * 255;
result.g = v * 255;
result.v = v * 255;
} else {
var_h = h * 6;
var_i = Math.floor(var_h);
var_1 = v * (1 - s);
var_2 = v * (1 - s * (var_h - var_i));
var_3 = v * (1 - s * (1 - (var_h - var_i)));
if (var_i == 0) {var_r = v; var_g = var_3; var_b = var_1}
else if (var_i == 1) {var_r = var_2; var_g = v; var_b = var_1}
else if (var_i == 2) {var_r = var_1; var_g = v; var_b = var_3}
else if (var_i == 3) {var_r = var_1; var_g = var_2; var_b = v}
else if (var_i == 4) {var_r = var_3; var_g = var_1; var_b = v}
else {var_r = v; var_g = var_1; var_b = var_2};
result.r = var_r * 255;
result.g = var_g * 255;
result.b = var_b * 255;
result.r = Math.round(result.r);
result.g = Math.round(result.g);
result.b = Math.round(result.b);
}
return result;
},
_CMYKtoRGB : function (CMYK){
var result = new RGB(0, 0, 0);
c = CMYK.c / 100;
m = CMYK.m / 100;
y = CMYK.y / 100;
k = CMYK.k / 100;
result.r = 1 - Math.min( 1, c * ( 1 - k ) + k );
result.g = 1 - Math.min( 1, m * ( 1 - k ) + k );
result.b = 1 - Math.min( 1, y * ( 1 - k ) + k );
result.r = Math.round( result.r * 255 );
result.g = Math.round( result.g * 255 );
result.b = Math.round( result.b * 255 );
return result;
},
_RGBtoCMYK : function (RGB){
var result = new CMYK(0, 0, 0, 0);
r = RGB.r / 255;
g = RGB.g / 255;
b = RGB.b / 255;
result.k = Math.min( 1 - r, 1 - g, 1 - b );
result.c = ( 1 - r - result.k ) / ( 1 - result.k );
result.m = ( 1 - g - result.k ) / ( 1 - result.k );
result.y = ( 1 - b - result.k ) / ( 1 - result.k );
result.c = Math.round( result.c * 100 );
result.m = Math.round( result.m * 100 );
result.y = Math.round( result.y * 100 );
result.k = Math.round( result.k * 100 );
return result;
},
toRGB : function (o) {
if (o instanceof RGB) { return o; }
if (o instanceof HSV) { return this._HSVtoRGB(o); }
if (o instanceof CMYK) { return this._CMYKtoRGB(o); }
},
toHSV : function (o) {
if (o instanceof HSV) { return o; }
if (o instanceof RGB) { return this._RGBtoHSV(o); }
if (o instanceof CMYK) { return this._RGBtoHSV(this._CMYKtoRGB(o)); }
},
toCMYK : function (o) {
if (o instanceof CMYK) { return o; }
if (o instanceof RGB) { return this._RGBtoCMYK(o); }
if (o instanceof HSV) { return this._RGBtoCMYK(this._HSVtoRGB(o)); }
}
}
用法：
要将 HSV 转换为 RGB，请使用如下库：
var result = ColorConverter.toRGB(new HSV(10, 20, 30));
alert("RGB:" + result.r + ":" + result.g + ":" + result.b);
要将 RGB 转换为 HSV，请使用如下库：
var result = ColorConverter.toHSV(new RGB(10, 20, 30));
alert("HSV:" + result.h + ":" + result.s + ":" + result.v);
CMYK 也是如此。
【讨论】：
-
阅读标题：“RGB 到 CMYK 颜色转换”。我需要 CMYK 转 RGB
-
链接已失效，这就是为什么您不应发布带有链接且没有实际代码的答案。
CSS 中的 CMYK 支持当前为 considered by W3 for CSS3。但它主要用于打印机，“预计以屏幕为中心的用户代理不支持 CMYK 颜色”。我认为您可以放心地打赌，当前的浏览器都不支持 CMYK 屏幕，因此您必须以某种方式将颜色转换为 RGB。
【讨论】：
在 2019 年 11 月 5 日 W3C 的 CSS Color Module Level 4 中，有一个名为 device-cmyk 的函数可用于定义与设备相关的 CMYK 颜色值。
例子：
color: device-cmyk(0 81% 81% 30%);
该函数返回一个 RGB 值，设备通过尝试将 CMYK 颜色转换为与 CMYK 颜色尽可能匹配的 RGB 值来计算。
注意：我找不到有关浏览器支持的任何信息。我猜目前没有浏览器支持这个。
【讨论】：
您可以创建自己的 SCSS/SASS 函数。 SCSS：
@function cmyk($c, $m, $y, $k) {
$c: $c / 100;
$m: $m / 100;
$y: $y / 100;
$k: $k / 100;
$r: 255 * (1 - $c) * (1 - $k);
$g: 255 * (1 - $m) * (1 - $k);
$b: 255 * (1 - $y) * (1 - $k);
@return rgb($r, $g, $b);
}
SASS：
@function cmyk($c, $m, $y, $k)
$c: $c / 100
$m: $m / 100
$y: $y / 100
$k: $k / 100
$r: 255 * (1 - $c) * (1 - $k)
$g: 255 * (1 - $m) * (1 - $k)
$b: 255 * (1 - $y) * (1 - $k)
@return rgb($r, $g, $b)
【讨论】：