dominicegginton/hex-color-opacity

Lightweight module for adding opacity to hexadecimal colors

Software developer at Arup, climber and open-source advocate from the Midlands UK.

hex-color-opacity's Issues

Add Typescript support

Hi, the Typescript definitions are missing from this project.

I added them manually in my project with

declare module "hex-color-opacity" {
  export default function opacity(hex: string, opacity: number): string
}

But it would be cool if it was provided from the package itself.

All you would need to do is add a .d.ts file in your package publication with something like this inside:

export default function opacity(hex: string, opacity: number): string

Fails to generate colors for small values

Hi, I've found a bug that when opacity value is really small (like 1% - 4%) function will generate wrong hex.

Failing test example:

    Expected: "#FF700003"
    Received: "#FF70003"

      32 |   it('returns proper values', () => {
      33 |     expect(opacity('#FF7000', 0.0)).toBe('#FF700000')
    > 34 |     expect(opacity('#FF7000', 0.01)).toBe('#FF700003')

Fix

To fix I changed those lines:

  if (opacity === 0) color += '00'
  else if (opacity !== 1) color += Math.round(opacity * 255).toString(16)
  return `#${color}`

into this:

  const hexOpacity = Math.round(percentage * 255)
    .toString(16)
    .padStart(2, '0')
    .toUpperCase()

  return `#${color}${hexOpacity}`

This adds zeros at the beginning if generated opacity doesn't contain 2 characters. This also works for 0.0 value so no if needed.

Support updating hex opacity

Add the ability to update a hex color code that already has an opacity value. Currently an error is thrown saying the hex code is invalid. The module should accept hexcodes with opacity applied, calulate and update the opacity value.