javascript - Algorithm to convert semi-transparent to solid color - Stack Overflow

admin管理员组

文章数量:1344628

Let's say I have the color rgba(255, 0, 0, 0.5) on a white background. The color that can bee seen is almost identical to rgba(255, 140, 140, 1) which is a solid color. I'm looking for an algorithm that converts a semi-transparent color (over white) to a solid color so that it looks (pretty much) the same when it's one near each other (like in the photo below)

I noticed that if there are 2 ponents (r, g, or b) that are 0, then you have to keep the not-null ponent's value and adjust the null ponents by the same value so that it matches the wight color. This value (I guess) depends on the alpha ponent of semi-transparent color. But I can't seem to find the formula. How about the rest of the case? I think there must be a general formula that can be applied.

I'm looking for an answer in pseudocode, javascript, Java, Python, C# or C++.

Also, I am not working on any project. This question is for learning purposes and for helping people that might need this.

Let's say I have the color rgba(255, 0, 0, 0.5) on a white background. The color that can bee seen is almost identical to rgba(255, 140, 140, 1) which is a solid color. I'm looking for an algorithm that converts a semi-transparent color (over white) to a solid color so that it looks (pretty much) the same when it's one near each other (like in the photo below)

I noticed that if there are 2 ponents (r, g, or b) that are 0, then you have to keep the not-null ponent's value and adjust the null ponents by the same value so that it matches the wight color. This value (I guess) depends on the alpha ponent of semi-transparent color. But I can't seem to find the formula. How about the rest of the case? I think there must be a general formula that can be applied.

I'm looking for an answer in pseudocode, javascript, Java, Python, C# or C++.

Also, I am not working on any project. This question is for learning purposes and for helping people that might need this.

• javascript
• colors
• pseudocode
• rgba

Share Improve this question Follow edited Jan 21, 2018 at 7:03 Stefan Octavian asked Jan 20, 2018 at 18:17 Stefan OctavianStefan Octavian 62088 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

I know this formula to convert from rgba to rgb

function rgba2rgb(background, color) {
    const alpha = color[3]

  return [Math.floor((1 - alpha) * background[0] + alpha * color[0] + 0.5),
        Math.floor((1 - alpha) * background[1] + alpha * color[1] + 0.5),
        Math.floor((1 - alpha) * background[2] + alpha * color[2] + 0.5)]
}

console.log(rgba2rgb([255, 255, 255], [255, 0, 0, 0.5])) // [ 255, 128, 128 ]

But it's not right for your example

本文标签： javascriptAlgorithm to convert semitransparent to solid colorStack Overflow