색상 변환
HEX ↔ RGB ↔ HSL · 피커
🔒 이 도구는 입력한 데이터를 서버로 전송하지 않습니다. 모든 변환·계산은 여러분의 브라우저 안에서만 실행되므로 민감한 데이터도 안전하게 처리할 수 있습니다.
색상 변환이란?
같은 색이라도 표기 방식은 여러 가지입니다. CSS·디자인 도구에서 쓰는 HEX(#2563eb), 채널 값이 직관적인 RGB(rgb(37,99,235)), 색상·채도·명도로 조정하기 좋은 HSL(hsl(220,84%,53%))이 대표적입니다. 이 도구는 세 표기를 서로 변환하고, 컬러 피커로 색을 시각적으로 고를 수 있게 해 줍니다.
사용 방법
- HEX·RGB·HSL 중 아는 값을 입력하거나, 컬러 피커로 색을 고릅니다.
- 나머지 표기가 자동으로 계산되어 함께 표시됩니다.
- 미리보기로 색을 확인하고 원하는 표기의 값을 복사합니다.
실무 활용 예시
- 디자인 값 옮기기 — 디자이너가 HEX로 준 색을 RGBA로 바꿔 투명도를 얹습니다.
- 테마 조정 — HSL로 명도만 낮춰 hover·active 상태의 파생 색을 만듭니다.
- 일관성 점검 — 코드 곳곳의 색 표기를 한 가지로 통일해 팔레트를 정리합니다.
팁과 주의점
- HSL은 명도(L)만 조절해 같은 색조의 밝고 어두운 변형을 만들기 좋아, 테마 팔레트 설계에 유용합니다.
- 투명도가 필요하면 RGBA·HSLA나 8자리 HEX(
#RRGGBBAA)를 사용하세요. - 변환은 브라우저에서만 계산되며 서버와 통신하지 않아 즉시 반영됩니다.
자주 묻는 질문
HEX, RGB, HSL 중 무엇을 써야 하나요?
용도에 따라 다릅니다. 값 전달·CSS에는 HEX가 간결하고, 채널 조작에는 RGB, 밝기·채도를 조정하며 파생색을 만들 때는 HSL이 편합니다. 값 자체는 서로 동일하게 변환됩니다.
투명도(알파)도 다룰 수 있나요?
투명도가 필요하면 RGBA·HSLA 표기나 8자리 HEX(#RRGGBBAA)를 사용하세요. 색만 다룰 때는 6자리 HEX로 충분합니다.
컬러 피커로 고른 색도 변환되나요?
네. 피커로 색을 고르면 HEX·RGB·HSL 값이 동시에 계산되어 표시되므로, 원하는 표기를 바로 복사할 수 있습니다.
변환 시 서버와 통신하나요?
아니요. 색상 변환은 브라우저에서만 계산되며 어떤 데이터도 서버로 전송하지 않습니다.