[Feature request] Rgba to rgb conversion fuction

[aleksandrlat]

Summary

Add function to convert Rgba to Rgb

Basic Example

function rgbaToRgb(rgbaColor: string, bgColor: string = '#fff') {
  const rgba = parseToRgb(rgbaColor)
  const bg = parseToRgb(bgColor)

  const flattenedColor = {
    red: rgba.alpha * rgba.red + (1 - rgba.alpha) * bg.red,
    green: rgba.alpha * rgba.green + (1 - rgba.alpha) * bg.green,
    blue: rgba.alpha * rgba.blue + (1 - rgba.alpha) * bg.blue,
  }

  return rgbToColorString(flattenedColor)
}

Or maybe it should be lightenToOpacity?

function lightenToOpacity(color: string, opacity: number, bgColor: string = 'white') {
  // ....
}

Reasoning

Designer asked to make rgba(primaryColor, 0.1) but I have to set it as background color and it cannot have opacity because there is another element behind it. So I need to make non transparent color.

I cannot use lighten or setLightness because I don't know required lightness. I know only opacity.

This link was useful for me https://filosophy.org/code/online-tool-to-lighten-color-without-alpha-channel/

[ChaseBro]

should probably include a Math.round to wrap the math, otherwise you can end up with wonky hex values as it tries to deal with floating point values in the RGB channels. i.e.:

  const flattenedColor = {
    red: Math.round(rgba.alpha * rgba.red + (1 - rgba.alpha) * bg.red),
    green: Math.round(rgba.alpha * rgba.green + (1 - rgba.alpha) * bg.green),
    blue: Math.round(rgba.alpha * rgba.blue + (1 - rgba.alpha) * bg.blue),
  }