I created a tiny npm package which helps manipulate transparency of a css color.

Hello 👋

Let me introduce you to with-alpha-hex, A tiny TypeScript/JavaScript library which helps change/add alpha(opacity) of a css hexadecimal color.

🤨 What is this?

This is a library for those who use CSS-in-JS and prefer to use #RRGGBB[AA] style css color rather than functional notation color such as rgb() or hsl() and want to make the alpha channel dynamic.

There are plenty of color manipulation library but most of them output functional notation colors(Especially when using alpha).

🤔 Ok, How to use then?

It's fairly simple. :) A quick instruction goes below.

💻 Installation

npm i with-alpha-hex
# or
yarn add with-alpha-hex

The library is TypeScript-ready and has zero-dependency. :)

🎈 Usage

import { withAlphaHex } from 'with-alpha-hex'

const textColor = '#000'

const weakTextColor = withAlphaHex(textColor, 0.4) // #00000066

const primaryColor = '#14B1AB'

const weakPrimaryColor = withAlphaHex(primaryColor, 0.2) // #14B1AB33

Wait, what are those 8-digit hexadecimal color thingy?

In CSS Color Module Level 4, You can use #RRGGBBAA color which has an alpha channel value.

✨ With Styled-JSX

import { withAlphaHex } from 'with-alpha-hex'

// ~~~~

const RandomComponent = () => {
  return (
    <div>
      <p className="random-text">{text}</p>
      <style jsx>{`
        .random-text {
          color: ${textColor}
          background: ${backgroundColor};
        }

        .random-text:hover {
          background: ${withAlphaHex(backgroundColor, 0.2)};
        }
      `}</style>
    </div>
  )
}

That's it!

Cheers. :)