在网页上使用CMYK

Question

我需要在我的网页上使用CMYK颜色。在CSS中是否有使用CMYK的方法，或者可以使用JavaScript将CMYK转换为RGB？

编辑：

我的意思是我有用CMYK符号创建颜色的算法，我需要在网页上使用它。

Answer 1

没有完美的算法方法可以将CMYK转换为RGB。CYMK是减色系统，RGB是加色系统。每个颜色都有不同的甘露特，这意味着有些颜色不能在其他颜色系统中表示，反之亦然。两者都是与设备相关的颜色空间，这实际上意味着您真正得到的颜色取决于您用来再现该颜色的设备，这就是为什么您为每个设备都提供了颜色配置文件，这些配置文件可以将其生成颜色的方式调整为更“绝对”的颜色。

你能做的最好的就是把一个空间的模拟近似到另一个空间上。整个计算机科学领域都致力于这类工作，而且它并不是微不足道的。

如果你正在寻找一个启发式来做这个，那么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调用cmykToRGB的范围从0.0到1.0不等。这应该会给你一个RGB颜色代码。但这只是一个启发，在这些颜色空间之间的实际对话要复杂得多，并且考虑了更多的变量，然后在这里表示。你的里程可能会不同，你从中得到的颜色也可能“看上去不对”。

jsFiddle在这里

Answer 2

在CSS中无法使用CMYK。您可以使用RGB或HSL (仅限CSS3)。这里有一个将CMYK转换为RGB的JavaScript算法 (反过来也是如此)。

编辑:链接现在看来已经死了，下面是缓存版本的代码：

/**
*
*  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也是如此。

Answer 3

CSS中的CMYK支持目前是由W3为CSS3审议。但它主要用于打印机，而且“以屏幕为中心的用户代理支持CMYK颜色是预料不到的”。我认为您可以有把握地打赌，目前的浏览器都不支持CMYK的屏幕，因此，您必须将颜色转换为RGB。