Color Converter
Convert between HEX, RGB, and HSL color formats with live preview.
Color
Complementary
#c47d09
Formatted Values
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
이 색상 변환기는 색 하나를 CSS에서 자주 쓰는 세 가지 형식인 HEX, RGB, HSL로 한 번에 보여 줍니다. 어느 칸에 값을 입력하거나 색상 선택기를 움직이면 나머지 형식이 즉시 다시 계산되어 직접 변환식을 외울 필요가 없습니다.
디자인 도구는 HEX를 주는데 스타일시트는 HSL을 쓸 때, 밝기만 미세하게 조정하고 싶을 때, 또는 빠르게 보색이 필요할 때 유용합니다. 모든 계산은 브라우저 안에서 처리되어 색상 데이터가 서버로 전송되지 않습니다.
사용 방법
- 기본 색상 선택기로 색을 고르거나, #3b82f6 같은 6자리 HEX 코드를 HEX 칸에 붙여넣으세요.
- R, G, B 값(0~255)이나 H, S, L 값(색상 0~360, 채도·명도 0~100)을 조정해 색을 다듬습니다.
- 한 칸만 수정해도 색상 견본과 세 가지 형식 값이 실시간으로 함께 갱신됩니다.
- HEX, RGB, HSL 옆의 복사 버튼을 눌러 해당 CSS 문자열을 클립보드에 그대로 복사하세요.
- 보색 견본에서 반전된 색을 확인하고, 강조색이 필요하면 그 HEX 값을 복사합니다.
자주 묻는 질문
- 어떤 색상 형식을 지원하나요?
- HEX(#ff8800 같은 6자리), RGB(채널당 0~255), HSL(색상 0~360도, 채도·명도 0~100%)을 지원합니다. 한 형식을 수정하면 나머지 두 형식이 자동으로 갱신됩니다.
- RGB와 HSL 값은 유효 범위로 제한되나요?
- 네. RGB는 반올림 후 0~255, 색상은 0~360, 채도와 명도는 0~100으로 제한되므로 범위를 벗어난 값을 입력할 수 없습니다.
- 보색은 어떻게 계산되나요?
- 각 RGB 채널을 반전(255에서 빼기)해 색상환 반대편 색을 만듭니다. 정식 팔레트 생성기가 아니라 강조색을 잡는 빠른 출발점입니다.
- 알파값이나 3자리 축약 HEX도 되나요?
- 아니요. HEX 칸은 알파 없이 6자리 코드를 받습니다. #f80 같은 축약형은 먼저 #ff8800로 바꾸고, 투명도는 CSS에서 따로 처리하세요.
- 입력한 색상 데이터가 외부로 전송되나요?
- 아니요. 모든 변환은 브라우저의 자바스크립트로 처리됩니다. 서버로 아무것도 전송되지 않으며 페이지가 로드된 뒤에는 오프라인에서도 동작합니다.