Usar CMYK en la página web

Question

Necesito usar colores CMYK en mi página web. ¿Hay alguna forma de usar CMYK en CSS o se puede convertir CMYK a RGB usando JavaScript?

EDIT:
quiero decir que tienen colores que crean algoritmo en notación CMYK y tengo que usarlo en la página web.

Answer 1

No existe una forma algorítmica perfecta para convertir CMYK a RGB. CYMK es un sistema de color sustractivo, RGB es un sistema de color aditivo. Cada uno tiene gamuts diferente, lo que significa que hay colores que simplemente no se pueden representar en el otro sistema de color y viceversa. Ambos son espacios de color dependientes del dispositivo, lo que significa que el color que realmente se obtiene depende de qué dispositivo se use para reproducir ese color, por eso tiene perfiles de color para cada dispositivo que ajustan la forma en que produce color en algo más "absoluto" .

Lo mejor que puedes hacer es aproximar una simulación de un espacio al otro. Existe todo un campo de la informática dedicado a este tipo de trabajo, y no es trivial.

Si está buscando una heurística para hacer esto, entonces el enlace que proporcionó Cyrille es matemática bastante simple, y fácilmente invertible para aceptar un color CYMK y producir un facsímil RGB razonable.

Una heurística muy simple es mapear cian a 0x00FFFF, magenta a 0xFF00FF, y amarillo a 0xFFFF00 y negro (tecla) para 0x000000. A continuación, hacer algo como esto:

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))); 


} 

invocando cmykToRGB con rangos CMYK de 0,0 a 1,0. Eso debería devolverle un código de color RGB. Pero nuevamente esto es solo una heurística, una conversación real entre estos espacios de color es mucho más complicada y toma en cuenta muchas más variables que las que aquí se representan. Usted experiencia puede variar, y los colores a salir de esto podría no "ve bien"

jsFiddle here

Answer 2

El soporte CMYK en CSS es actualmente considered by W3 for CSS3. Pero está pensado principalmente para impresoras y "no se espera que los agentes de usuario centrados en pantalla admitan colores CMYK". Creo que puede apostar con seguridad que ninguno de los navegadores actuales admite CMYK para la pantalla y, por lo tanto, debe convertir los colores a RGB de alguna manera.

Answer 3

No hay forma de usar CMYK en CSS. Puede usar RGB o HSL (solo CSS3). Aquí hay un JavaScript algorithm para convertir CMYK a RGB (y viceversa).

Editar: el enlace parece muerto ahora, aquí está el código de una versión en caché:

/** 
* 
* 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)); } 
    } 

} 

Uso:

convertir de VHS a la biblioteca de uso RGB como esto:

var result = ColorConverter.toRGB(new HSV(10, 20, 30)); 
alert("RGB:" + result.r + ":" + result.g + ":" + result.b); 

Para convertir de RGB a HSV use una biblioteca como esta:

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

Lo mismo ocurre con CMYK.