在網頁上使用CMYK

Question

我需要在我的網頁上使用CMYK顏色。有什麼辦法可以在CSS中使用CMYK，或者可以使用JavaScript將CMYK轉換爲RGB？

編輯：
我的意思是我有顏色創造CMYK符號算法，我需要使用它的網頁上。

Answer 1

沒有完美的算法將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))); 


} 

調用cmykToRGB與cmyk範圍從0.0到1.0。這應該會讓你回到RGB顏色代碼。但是，這只是一種啓發式的方法，這些色彩空間之間的實際對話要複雜得多，並考慮了更多的變量，然後在這裏進行表示。你可能會有所不同，並且在首位你擺脫這種顏色可能不是「期待權」

jsFiddle here

Answer 2

CSS中的CMYK支持當前爲considered by W3 for CSS3。但它主要用於打印機，「不期望以屏幕爲中心的用戶代理支持CMYK顏色」。我認爲你可以放心地猜測，目前的瀏覽器都不支持CMYK，因此你必須以某種方式將顏色轉換爲RGB。

Answer 3

在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從RGB轉換爲HSV使用庫，請執行以下操作：

var result = ColorConverter.toHSV(new RGB(10, 20, 30)); 
alert("HSV:" + result.h + ":" + result.s + ":" + result.v); 

CMYK也是如此。