색상 코드 변환기
HEX, RGB, HSL 색상 코드를 미리보기와 함께 상호 변환.
🔒 100% 브라우저 기반 — 데이터가 기기 밖으로 나가지 않습니다.
이 도구에 대하여
CSS와 디자인 도구에서 쓰는 세 가지 표기 — HEX(#3b82f6), RGB(rgb(59, 130, 246)), HSL(hsl(217, 91%, 60%)) — 을 서로 변환합니다. 색상 선택기로 고르거나 HEX 값을 직접 입력하면 모든 형식과 미리보기가 실시간으로 갱신되고, 각 값은 클릭 한 번으로 복사됩니다.
디자인 미세 조정에는 HSL이 특히 유용합니다. 색조(H)를 고정하고 밝기(L)만 조절해 호버 색을 만들거나, 채도(S)를 유지한 채 색조를 돌려 팔레트 변형을 만들 수 있습니다.
자주 묻는 질문
HEX와 RGB는 뭐가 다른가요?
색 자체는 같습니다. HEX는 RGB를 16진수로 적은 것일 뿐입니다. #ff0000과 rgb(255, 0, 0)은 같은 빨강입니다.
HSL은 언제 쓰나요?
직관적인 조절이 필요할 때입니다. H는 색상환의 각도, S는 채도, L은 밝기라서 "조금 더 어둡게"가 L 하나만 바꾸면 됩니다.
3자리 HEX도 되나요?
네. #f80처럼 짧은 코드는 각 자리를 두 번 써서 #ff8800으로 해석됩니다.