사용법
- 색상 피커를 눌러 원하는 색을 직접 고르거나, HEX·RGB·HSL 칸 중 하나에 값을 입력합니다.
- 한 곳을 바꾸면 나머지 두 형식과 미리보기, 색상 피커가 모두 그 색으로 동기화됩니다.
- 예:
rgb(223, 67, 36)이나hsl(11, 74%, 51%)형식으로 입력해도 인식합니다. - 필요한 형식 옆 "복사" 버튼으로 코드를 클립보드에 담아 CSS나 디자인 툴에 붙여넣습니다.
활용 팁
- HSL로 색을 직관적으로 조정: HEX·RGB는 미세 조정이 어렵지만 HSL은 색조(H)·채도(S)·명도(L)가 분리돼 있어, 같은 색조에서 더 밝거나 연한 변형을 만들기 쉽습니다. 명도(L)만 낮추면 같은 계열의 어두운 색을 바로 얻을 수 있습니다.
- 디자인 토큰·변수 만들기: 추출한 HSL 값을 기준으로 명도를 10%씩 조절하면 버튼의 기본·호버·비활성 상태 색 세트를 체계적으로 구성할 수 있습니다. CSS 변수로 정리해 두면 유지보수가 편합니다.
- 형식 변환이 필요할 때: 디자인 시안은 HEX, 일부 라이브러리나 그래픽 코드는 RGB를 요구하는 경우가 많습니다. 한 번 입력으로 세 형식을 모두 얻어 어디에든 맞춰 붙여넣을 수 있습니다.
자주 묻는 질문
Q. HSL이 무엇인가요?
Hue(색조 0~360°), Saturation(채도 0~100%), Lightness(명도 0~100%)로 색을 표현하는 방식입니다. 사람이 색을 인지하는 방식에 가까워, 색조는 유지하면서 밝기나 선명도만 바꾸기에 RGB보다 직관적입니다.
Q. hex-rgb 변환 도구와 무엇이 다른가요?
이 도구는 색상 피커 UI와 HSL 형식까지 포함한 종합 변환기입니다. HEX·RGB 양방향만 필요하면 더 단순한 'HEX ↔ RGB 변환' 도구를, 색을 시각적으로 고르고 HSL로 미세 조정까지 하려면 이 도구를 사용하세요.
Q. 잘못된 색상 코드를 입력하면 어떻게 되나요?
인식할 수 없는 형식이면 미리보기와 다른 칸이 갱신되지 않습니다. HEX는 3자리(#abc)·6자리(#aabbcc)를 모두 받고, RGB·HSL은 숫자만 정확히 넣으면 나머지 형식으로 자동 변환됩니다.