2012-01-15 21 views
10

मुझे अपने वेब पेज पर सीएमवाईके रंगों का उपयोग करने की आवश्यकता है। सीएसएस में सीएमवाईके का उपयोग करने का कोई तरीका है या जावास्क्रिप्ट का उपयोग कर सीएमवाईके को आरजीबी में परिवर्तित किया जा सकता है?वेब पेज पर सीएमवाईके का प्रयोग करें

संपादित करें:
मेरा मतलब है मैं सीएमवाईके अंकन में एल्गोरिथ्म बनाने रंग है और मैं वेब पेज पर इसका इस्तेमाल करने की जरूरत है।

+0

बस का उपयोग आप इसे परिवर्तित करने की मुसीबत में जाने के लिए जा रहे हैं ...क्या आपके पास रंगों पर नियंत्रण नहीं है? – Purag

उत्तर

11

सीएमवाईके को आरजीबी में परिवर्तित करने के लिए कोई सही एल्गोरिदमिक तरीका नहीं है। सीवाईएमके एक घटिया रंग प्रणाली है, आरजीबी एक योजक रंग प्रणाली है। प्रत्येक के पास अलग-अलग gamuts हैं, जिसका अर्थ है कि ऐसे रंग हैं जिन्हें अन्य रंग प्रणाली में और इसके विपरीत नहीं दिखाया जा सकता है। दोनों डिवाइस निर्भर रंग रिक्त स्थान हैं, जिसका वास्तव में मतलब है कि आप वास्तव में कौन सा रंग प्राप्त करते हैं, इस पर निर्भर करता है कि आप उस रंग को पुन: उत्पन्न करने के लिए किस डिवाइस का उपयोग करते हैं, यही कारण है कि आपके पास प्रत्येक डिवाइस के लिए रंग प्रोफाइल हैं जो समायोजित करता है कि यह रंग को और अधिक "पूर्ण" ।

सबसे अच्छा आप जो कर सकते हैं वह एक स्थान पर एक स्थान का सिमुलेशन अनुमानित है। कंप्यूटर विज्ञान का एक पूरा क्षेत्र है जो इस तरह के काम के लिए समर्पित है, और इसके गैर-तुच्छ।

यदि आप ऐसा करने के लिए एक ह्युरिस्टिक खोज रहे हैं, तो साइरिल प्रदान किया गया लिंक बहुत सरल गणित है, और सीवाईएमके रंग को स्वीकार करने और उचित आरजीबी फ़ैक्सिमाइल का उत्पादन करने में आसानी से उलटा है।

एक बहुत ही सरल अनुमानी 0xFFFF00 को 0x00FFFF, मैजेंटा को 0xFF00FF, और पीले करने के लिए सियान मैप करने के लिए, और काली (key) 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))); 


} 

0,0 से 1.0 सीएमवाईके सीमाओं के साथ cmykToRGB लागू: तो फिर कुछ इस तरह से करते हैं। इससे आपको एक आरजीबी रंग कोड वापस देना चाहिए। लेकिन फिर यह सिर्फ एक उदारवादी है, इन रंगों के रिक्त स्थानों के बीच एक वास्तविक बातचीत अधिक जटिल है और खाते में बहुत अधिक चर लेते हैं, फिर यहां दर्शाए जाते हैं। आप लाभ भिन्न हो सकते हैं, और रंग आप इस से बाहर निकलने के लिए पहली जगह में नहीं "देखो सही" हो सकता है हेक्स

jsFiddle here

1

सीएसएस में सीएमवाईके समर्थन वर्तमान में considered by W3 for CSS3 है। लेकिन यह मुख्य रूप से प्रिंटर के लिए है और "यह उम्मीद नहीं की जाती है कि स्क्रीन केंद्रित उपयोगकर्ता एजेंट सीएमवाईके रंगों का समर्थन करते हैं"। मुझे लगता है कि आप सुरक्षित रूप से शर्त लगा सकते हैं कि मौजूदा ब्राउज़र में से कोई भी स्क्रीन के लिए सीएमवायके का समर्थन नहीं करता है और इसलिए आपको किसी भी तरह से रंगों को आरजीबी में परिवर्तित करना होगा।

8

सीएसएस में सीएमवाईके का उपयोग करने का कोई तरीका नहीं है। आप या तो आरजीबी या एचएसएल (केवल CSS3) का उपयोग कर सकते हैं। सीएमवाईके को आरजीबी में परिवर्तित करने के लिए JavaScript algorithm है (और दूसरी तरफ)।

संपादित करें: लिंक अब मर चुका है, यहाँ संचित संस्करण से कोड है:

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

} 

उपयोग:

इस तरह आरजीबी उपयोग पुस्तकालय के लिए एचएसवी से बदलने के लिए:

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

आरजीबी से एचएसवी में कनवर्ट करने के लिए इस तरह लाइब्रेरी का उपयोग करें:

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

सीएमवाईके के लिए भी यही है।

+0

शीर्षक पढ़ें: "आरजीबी-टू-सीएमवाईके रंग रूपांतरण"। मुझे सीएमवाईके की आरजीबी –

+0

क्षमा करें। मेरी पोस्ट संपादित की। – Cyrille

+1

लिंक मर चुका है, यही कारण है कि आपको लिंक के साथ जवाब पोस्ट नहीं करना चाहिए और कोई वास्तविक कोड नहीं होना चाहिए। – Killah

संबंधित मुद्दे