웹과 앱 디자인에서 색은 HEX(#3B82F6), RGB(rgb(59, 130, 246)), HSL(hsl(217, 91%, 60%)) 등 여러 방식으로 표현됩니다. 디자인 시안은 HEX로 받았는데 코드에서는 RGB가 필요하거나, 명도만 조금 조정하고 싶을 때 HSL이 편한 식으로 표기법을 바꿔야 하는 경우가 잦습니다. 이 도구는 세 표기법을 실시간으로 상호 변환하고, 선택한 색을 큰 영역에 미리 보여 줍니다.
또한 배경색 위에 검정 글씨가 나을지 흰 글씨가 나을지 고민될 때를 위해, 색의 상대 휘도를 계산해 대비가 더 좋은 텍스트 색을 자동으로 추천합니다. 색상 선택기(color picker)로 직접 고를 수도 있고, 숫자를 입력해 미세 조정할 수도 있습니다. 모든 계산은 브라우저에서 즉시 이루어집니다.
사용 방법
- 1
색상 선택
색상 선택기를 클릭해 색을 고르거나, HEX 입력란에 #RRGGBB 형식의 코드를 직접 입력합니다.
- 2
값 조정
RGB 또는 HSL 칸의 숫자를 바꾸면 나머지 표기법과 미리보기가 즉시 함께 갱신됩니다.
- 3
대비 색 확인
미리보기 영역에 추천 텍스트 색(검정 또는 흰색)이 함께 표시되어 가독성을 가늠할 수 있습니다.
- 4
코드 복사
각 표기법 아래의 복사 버튼으로 HEX, RGB, HSL 값을 클립보드에 담아 코드에 바로 붙여 넣습니다.
활용 팁
- HSL은 색조(H)는 그대로 두고 채도(S)나 명도(L)만 바꿔 같은 계열의 밝고 어두운 변형을 만들기에 좋습니다.
- 3자리 HEX(#abc)도 자동으로 6자리(#aabbcc)로 확장해 인식합니다.
- 추천 대비 색은 간단한 휘도 기준이므로, 접근성 기준(WCAG)을 엄격히 맞춰야 한다면 별도의 명암비 검사를 병행하세요.
- 디자인 토큰을 정리할 때 같은 색을 HEX/RGB/HSL로 모두 기록해 두면 협업 시 혼란을 줄일 수 있습니다.
자주 묻는 질문
HSL이 뭔가요?
Hue(색조), Saturation(채도), Lightness(명도)로 색을 표현하는 방식입니다. 사람이 직관적으로 색을 조정하기 쉬워 디자인 작업에 자주 쓰입니다.
변환 값이 정확한가요?
표준 공식을 사용해 변환하지만 반올림 과정에서 1 정도의 미세한 차이가 생길 수 있습니다. 표시 결과는 참고용입니다.
투명도(알파)도 지원하나요?
현재 버전은 불투명 색(HEX 6자리)을 기준으로 변환합니다. 알파 값이 필요하면 별도로 rgba/hsla 표기에 붙여 사용하세요.
대비 텍스트 색은 어떻게 정해지나요?
배경색의 상대 휘도를 계산해 일정 기준보다 밝으면 검정, 어두우면 흰색을 추천합니다. 가독성 가늠용 간단 기준입니다.
입력한 색이 서버로 전송되나요?
아니요. 모든 변환은 브라우저에서만 실행되며 어떤 데이터도 외부로 전송되지 않습니다.