CSS 색상 변환기
HEX를 RGB, HSL, Tailwind arbitrary로.
CSS
이 도구 소개
HEX로 지정한 색을 RGB와 HSL로 변환하고, 마크업에 바로 붙일 수 있는 Tailwind 임의 값 배경 클래스도 만들어 줍니다. 기본 팔레트에 없는 브랜드 색을 다룰 때 편리합니다.
사용 방법
HEX 입력란을 고치면 각 채널 값과 bg-[#…] 형태가 즉시 갱신됩니다. 필요한 표기를 골라 복사해 컴포넌트에 넣으세요.
예제
기본값인 하늘색으로 HEX에서 RGB·HSL·임의 값 클래스로 가는 흐름을 볼 수 있습니다.
입력
#38bdf8출력
HEX: #38BDF8
RGB: rgb(56, 189, 248)
HSL: hsl(199, 93%, 60%)
Tailwind arbitrary: bg-[#38bdf8]팁
임의 값 클래스도 정식 Tailwind이며, 팔레트의 비슷한 색으로 맞추면 브랜드 색감이 달라집니다.
알아 두면 좋은 점
어떤 색상 형식을 변환하나요?
3자리 또는 6자리 HEX 값을 입력하거나 색상 선택기를 쓰면 RGB, HSL, bg-[#38bdf8] 같은 Tailwind 임의 값 클래스를 얻습니다.
가장 가까운 Tailwind 색 대신 임의 값 클래스를 쓰는 이유는?
브랜드 색은 기본 팔레트와 맞지 않는 경우가 많습니다. 근사하면 디자인이 조용히 바뀌지만 bg-[#hex]는 정확한 색을 유지합니다.