Blending Colors

Hey guys,
I'm experimenting with composites, trying to wrap my head around opacity, alpha values, and color blending. I'm trying to display several rectangles, each with a different color. Where the rectangles overlap, their colors should mix together (so if a red and a blue rectangle overlap, the overlap should be purple). I have something that almost does what I want, except that where the rectangles do not overlap, they appear too light (in other words, their alpha value is too low).
I understand why this is happening: since the rectangles all have an alpha level of 1/2, the white background is showing through where there is no overlap. Is there a way to blend the colors together in a way that the alpha level of any given pixel will be 100%, but still have color blending where there is any overlap of colors? In the SSCCE below, the goal would be to have a (fully opaque) red rectangle on top, a purple rectangle in the middle where the red and blue overlap, and the bottom of the screen should show a mixture of red, blue, and green.
The SSCCE:
import javax.swing.*;
import java.awt.*;
public class ColorBlendTest extends JPanel{
   Color[] colors = {Color.RED, Color.BLUE, Color.GREEN};
    public ColorBlendTest() {
         super();
         JFrame frame = new JFrame("Color Graph");
         frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
         frame.add(this);
         frame.setSize(500,500);
         frame.setVisible(true);
    public void paintComponent(Graphics g){
         super.paintComponent(g);
         Graphics2D g2d = (Graphics2D)g;
         g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, .5f));
         for(int i = 1; i <= colors.length; i ++){
              int x = 0;
              int y = getHeight() - getHeight()/i;
              int width = getWidth();
              int height = getHeight();
              g2d.setColor(colors[i-1]);
              g2d.fillRect(x, y, width, height);
    public static void main(String[] args) {
        new ColorBlendTest();
}I appreciate any help/suggestions/pointers you can offer.
Thanks,
Kevin

I finally figured something out, using an Image to act as a middle step between painting and adjusting the alpha value. It's probably a bit of a hack, and there are a ton of ways to optimize it, but here's what I came up with:
import javax.swing.*;
import java.awt.*;
import java.awt.image.*;
public class ColorBlendTest extends JPanel{
   Color[] colors = {Color.RED, Color.BLUE, Color.GREEN};
    public ColorBlendTest() {
         super();
         JFrame frame = new JFrame("Color Graph");
         frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
         frame.add(this);
         frame.setSize(500,500);
         frame.setVisible(true);
    public void paintComponent(Graphics g){
         super.paintComponent(g);
         BufferedImage image = getGraphicsConfiguration().createCompatibleImage(getWidth(), getHeight(), Transparency.TRANSLUCENT);
         Graphics2D imageGraphics = (Graphics2D) image.getGraphics();
         imageGraphics.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1f/colors.length));
         for(int i = 1; i <= colors.length; i ++){
              int x = 0;
              int y = getHeight() - getHeight()/i;
              int width = getWidth();
              int height = getHeight();
              imageGraphics.setColor(colors[i-1]);
              imageGraphics.fillRect(x, y, width, height);
       for(int w = 0; w < image.getWidth(); w++){
             for(int h = 0; h < image.getHeight(); h++){
                  int rgb = image.getRGB(w, h);
                  int a = (rgb >>> 24) & 0xFF;
               int r = (rgb >>> 16) & 0xFF;
               int gr = (rgb >>> 8) & 0xFF;
               int b = (rgb >>> 0) & 0xFF;
               a = 255;
               rgb = (a << 24) | (r << 16) | (gr << 8) | b;
               image.setRGB(w, h, rgb);
         g.drawImage(image, 0, 0, null);     
    public static void main(String[] args) {
        new ColorBlendTest();
}I'm still extremely open to suggestions though, so I'd definitely love some feedback, if you have any.

Similar Messages

  • Transparency blend color space in Illustrator

    In InDesign there is an option to specify the transarency blend color space. Is there something equivalent to this in Illustrator? If not, how does Illustrator set the colorspace (CMYK or RGB) for transparent elements? In printing we can get all kinds of problems with transparency problems such as boxes, if the transparency space differs from the image's working space. I want to find a way to sync this so the transparency blends all match the working space. Typically I work in CMYK.  Thanks.

    Ai offers you either RGB or CMYK; you decide which in the File > Document Color Mode ( circa v10 ). Transparency doesn't care which space you use in Ai.  If you work in CMYK, then just make sure your swatches and images are CMYK.  But, I think there are other reasons why you'd get boxes in transparent objects.  Take a look at Flattening.

  • Blending colors of multiple strokes

    Hello,
    I would like to know, whether is it possible to make soft blends between all objects of the person in the art I am creating. The problem is, that I want to make very smooth transition between all paths(brush strokes) in the file. I tried the blend tool, but it didn´t work good for this purose. Then I tried to blur or feather all objects, but the result wasn´t good as well. Opacity masks would be too complicated for all those strokes. Is it possible to make this work for all brush paths in the file?
    Thank You, Peter

    Use your existing art as a template. Draw the face shape, and set & color points with the mesh tool.

  • Problem with possible conflicting color spaces between BG image and blend color

    Hello,
    Occasionally I will get a PDF file from an outside source. The usual routine is to run it thru Preflight using Acrobat 8 Professional.
    I run it thru "digital printing black and white" and "compatibility with Acrobat 5" because I use Quart 6.5 as a layout program and cannot go any higher with compatibility.
    I have a grayscale image on the PDF that gets a lighter box area on the file where the image touches another element. I think it may have something to do with transparency, but not really sure. It seems the element touching it may be in front of the problem photo, and if the element is not a straight line, that is when the light spot on the image below obviously shows.
    Anyone know how to deal with this issue?
    Thank you,
    Nancy

    Steve -
    Yup, same problem, thanx for the link. ++
    Yes, it's off between 5 and 10. I have been adjusting by trial and error as I didn't think about the DigitalColor Meter. Used to use some hack like that back in Mac OS 8 or so, don't think I've ever used it in OS X. Lurn something new every day or two.
    Still got some fringes on the overlay edges and in general it's not acceptable. If it didn't happen in DVDSP 2 then it's definitely a bug. Oh, well, I'll dazzle 'em with my footwork.
    Thanx to all for the tips,
    Russ

  • Luminosity/Color blend modes - what do they really do?

    I know what the documentation says that they do, but it doesn't appear to be the truth. For example, if I take my image and overlay it with a 50% gray layer set to Luminosity mode, I would expect to see the hue and saturation of my image, with the luminosity of every pixel set to 50%, but that isn't what actually happens.
    Have I misunderstood what these modes are supposed to do? Can anyone enlighten me?
    Thanks in advance,
    Aaron

    Aaron,
    The weighting factors for R G and B were determined long ago via subjective responses in tests on thousands of people. there have since been other recommended weights. No set of weights is valid over the whole range of color values. In an imperfect world you compromise. Nowhere is it explicitly stated, but Photoshop has stuck with the older weights. You can verify that for yourself using the Info palette. Other applications may use other luminosity definitions. Also in Photoshop, Brightness is taken to be the highest of the R G and B color values. I think you were equating brightness and luminosity. They are decidedly different parameters. Nor is Luminosity the same as the L parameter in LAB (most often called "Lightness" but often "Luminance"). You won't find that LAB Lightness is preserved by the Luminosity blend and certainly not Brightness. Using the Info palette, you can also see that the Luminosity blend mode retains the hue and saturation of the base while adopting the luminosity of the blend color.

  • Color blending

    Hello, i have a problem.
    I need to blend colors. And it should be not just addictive blending. This should be emulation of blending real paints.
    For example if we blend yellow and blue - should get the green color.
    I tryed find it out in the Internet. But there is no any algorithm or formula about this.
    Thanks in advance.

    I thought it did, but you're right, there is no direct CYMK support. There is a Color.HSBtoRGB method for using HSB, but I can't find anything to actually use CYMK. However, a Google search found a couple simple CYMK->RGB conversions:
    /** CMYK to RGB conversion */
    /* Adobe PhotoShop algorithm
    cyan = Math.min(255, cyan + black); //black is from K
    magenta = Math.min(255, magenta + black);
    yellow = Math.min(255, yellow + black);
    rgb[0] = 255 - cyan;
    rgb[1] = 255 - magenta;
    rgb[2] = 255 - yellow;
    /* GNU Ghostscript algorithm */
    int colors = 255 - black;
    rgb[0] = colors * (255 - cyan)/255;
    rgb[1] = colors * (255 - magenta)/255;
    rgb[2] = colors * (255 - yellow)/255;Since ultimately, all rendered images must be in RGB, you could color in CYMK colors then use one of these algorithms to convert the colors into usable values.

  • Blending mode : color . How it works?

    Is there one simple exercise for to know  how it works blending mode : color?
    Please.
    Thanks

    Quote from the Help:
    Color
    Creates a result color with the luminance of the base color and the hue and saturation of the blend color. This preserves the gray levels in the image and is useful for coloring monochrome images and for tinting color images.
    http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-77eba.h tml

  • Animated gif and gradient color problem

    Hi there,
    I have been trying to create animated gif with gradient background. My animation works alright but the problem is that when I preview either in browser or in the preview mode, the gradient doesnt look smooth. I want to know if there is a way to work around this? I have seen some on other websites and it looks perfect. I'm wondering how they do it.
    I'll appreciate anybody's help.

    Cobby Fred wrote:
    I have to thank you all for your assistance so far. I must say I only know how to put some few things together and I do not understand some of the technical words you used such as dither, geometric dithering, blending mode... But in all I understand that if I blend colors that are close I'll get something close to smooth.
    Here's Wikipedia's page on dither: http://en.wikipedia.org/wiki/Dither Scroll down till you see the images of the cats on the right-hand side. It's a little over half-way. In the original, the cat's pretty much a gradient. If that image is saved as a .gif, see how you get wide areas of color? It almost looks like a paint-by-number picture. This similar to what happens to your radial gradient when you save as .gif. I used the word "geometric," because the radial gradient will produce arcs of grey colors. The third image of the cat has dithering. This means that, instead of setting the colors in the original image to the closest one in the restricted palette, the software tries to figure out how to speckle the image to produce an average that would look better at a distance. Turning on dithering when you go to output your gradient will help make your image smoother, just as the third cat image is smoother than the second. Here's where you turn on dithering if you go through File > Image Preview:
    Here I have my unflattened .png file
    No, it's flattened. It's a single bitmap.
    Here's a noisy image I created. It has a radial gradient at the bottom then a texture layer that has it's visibility off, because I copied it to make a greyscale version to use. I've set that to have 25% opacity and a blending mode of Multiply. Both the opacity and blending mode controls are at the top of the layers panel. This is a FW .png (Edit, no, it isn't! The forum  has stopped supporting that! ):
    If I export the gradient alone, without the texture layer, I can get this (settings are "64-color" greyscale palette and no dithering):
    or this (turning on dithering):
    While the dithered image is better, it still shows the arcs. If I set the texture layer back visible, and export with dithering on, I get this:
    The noise in the texture breaks up the geometric arcs, which makes the image look smoother. Any small texture will do that. Choosing the 64-color greyscale palette gives me either 22 or 26 colors.The 32-color palette gave me 12. You should experiment with the .gif palette settings to see what you like best. Remember that the more colors you assign to your background the fewer colors you have available for your foreground objects.
    As a final point, the red text looks blurry. When I zoom in on it (400%), some of the lines are partially "broken," specifically the verticals on the L, T, and N. You might want to try a different font or adjusting the size so that the aliasing (mapping) to the pixels is cleaner. Italic text in small sizes is difficult to use.

  • When painting a light over a dark, at low opacity, i am getting an even darker color. How to fix?

    I'm using version 1.4, running on a Samsung Galaxy Note 10.1. Both when I set the pen pressure to opacity control, and when setting the brush to an overall lower opacity, my light color turns a reddish dark where it overlaps my dark color, almost as though i'm using the burn tool. i havent noticed this problem before, and i've been constistenly using pstouch to paint, since i bought this tablet nearly 3 weeks ago. I'm painting a dark muted orange over a slightly darker, slightly more intense (but still mainly muted) red. It looks almost like a watermark effect. each transparent brushstroke has sort of a fringe around it where it looks as though simulated pigments collect in a concentrated way, creating a dark ring around my slightly less dark  brush mark.
    This might be related to a color picker problem i have consistently noticed. it seems that the color picker tends to pick darker versions of the colors i sample. this might have something to do with the fact that my brush is usually set up with less than 100% opacity, and maybe, for some reason, the color picker is programmed to compensate for that. In any case, the color sampler doesnt work fully as it should, and this obviously affects my ability to use lowered opacity to blend colors together.
    That said, even when i sample a color, then manually lighten it to match the lightness of the sampled color, i still get a burn tool effect when making transitions between my slightly darker and slightly lighter warm mute dark colors, using a color with lowered opacity. the only way to make the lighter color lighter than the darker color, is to simply bring it to full opacity, but then i get no transition between the the colors.
    I assume this is a bug that needs to be fixed, but if anyone knows of anything i might be able to do in order to solve this problem, I'd really appreciate it.

    Actually, here's a clearer image. The middle stroke is with 20% drawing smoothness, and 100% pressure strength.
    The top stroke is 100% both, and the bottom is 100% drawing smoothness with 20% pressure strength.
    In all three instances, the dark watercolorish ring persists.

  • Forms6i on MS Term Svr ... works fine odd color at times, trying to fathom

    Yes, I know, don't tell me, it's not a supported combination. But, hey, it works. 200 users on a whiz-bang server with loads of mem / disk space, DB on another box, all reasonably well tuned, no performance issues -- and I'm not dealing with users' desktop issues anymore!!!! Yippee!!!! Used Forms5 against 9i for about 5 yrs with no problems also.
    But here's the odd thing (and it occurred on the old F5/9i on WinNT Term Svr and on the new, current F6/10g Win2k TS) ...
    On our "normal" local client developer boxes ... with the Developer Suite ... we've got teal-colored forms for accepting report request parameters (normal data-entry forms are dull grey), all via templates, all used for years, not a coding problem ... and these forms look fine, run fine. We put these forms on the terminal server ... and blocks on the form are suddenly this lighter teal color ... and, while they're nice even blocks, they just look ... weird.
    So ... in normal local client-server mode (F6i against 10g on WinXP), no issue (and thus is not "strictly speaking" and Oracle support issue), but in F6i / 10g via Win2k3 App server, in Terminal Services mode, odd color blocks. Not a rights issue or a domain issue. If I go physically to server and run app from there directly, no issue. So the form per se isn't wrong. Different users use different resolutions for stuff, depending on their physical screen size and wish to use eyeglasses.
    So ... anyone else out there in the Terminal Server user world, who has ALSO seen this odd coloration and found a way to resolve it?
    I don't know that it's strictly an Oracle Forms thing ... our reports mostly convert to PDF format, and when the server serves up the Acrobat Reader output ... the navigation arrows have this weird green highlight that goes away once your mouse is held over it.
    We know how to program lots of things, but not these particular ones, so "we didn't do it, honest". All clues / insights welcome, and TIA for your time. Am going to look on MS forums also.
    Suzanne Michelle, NYC Transit

    I'm afraid I haven't all the details, but as I understand it, higher color depths actually blend colors proportionally, whereas Windows' 256-color VGA mode uses an indexed color palette.
    I can only recommend that you try Googling this topic on Google Groups (http://groups.google.com), using keywords like Terminal Server and 256-color. This should point you to discussions that give a better idea of your problem, and might explain broad solutions to it, allowing you to "fix" Oracle and Acrobat with a single remedy.
    As far as tweaking Oracle goes, search (again) Google on the topic of creating custom color schemes for 10g. I'll take a look myself, time permitting, and post whatever information I can find to the forum.
    Hope this helps,
    Eric Adamson
    Lansing, Michigan

  • Trace background image color

    i am working on project for avatar design and would allow
    user to upload his pic on avatar face. i did this part. Now next
    thing is user can select 2d design 0f lips to place on face? Here
    comes the problem. i need to auto blend color of flash lips to
    background pic of user face. This can be done if i can grab color
    value of background on runtime and then i can apply that color to
    2d lips to blend with original. Can some one suggest any idea or
    alternate

    Yes. When you style ul.MenuBarHorizontal a, as you have discovered, you are styling ALL a in the MenuBarHorizontal.
    Immediately after the style you have shown, put this style:
    ul.MenuBarHorizontal ul a {background-image: none;}
    That should stop the image from appearing on submenus, counteracting the earlier rule, but only for the submenus.
    You could add a color to that style rule, if you wanted to. Whenever you indicate both a background-image and a background-color, the background-image will take over, if it's able. The background-color is typically there as insurance, in case the background-image does not render or images are turned off. It's a "belt AND suspenders" kind of thing.
    Beth

  • Luminosity and saturation blending modes in FW CS4 differ from their equivalents in PSE 7

    Example:
    Upper bitmap is filled with RGB(232,168,89) color and the lower with RGB(61,114,158) .
    Blending results are as follow:
    Luminosity in FW CS4: RGB(67,121,175)
    Luminosity in PSE 7: RGB(137,190,234)
    Saturation in FW CS4: RGB(60,109,158)
    Saturation in PSE 7: RGB(41,119,184)
    I think PSE uses chroma as saturation and luma Y' 601 with gamma compression (2.2 or 1.8) as luminosity.
    So it's compatible with PS. And what about FW. Does somebody know how FW works. I was experimenting with
    HLS and HSV and wasn't able to find it out. Maybe FW's modes are better in some web cases, I don't know.

    What happens to your blended colors in PSE if you turn off the color profiles?
    Fireworks is intended to produce graphics for display in Web applications, which have only recently begun to support color profiles. Even then, you don't want to use them on your page graphics (like nav buttons), because the profiles won't apply to HTML/CSS colors and you'll get mismatches.
    PS is primarily intended for photographs and for printing, and so the standard workflow in PS (and I suspect also PSE) is to apply at least a default color profile. One use of color profiles is to correct the colors for printers, but profiles will also change the colors in images.
    Have a read:
    http://www.viget.com/inspire/save-for-web-simply
    http://www.rumblingskies.com/blog/?p=46

  • Use of "Lighten" blend mode

    In Scott Kelby's Photoshop Elements 4 book, there is a technique described under the heading "Lessening Freckles or Facial Acne". (page 210 in first edition, November 2005)
    Briefly, it involves the following steps:
    (1) Duplicate the image
    (2) Apply blur to the top image
    (3) Create a blank (transparent) layer in between
    (4) Group the top (blurry) layer with the blank layer below
    (5) Select the blank layer and set brush to Black
    (6) Set brush opacity to 50% and brush mode to "Lighten"
    (7) Paint over freckles.
    I do not dispute that the technique works, but would be grateful if someone can explain to me the logic behind setting a black brush to "Lighten" mode. From the definition of "Lighten" mode, the result should be the lighter of the base and blend (brush) colour.
    Specifically, with a perfectly black brush, will not the result ALWAYS be the base colour, regardless of whether you are painting over a freckle or not?
    In any case, when a blank layer is grouped with the layer above, is it not the opacity that is applied to the the blank layer the thing that matters, not the lightness?
    While I hesitate to appear critical of a well known expert, I find it difficult to escape the conclusion that the technique described is based on flawed logic and that better solutions are available for dealing with unwanted freckles.

    Thanks Mark. I tried the exercise you suggest and I am pretty sure I understand what is going on with the layer grouping.
    At the risk of making a fool of myself, I must query Butch's assertion about the lightening and darkening issue.
    When a brush is used in "Lighten" mode, the result is based on two inputs... the color being applied (referred to in the help as the "blend color") and the original (referred to as the "base color"). The "result color" is the lighter of these two.
    In the situation described the blend color is the brush, specified by Mr Kelby as black.
    From my experiments, it appears that the base color is taken from the (initially transparent) central layer so that the visible freckles on the background layer do not even enter into the comparison.
    I have verified this by temporarily deleting the background layer and the process works exactly the same, except that because the background is not visible you have to guess where the freckles are.
    Another strange discovery is that when using lighten mode, the color "transparent" behaves as if it is darker than anything (even black) while when using a brush in darken mode, the color "transparent" is treated as being lighter than anything (even absolute white).
    No doubt there is a logical reason for this but it is starting to make my head spin so I think I will take the dog for a walk.
    Perhaps I should also mention that I have no objection to freckles and cannot imagine why anybody would want to remove them :-)

  • Does Grayscale printing in Canon MP 287 uses color ink also???

    Hi,
    I want to know that using the printer in grayscale mode uses color ink or not for printing????

    So I wonder if my B&W docs have been printing from the color carts and not the pigment black cart. Might this be what's happening? Is there any way to get PSE to use the pigment black cart? Or is something else happening?
    Yes, this is very common with most printers now. They blend colors to get a good black. Does your printer have a grayscale mode option?

  • Problems with blending modes

    Hi,
    I have a layer with a solid color (212º,93,78) on top of which I have another layer with a solid color (205º,100,74).  Call this second layer the blend layer. I then choose for it a blending mode of Color, and the resulting color in the top layer is (205º,100, 74). If instead I choose the luminosity blending mode, the resulting color in the top layer is (212º,93,78).
    ---all these are HSB coordinates.
    According to the documentation. color and luminosity blending modes should behave differently:
    Color
    Creates a result color with the luminance of the base color and the hue and saturation of the blend color. This preserves the gray levels in the image and is useful for coloring monochrome images and for tinting color images.
                              ------ the luminance of the base color is 78 (at least the brightness anyway - I know of no method to get the luminance)
    Luminosity
    Creates a result color with the hue and saturation of the base color and the luminance of the blend color. This mode creates the inverse effect of Color mode.
                   -------  in this case everything is equal, which seems to me is not right.
    Some light?
    Juan Dent

    Generally speaking, Photoshop works fine with Windows 8 but the display drivers aren't all up to the task yet, and Photoshop uses the GPU for a lot of stuff.
    What video card do you have?
    You might find you can go into Edit - Preferences - Performance in Photoshop and disable the usage of GPU (the setting is called [  ] Use Graphics Processor in Photoshop CS6, and [  ] Enable OpenGL Drawing in earlier versions).  It's also possible that you might find things to work better if you leve the GPU enabled but change the advanced mode for it to a lower setting, such as Basic.
    In a general answer to your question, yes, I imagine there will be updates through Windows Update and from Adobe that will correct the problems.  You may be able to accelerate the fix by visiting the web site of the maker of your video card and downloading their recent driver release (though I caution against this with ATI drivers right now - their latest aren't really too good).
    -Noel

Maybe you are looking for