8

I have found that reducing the opacity against a white background is a good way to find usable lighter and less saturated tints of a base color.

As an example take this picture of an orange color:

orange

The lower row shows the variants. The percentages are the opacities.

Having a white background and reducing the opacity is good when I search good tints, but I like to use equivalent 100% opaque RGB colors in the final product.

How do I calculate or otherwise find the equivalent RGB numbers, when the RGB numbers of the base color and the opacity are already selected?

I have tried color picker, but in Illustrator it at least gives only the base color.

|improve this question
  • Comments are not for extended discussion; this conversation has been moved to chat. – Ryan♦ Jul 23 '18 at 14:57
  • @JonasPraem Do you find the recent edits to your question properly reflect what you were asking? If so I will reopen the question. Thank you! – curious♦ Jul 23 '18 at 23:21
  • Yes the edits made is perfectly reflecting what I was looking for – Jonas Praem Jul 24 '18 at 7:34
  • 2
    Why is this question bring down voted? It is a perfectly valid question imho. – filip Jul 24 '18 at 12:26
  • 3
    The original question was written with a very strong developer POV. The question is now edited to be more understandable for designers, and more precise as well. I am a developer, not a designer - seems like I hit a language barrier. – Jonas Praem Jul 24 '18 at 13:02
5

Use formula Y=255 - P*(255-X) where X is a RGB number, P=opacity (0...1), Y=new RGB number which should give the same appearance with 100% opacity as X gives with 100p% opacity against white background.

The formula is the general opacity formula, only simplified for this special case - the partially transparent top layer is against pure white.

Note: the white background should be a white object, not the artboard white. White background object is color managed.

If you are in Illustrator and want to copy the color with the color picker, make a copy of the partially transparent object and rasterize it. Select white background in the rasterizing dialog. Now the color picker gives the color, no calculations are needed.

|improve this answer
  • 2
    Here is a python implementation to calculate this graphicdesign.stackexchange.com/questions/46867/… – joojaa Jul 24 '18 at 12:21
  • I have a follow up question about how to implement this in Sass, on stack overflow, if anyone is interested: question – Jonas Praem Jul 24 '18 at 12:29
  • RE: the special case (i.e. not white), doesn't this work for every case, since the formula is for one single channel, and one would need to do this for each channel? Or is the special case "the first 255" in the formula? – Yorik Jul 24 '18 at 13:59
  • 2
    @Yorik the general formula for 2 layer image is Y=p*T+(1-p)*B where p is the opacity 0...1 of the top layer, T= rgb number of top layer color, B is the rgb number of fully opaque bottom layer. Y is the rgb number of the equivalent fully opaque color. – user287001 Jul 24 '18 at 14:14
  • JavaScript implementation of the general formula (thanks @user287001): const afterOpacity = (fg,o,bg=[255,255,255]) => fg.map((colFg,idx)=>o*colFg+(1-o)*bg[idx]) where fg is the foreground colour as [r,g,b], o is the opacity (0...1) and bg is the background colour (defaults to white if omitted) E.g. afterOpacity([255,0,0],0.5) gives [255,127.5,127.5] – Chris M Nov 27 '19 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.