10 Replies Latest reply on Jun 13, 2013 5:13 PM by kglad

    Problem with "color shifting" ...

    01GiveX Level 1

      Good morning everybody,

      I have a quick question(s) ...

       

      I've inherited a Flash custom card builder. Basically what it does is the end user can submit their own artwork to create their own unique gift/loyalty cards for the specific brand.

       

      My questions is, one of our clients's client has complained that their images' colors are not being printed as the original artwork. They are submitting CMYK images and the Flash Card Builder spits out the finished card in RGB.

       

      I realize that is how Flash handles colors. but I'm wondering if there anything I can do to have the Flash Card Builder render the color output as close to the original CMYK image colors as possible? Photoshop color correcting is not an option.

       

      Thanks in advance for any of your answers/suggestions. Thanks!!!

        • 1. Re: Problem with "color shifting" ...
          sinious Most Valuable Participant

          Are these original artworks imported into a SWF or are they loading dynamically? Obviously most dynamically loadable formats don't even support the CMYK (desaturated) color space so I'm assuming you're loading vendor artwork yourself. If that's the case, why isn't the artwork converted in Photoshop (bitmap) or Illustrator (AI) before being imported? Flash's AI import should be good enough to convert and keep fairly close color. In most cases outside extreme professional tradeshow booth quality printing it's desirable to print in RGB rather than CMYK anyhow so why are you trying to print CMYK?

           

          Just trying to get a bearing on where this CMYK artwork is coming from, what format, is it dynamically loaded, if not why it's not being converted to RGB before imported and lastly why you'd want CMYK at the end.

           

          The bottom line is there is a huge color shift difference (as you know) between RGB and CMYK. There's books and blogs and tutorials galore in accurately converting it in Photoshop. Doing it in Flash will probably just end up being a headache because the colorspaces don't overlap to such a great extent.

          • 2. Re: Problem with "color shifting" ...
            01GiveX Level 1

            Hi sinious,

            Were it that simple!!! No we don't even see the image until they complain about it!!!

             

            The card builder is online avaliable to the public, and they upload their photos into the card builder. Then they get to edit it (very slightly, rotation, position, basics like that). When they're satisfied and hit submit, the card and their image are sent off to a printer.

             

            So there's really nothing that can be done from my end, unless I can code the builder to convert and correct the CMYK to RGB image on its own.

             

            I know right.

             

            I'm pretty sure I know the answer, I was just wondering if anybody has ever been able to figure out this situation/issue.

            • 3. Re: Problem with "color shifting" ...
              sinious Most Valuable Participant

              In general, because the two colorspaces don't overlap, you're guaranteed not to convert all colors from one to the other accurately. At best you might want to find a library that has a lot of logic in guessing the correct color for the conversion of CMYK to RGB. You would then need to take the bitmap you have loaded and use something like a BitmapData to read the color value of every pixel, translating it from CMYK to RGB pixel by pixel.

               

              I really super basic example of a function in AS3 converting basic CMYK to RGB would be:

               

              function CMYKtoRGB(c:Number, m:Number, y:Number, k:Number):Object

              {

                        var r:Number;

                        var g:Number;

                        var b:Number;

               

                        r = 255 - (Math.round (2.55 * (c + k)));

                        g = 255 - (Math.round (2.55 * (m + k)));

                        b = 255 - (Math.round (2.55 * (y + k)));

               

                        if (r < 0) r = 0;

                        if (g < 0) g = 0;

                        if (b < 0) b = 0;

               

                        return { R:r, G:g, B:b };

              }

               

              You'd end up with something eh, close, to RGB. To convert the RGB to a number (Flash converts hex to numbers anyhow) is as simple as:

               

              function RGBtoHEX(r:Number, g:Number, b:Number):uint

              {

                        return r << 16 | g << 8 | b;

              }

               

              It just returns a number but again Flash just converts hex to a number anyhow. If I used this on the original CMYK color (C:0 M:38 Y:100 K:0) it would return RGB (R:255 G:158 B:0) or hex (16752128). However inputting that same CMYK color in a quality app like Photoshop yeilds the RGB (R:255 G:174 B:0).

               

              The difference? Here's a box drawn in Photoshop in CMYK color mode with that CMYK color next to Flash drawing 2 boxes, first one with the Photoshop converted color, second with the above codes color conversion. Photoshop and Flash using Photoshop's color conversion is obviously much better than the result on the right. You just need to find yourself a really solid library for the missing colorspace conversion. And even as good as Photoshop is, you can still see a difference between Photoshop and Flash side by side. 

               

              colorex.png

              • 4. Re: Problem with "color shifting" ...
                01GiveX Level 1

                Hmm ... thank you sinious!!! This gives me plenty to think about. I'll have to try and find a solid library, as suggested.

                 

                Thanks again!!!

                • 5. Re: Problem with "color shifting" ...
                  sinious Most Valuable Participant

                  You're welcome and if you find one post it back here, others might be interested. Good luck!

                  • 6. Re: Problem with "color shifting" ...
                    kglad Adobe Community Professional & MVP

                    what about clients that submit hsv color space images?  they're being short-changed.

                     

                    jk.

                     

                    i have rgb to hsv and hsv to rgb converter classes i created for a project.

                    • 7. Re: Problem with "color shifting" ...
                      sinious Most Valuable Participant

                      Always a ribber .

                       

                      But you're more than free to post the code for the conversion all the same, can't hurt

                      • 8. Re: Problem with "color shifting" ...
                        kglad Adobe Community Professional & MVP

                        i just checked the game i used this for and i spent 15minutes admiring my work. 

                         

                        i needed for a game in which i wanted to allow users to customize colors but i always wanted to end up with a soothing color scheme.  in the end i allowed users to pick a main color.  everything else is color-coordinated for a soothing effect and i couldn't figure out how to pick complementary colors etc using rgb.

                         

                        here's the game:  http://www.kglad.com/Files/forums/rummoli.swf - just play with those colors.

                         

                        and here's the color conversion code:

                         

                        package com.kglad {

                         

                            public class ColorConvert {

                         

                                public function ColorConvert() {

                                    // http://www.easyrgb.com/index.php?X=MATH&H=19#text19

                                }

                         

                                public function rgb_to_hsl(n:uint):Array{

                                    var varR:Number = n>>16 & 0xff;

                                    var varG:Number = n>>8 & 0xff;

                                    var varB:Number = n>>0 & 0xff;

                         

                                    varR /= 255;

                                    varG /= 255;

                                    varB /= 255;

                         

                                    var min:Number = Math.min(varR,varG);

                                    min = Math.min(min,varB);

                                    var max:Number = Math.max(varR,varG);

                                    max = Math.max(max,varB);

                         

                                    var deltaRGB:Number = max-min;

                         

                                    var L:Number = (max+min)/2;

                         

                                    if(deltaRGB==0){

                                        var H:Number = 0;

                                        var S:Number = 0;

                                    } else {

                                        if(L<.5){

                                            S = deltaRGB/(max+min);

                                        } else {

                                            S = deltaRGB/(2-max-min);

                                        }

                                        var deltaR:Number = ( ( ( max - varR ) / 6 ) + ( deltaRGB / 2 ) ) / deltaRGB;

                                           var deltaG:Number = ( ( ( max - varG ) / 6 ) + ( deltaRGB / 2 ) ) / deltaRGB;

                                           var deltaB:Number = ( ( ( max - varB ) / 6 ) + ( deltaRGB / 2 ) ) / deltaRGB;

                         

                                           if(varR == max ){

                                            H = deltaB - deltaG;

                                        } else if(varG == max ){

                                            H = ( 1 / 3 ) + deltaR - deltaB;

                                        } else if(varB == max ){

                                            H = ( 2 / 3 ) + deltaG - deltaR;

                                        }

                                           if ( H < 0 ) H += 1;

                                           if ( H > 1 ) H -= 1;

                                    }

                                    // HSL each in [0,1].  standard HSL colorSpace: H*360, S*100, L*100

                                    return [H,S,L];

                                }

                                public function hsl_to_rgb(hslA:Array):uint{

                                    var H:Number = hslA[0];

                                    var S:Number = hslA[1];

                                    var L:Number = hslA[2];

                                    if ( S == 0 ){                      

                                        //HSL from 0 to 1

                                           var R:Number = L * 255;

                                           var G:Number = L * 255;

                                           var B:Number = L * 255;

                                    } else {

                                           if(L < 0.5 ){

                                            var var_2:Number = L * ( 1 + S )

                                        } else {

                                            var_2 = ( L + S ) - ( S * L )

                                        }

                                           var var_1:Number = 2 * L - var_2

                         

                                          R = 255 * h_to_rgb( var_1, var_2, H + ( 1 / 3 ) )

                                           G = 255 * h_to_rgb( var_1, var_2, H )

                                           B = 255 * h_to_rgb( var_1, var_2, H - ( 1 / 3 ) )

                                    }

                                    return uint(R)<<16|uint(G)<<8|uint(B);

                                }

                                private function h_to_rgb(v1:Number,v2:Number,vH:Number):Number{

                                       if(vH<0){

                                        vH += 1;

                                    }

                                       if(vH>1){

                                        vH -= 1;

                                    }

                                       if(6*vH<1){

                                        return v1+(v2-v1)*6*vH;

                                    }

                                       if(2*vH<1){

                                        return v2;

                                    }

                                       if(3*vH<2){

                                        return v1+(v2-v1)*(2/3-vH)*6;

                                    }

                                       return v1;

                                }

                         

                            }

                        }

                        1 person found this helpful
                        • 9. Re: Problem with "color shifting" ...
                          01GiveX Level 1

                          Guys, thanks a metric tonne!!! Your speedy replies have proved very helpful, very helpful indeed!!! Thank you!!!

                          • 10. Re: Problem with "color shifting" ...
                            kglad Adobe Community Professional & MVP

                            you're welcome.