웹과 앱 디자인에서 색은 HEX(#3B82F6), RGB(rgb(59, 130, 246)), HSL(hsl(217, 91%, 60%)) 등 여러 방식으로 표현됩니다. 디자인 시안은 HEX로 받았는데 코드에서는 RGB가 필요하거나, 명도만 조금 조정하고 싶을 때 HSL이 편한 식으로 표기법을 바꿔야 하는 경우가 잦습니다. 이 도구는 세 표기법을 실시간으로 상호 변환하고, 선택한 색을 큰 영역에 미리 보여 줍니다.
세 표기법은 같은 색을 다른 좌표계로 적은 것입니다. HEX와 RGB는 빨강·초록·파랑 빛의 세기를 0~255로 표현해 사실상 동일하고, HSL은 색조(0~360도)·채도(0~100%)·명도(0~100%)로 표현해 사람이 직관적으로 조정하기 좋습니다. 예를 들어 버튼의 hover 색을 만들 때 HSL에서 명도(L)만 몇 % 낮추면 같은 색조의 어두운 변형을 손쉽게 얻을 수 있습니다.
또한 배경색 위에 검정 글씨가 나을지 흰 글씨가 나을지 고민될 때를 위해, 색의 상대 휘도를 계산해 대비가 더 좋은 텍스트 색을 자동으로 추천합니다. 색상 선택기(color picker)로 직접 고를 수도 있고, 숫자를 입력해 미세 조정할 수도 있습니다. 모든 계산은 브라우저에서 즉시 이루어져 어떤 데이터도 외부로 전송되지 않습니다.
사용 방법
- 1
색상 선택
색상 선택기를 클릭해 색을 고르거나, HEX 입력란에 #RRGGBB 형식의 코드를 직접 입력합니다.
- 2
값 조정
RGB 또는 HSL 칸의 숫자를 바꾸면 나머지 표기법과 미리보기가 즉시 함께 갱신됩니다.
- 3
대비 색 확인
미리보기 영역에 추천 텍스트 색(검정 또는 흰색)이 함께 표시되어 가독성을 가늠할 수 있습니다.
- 4
코드 복사
각 표기법 아래의 복사 버튼으로 HEX, RGB, HSL 값을 클립보드에 담아 코드에 바로 붙여 넣습니다.
이럴 때 유용해요
디자인 시안을 코드로 옮기기
디자이너가 HEX로 준 색을 CSS에서 rgb()나 hsl()로 써야 할 때, 붙여 넣고 변환된 값을 바로 복사합니다.
hover·active 변형 색 만들기
기본 버튼 색을 HSL로 본 뒤 명도(L)만 낮춰 같은 계열의 눌림·호버 상태 색을 빠르게 도출합니다.
텍스트 가독성 빠른 점검
배경색을 넣고 추천 대비 텍스트 색(검정/흰색)을 확인해 글자가 읽힐지 즉석에서 가늠합니다.
색상 표기 통일
프로젝트 코드에 HEX와 RGB가 뒤섞여 있을 때 한 표기법으로 모아 정리하기 위한 변환 기준으로 씁니다.
활용 팁
- HSL은 색조(H)는 그대로 두고 채도(S)나 명도(L)만 바꿔 같은 계열의 밝고 어두운 변형을 만들기에 좋습니다.
- 3자리 HEX(#abc)도 자동으로 6자리(#aabbcc)로 확장해 인식합니다.
- RGB와 HEX는 같은 정보를 다르게 적은 것이라 서로 무손실로 변환되지만, HSL은 소수를 반올림하므로 왕복 변환 시 1 정도 차이가 날 수 있습니다.
- 추천 대비 색은 간단한 휘도 기준이므로, 접근성 기준(WCAG 명암비 4.5:1 등)을 엄격히 맞춰야 한다면 별도의 명암비 검사를 병행하세요.
- 색상 선택기로 고른 색은 즉시 세 표기법으로 동기화되니, 감각적으로 고른 뒤 코드 값만 가져가기 좋습니다.
- 디자인 토큰을 정리할 때 같은 색을 HEX/RGB/HSL로 모두 기록해 두면 협업 시 혼란을 줄일 수 있습니다.
자주 묻는 질문
HSL이 뭔가요?
Hue(색조), Saturation(채도), Lightness(명도)로 색을 표현하는 방식입니다. 색조는 0~360도, 채도와 명도는 0~100%로 나타내며, 사람이 직관적으로 색을 조정하기 쉬워 디자인 작업에 자주 쓰입니다.
변환 값이 정확한가요?
표준 공식을 사용해 변환하지만 HSL은 반올림 과정에서 1 정도의 미세한 차이가 생길 수 있습니다. HEX와 RGB 사이는 무손실로 변환됩니다.
투명도(알파)도 지원하나요?
현재 버전은 불투명 색(HEX 6자리)을 기준으로 변환합니다. 알파 값이 필요하면 변환된 RGB·HSL 값에 직접 rgba()/hsla() 표기로 알파를 붙여 사용하세요.
대비 텍스트 색은 어떻게 정해지나요?
배경색의 RGB로 가중 휘도를 계산해 일정 기준보다 밝으면 검정, 어두우면 흰색을 추천합니다. 가독성 가늠용 간단 기준이며 WCAG 명암비와는 다릅니다.
입력한 색이 서버로 전송되나요?
아니요. 모든 변환은 브라우저에서만 실행되며 어떤 데이터도 외부로 전송되지 않습니다.
왜 HSL 값을 바꿨다 되돌리면 미세하게 달라지나요?
HSL은 정수로 반올림해 표시하므로 RGB로 환산했다 다시 HSL로 돌아오면 반올림 오차가 누적될 수 있습니다. 정확한 기준이 필요하면 HEX·RGB 값을 사용하세요.
3자리 HEX와 6자리 HEX는 같은가요?
3자리(#abc)는 각 자리를 두 번 반복한 6자리(#aabbcc)와 같은 색입니다. 이 도구는 3자리를 자동으로 확장해 인식합니다.
HEX 코드는 대소문자를 구분하나요?
아니요. #FF0000과 #ff0000은 같은 색입니다. 이 도구는 결과를 대문자로 표시하지만 입력은 대소문자 모두 인식합니다.