How to convert hex color to rgba in Emotion

Question

I am converting styles of my app from Less to Emotion

in Less I have styles as follows:

@blue: #476882;
background: rgba(red(@blue), green(@blue), blue(@blue), 0.5);

while converting to Emotion I am doing this:

export const BLUE = '#476882'
background: rgba(red(${BLUE}), green(${BLUE}), blue(${BLUE}), 0.5);

however it is not working.

any suggestions to make this work?

Answer 1

I couldn't find any method within emotion, but I personally solved it with an utility function that uses the hex-rgb package:

import hexRgb from 'hex-rgb';

export const rgba = (hex, alpha) => {
  const rgb = hexRgb(hex, { format: 'array' })
    .slice(0, -1)
    .join(',');
  return `${rgb},${alpha}`;
};

and then just use it like so: rgba(${rgba('#000', 0.15)})