사용법
HEX 입력칸에 #3b82f6처럼 색상 코드를 입력하면 RGB 값과 HSL 값이 즉시 계산되고 미리보기 색상이 바뀝니다. #f60 같은 3자리 축약형도 인식합니다. 반대로 R·G·B 숫자를 직접 입력하면 HEX 코드가 자동으로 갱신됩니다. 색을 눈으로 고르고 싶다면 컬러 피커를 클릭해 팔레트에서 선택하세요. 아래 결과 영역에는 CSS에 바로 붙여넣을 수 있는 rgb(), hsl() 표기가 함께 표시되며, 각 형식별 복사 버튼으로 클립보드에 담을 수 있습니다.
이런 상황에서 쓰세요
- 디자인 시안의 HEX 코드를 CSS
rgb()/rgba()표기로 바꿔야 할 때 - 기존 색상의 명도·채도를 조절하기 위해 HSL 값이 필요할 때
- 브랜드 컬러 가이드 문서에 여러 형식의 색상 값을 정리할 때
- Android/iOS 네이티브 코드에 넣을 RGB 정수 값이 필요할 때
- 임의의 색상 코드가 실제로 어떤 색인지 눈으로 확인하고 싶을 때
HSL(색상·채도·명도) 표기는 "같은 색에서 조금 더 밝게/어둡게" 같은 조정이 직관적이라 디자인 시스템에서 널리 쓰입니다. 변환 계산은 모두 브라우저 안에서 이루어집니다. 기준 색상에 어울리는 배색 조합이 필요하다면 색상 팔레트 생성기를 사용해 보세요.