사용 방법

붙여넣기, 실행, 확인, 복사 — 네 단계. 모든 작업은 브라우저에서 이뤄집니다.

CSS, HTML, JSON 등을 편집기에 넣으세요. 업로드되지 않습니다.

변환 또는 실행을 누르세요. 결과가 바로 나타납니다.

생성된 코드와 노트를 사용 전에 확인하세요.

결과를 복사해 프로젝트에 붙여넣으세요.

이 도구 소개

HEX로 지정한 색을 RGB와 HSL로 변환하고, 마크업에 바로 붙일 수 있는 Tailwind 임의 값 배경 클래스도 만들어 줍니다. 기본 팔레트에 없는 브랜드 색을 다룰 때 편리합니다.

기본값인 하늘색으로 HEX에서 RGB·HSL·임의 값 클래스로 가는 흐름을 볼 수 있습니다.

입력

#38bdf8

출력

HEX: #38BDF8
RGB: rgb(56, 189, 248)
HSL: hsl(199, 93%, 60%)
Tailwind arbitrary: bg-[#38bdf8]

임의 값 클래스도 정식 Tailwind이며, 팔레트의 비슷한 색으로 맞추면 브랜드 색감이 달라집니다.