Creating colors after applying opacity in black and white

Question

I don’t even know how to describe what I want, but here. Suppose I have 3 text fields, and I enter the first hex color code, I want to apply a black layer to it and set the opacity to 50% and get the resulting color in the second text field. The same, but with white on the third.

Let me explain: consider this image below:

In Photoshop, I have a base layer, which is a kind of blue sky. I create two layers on top, one with black, one with white, but both have an opacity of 50%. Now I can use the color picker (I) to just select the two required colors.

I need to do this an insane amount of times, so I was wondering if I could produce it programmatically.

I know, ideally, I had to try something and then give out a code that doesn’t work .. but it greatly alarmed me that I don’t even know where to start. The closest I've seen is Kuler , so I think it's possible in Flash, at least, but again, I don't know where to start.

Can you guys point me in the right direction? Ideally, it would be much better if it were possible in jQuery, but I looked around and could not find anything like it. I am not asking for a working solution , just pushing in the right direction.

If you have any questions, please ask.

The technology is not important to me, the solution is that I like C # the most (at least I like to think that I am), but I'm a beginner in php, flash. Jquery, I am good at this with most things (well, who isn’t?) - Everything that works is good for me. _{Php and Flash, I learned this as a hobby, just to get to know each other.}

Thank you very much.

Answer 1

So, I can get close, but not quite your results, which, in my opinion, are a side effect of .NET, using a number in the range of 1..255 for alpha when creating the 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); } } } 

using:

  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 the desired results, but not accurate.

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

Black: # 9acfff
White: # 1a4f7f

It may be closer to what you want, but its still not accurate.

Answer 2

I know I'm late to the party, I just wanted to show another way to do it.

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

I just tried the sample on jsfiddle , but the results are consistent with Jamie amazing answer . this gives the same result colors as Jamie's code. so you can use either i think.

Answer 3

So ... What is the problem of simply writing what you said using the technology that you know best? 3 boxes of flowers, an input for a percentage of opacity and an output in the form of mixed colors. (I can write it to flash memory, but I'm not sure if the whole program would be 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