Generating colours after applying opacity of black and white

Question

I don't even know how to describe what I want, but here goes. Assume I have 3 textboxes, and I enter some colour hex code in the first one, I want to apply a black layer on top of it, and have the opacity set to 50% and get the resulting colour in the second text box. Same thing, but with white on the third one.

Let me explain: consider this image below:

In Photoshop, I have the base layer which is sort of sky blue in colour. I create two layers on top of it, one with black, one with white but both have an opacity of 50%. Now, I can use the colour picker (I) to simply select the two wanted colours.

I am having to do this an insane amount of times so I was wondering if I could produce it programatically.

I know, Ideally I should have tried out something, then give out the code which isn't working.. but this has stumped me enough that I don't even know where to start. The closest thing I've seen is Kuler so I think it is possible in flash at least, but then again, I don't know where to start.

Can you guys please point me in the right direction? Ideally, this would be so much better if it's doable in jQuery, but I have looked around and couldn't find anything quite like it. I am not asking for a working solution, just a nudge in the right direction.

If you have any questions, please ask.

Technology is not important to me, solution is - I am most comfortable with c# (at least I like to think I am) but I am a beginner in php, flash. Jquery, I am good at it with most stuff (well, who isn't?) - Whatever works is good to me. _{Php and Flash, I learnt it as a hobby just to familiarize myself.}

Many thanks.

Answer 1

So I can get close, but not exactly your results, which I think is a side effect of .NET using a number in the range 1..255 for alpha when creating a color.

But nonetheless, I think this pretty much does what you want:

public class ColorUtility
{
    private Color color;

    public ColorUtility(Color original)
    {
        this.color = original;
    }

    public Color GetTransformedColor(Color overlay)
    {
        using(var bitmap = new Bitmap(1,1))
        {
            var g = Graphics.FromImage(bitmap);
            using(Brush baseBrush = new SolidBrush(this.color))
            {
                g.FillRectangle(baseBrush,0,0,1,1);
            }

            using(Brush overlayBrush = new SolidBrush(Color.FromArgb(127,overlay)))
            {
                g.FillRectangle(overlayBrush,0,0,1,1);
            }
            return bitmap.GetPixel(0, 0);
        }
    }
}

usage:

 var startColor = ColorTranslator.FromHtml("#359eff");
 var util = new ColorUtility(startColor);
 var blackOverlay = util.GetTransformedColor(Color.Black); // yields #9aceff
 var whiteOverlay = util.GetTransformedColor(Color.White); // yields #1b4f80

Close to your desired results, but not exactly.

EDIT: If you change the alpha value to 128 in the utility you get

Black: #9acfff
White: #1a4f7f

This might be closer to what you want, but its still not exact.

Answer 2

I know I am late for the party, just wanted to show another way of doing it.

There is a jquery color plugin for this, I have never really used this, but there is a function that looks like it does what you want.. xColor is the plugin you are looking for.. if you go the combination section you will see that it says that it does what you want.

I just tried a sample on jsfiddle but the results are in line with Jamie's amazing answer. this gives out the same result colors as that of Jamie's code. so you can use either I guess.

Answer 3

So... What's the problem to just write what you exactly said using technology you know best? 3 boxes with colors, input for opacity percentage and output as resulting mixed colors. (I can write it on flash, but I'm not sure if prividing the whole program is appropriate on this site.)

If you don't know how to mix colors with opacity, this link should help:

http://www.pegtop.net/delphi/articles/blendmodes/opacity.htm