Question

Let's say I have two similar hexadecimal colors: #7a82f1 and #a1a6f4 with respective rgb(122, 130, 241) and rgb(161, 166, 244). Let's assume the second color can be achieved in a child element by setting the CSS to add some white (with a variable opacity) on top of the parent color (the first color).

Is there any way to "reverse rgba" to find the opacity on white (or black) that can be applied on one color to get the other? For example:

.parent {         
    background: #7a82f1;     
    .child {
         background: rgba(255, 255, 255, 0.3); //This is #a1a6f4! however, how do I find out 0.3 without knowing it?
    }
}

The purpose is to be able to work off png/jpeg designs rather than dealing with the intricacies of PSD files (or having to hand off your own).

Was it helpful?

Solution

Assume that

  1. Background is black.
  2. The A channel is linear (0-255), so 0=black (background) and 255=foreground
  3. The grayscale is linear (0-255), so 0=black and 255=white

Then gray 35 at opacity 255 is the same as gray 52 at opacity 255*35/52 = 171.

But all these assumptions are dubious. In games programming using float values for colours and transparency and with control over the gamma curve this is all much easier. In CSS, not so much.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top