#581·polished

[Feature request] Rgba to rgb conversion fuction

Author: aleksandrlatCreated May 18, 2021Updated Feb 18, 2022
Labelsfeature request

Summary

Add function to convert Rgba to Rgb

Basic Example

javascript
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?

javascript
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/

Source: styled-components/polished