CSS 색상의 투명도를 조작하는 데 도움이 되는 작은 npm 패키지를 만들었습니다.

안녕하세요 👋

css 16진수 색상의 알파(불투명도)를 변경/추가하는 데 도움이 되는 작은 TypeScript/JavaScript 라이브러리인 with-alpha-hex을 소개하겠습니다.

🤨이게 뭐야?

CSS-in-JS를 사용하고 #RRGGBB[AA] 또는 rgb()와 같은 기능적 표기 색상보다 hsl() 스타일 CSS 색상을 선호하고 알파 채널을 동적으로 만들고자 하는 사용자를 위한 라이브러리입니다.

많은 색상 조작 라이브러리가 있지만 대부분은 기능적 표기 색상을 출력합니다(특히 알파를 사용할 때).

🤔 자, 그럼 어떻게 사용할까요?

상당히 간단합니다. :) 빠른 지침이 아래에 있습니다.

💻 설치

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

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

🎈 사용법

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

잠깐만요, 저 8자리 16진수 색상이 뭔가요?

CSS Color Module Level 4에서는 알파 채널 값이 있는 #RRGGBBAA 색상을 사용할 수 있습니다.

✨ 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>
  )
}

그게 다야!

건배. :)