Sử dụng CMYK trên trang web

Question

Tôi cần sử dụng màu CMYK trên trang web của mình. Có cách nào để sử dụng CMYK trong CSS hoặc có thể chuyển đổi CMYK sang RGB bằng JavaScript không?

EDIT:
tôi có nghĩa là tôi có màu sắc tạo ra thuật toán trong ký hiệu CMYK và tôi cần phải sử dụng nó trên trang web.

Answer 1

Không có cách giải thuật hoàn hảo nào để chuyển đổi CMYK thành RGB. CYMK là một hệ thống màu trừ, RGB là một hệ thống màu phụ gia. Mỗi cái có khác nhau gamuts, có nghĩa là có những màu không thể được biểu diễn trong hệ màu khác và ngược lại. Cả hai đều là không gian màu phụ thuộc thiết bị, điều thực sự có nghĩa là màu bạn thực sự nhận được phụ thuộc vào thiết bị bạn sử dụng để tái tạo màu đó, đó là lý do tại sao bạn có cấu hình màu cho mỗi thiết bị điều chỉnh cách nó tạo màu thành thứ gì đó "tuyệt đối" .

Điều tốt nhất bạn có thể làm là mô phỏng gần đúng một không gian trên một không gian khác. Có một lĩnh vực khoa học máy tính dành riêng cho loại công việc này, và nó không tầm thường.

Nếu bạn đang tìm kiếm một heuristic để làm điều này, sau đó liên kết mà Cyrille cung cấp là toán học khá đơn giản, và dễ dàng đảo ngược để chấp nhận màu CYMK và tạo ra một bản fax RGB hợp lý.

Một phương pháp phỏng đoán rất đơn giản là ánh xạ lục lam đến 0x00FFFF, đỏ tươi đến 0xFF00FF và chuyển thành màu vàng thành 0xFFFF00 và đen (khóa) thành 0x000000. Sau đó, làm điều gì đó như sau:

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


} 

gọi cmykToRGB với cmyk nằm trong khoảng từ 0,0 đến 1,0. Điều đó sẽ cho bạn trở lại một mã màu RGB. Nhưng một lần nữa đây chỉ là một phỏng đoán, một cuộc trò chuyện thực sự giữa các không gian màu này phức tạp hơn nhiều và tính đến nhiều biến hơn sau đó được trình bày ở đây. Bạn có thể thay đổi số dặm, và màu sắc bạn thoát khỏi điều này có thể không phải là "nhìn bên phải"

jsFiddle here

Answer 2

Hỗ trợ CMYK trong CSS hiện tại là considered by W3 for CSS3. Nhưng nó chủ yếu có nghĩa là cho máy in và "nó không phải là dự kiến ​​rằng các tác nhân người dùng trung tâm màn hình hỗ trợ các màu CMYK". Tôi nghĩ rằng bạn có thể an toàn đặt cược rằng không ai trong số các trình duyệt hiện tại hỗ trợ CMYK cho màn hình và do đó bạn phải chuyển đổi màu sắc sang RGB bằng cách nào đó.

Answer 3

Không có cách nào để sử dụng CMYK trong CSS. Bạn có thể sử dụng RGB hoặc HSL (chỉ CSS3). Đây là một JavaScript algorithm để chuyển đổi CMYK sang RGB (và ngược lại).

Chỉnh sửa: liên kết dường như chết bây giờ, đây là mã từ một phiên bản cache:

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

} 

Cách sử dụng:

Để chuyển đổi từ HSV vào thư viện sử dụng RGB như thế này:

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

Để chuyển đổi từ thư viện RGB sang HSV như sau:

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

Tương tự với CMYK.