🎨 색상 코드 변환기
HEX ↔ RGB ↔ HSL을 실시간으로 변환하세요!
입력하는 즉시 모든 값이 자동으로 바뀝니다.
🌗 명도 팔레트 (클릭하면 적용)
🔄 보색 (Complementary)
📌 알아두면 좋은 색상 코드 정보
- HEX: #RRGGBB 형식의 16진수 코드. 웹·CSS에서 가장 많이 사용 (예: #FF0000 = 빨강)
- RGB: 빨강·초록·파랑을 각각 0~255로 혼합하는 빛의 삼원색 방식
- HSL: 색상(0~360°)·채도(0~100%)·명도(0~100%)로 사람이 인지하기 쉬운 방식
- 3자리 HEX: #F00 처럼 축약 가능 (#FF0000과 동일)
- 미리보기 색상이나 복사 버튼을 누르면 코드가 클립보드에 바로 복사됩니다
❓ 자주 묻는 질문
HEX(헥스) 코드는 색을 16진수 6자리로 표현하는 방식으로 #RRGGBB 형식을 사용합니다. 앞 두 자리는 빨강(R), 가운데 두 자리는 초록(G), 마지막 두 자리는 파랑(B)의 밝기를 00~FF(10진수 0~255)로 나타냅니다. 예를 들어 #FF0000은 순수한 빨강입니다. 웹과 CSS에서 가장 널리 쓰이는 색상 표기법입니다.
RGB는 빛의 삼원색인 빨강·초록·파랑을 각각 0~255로 섞어 색을 만드는 방식이고, HSL은 색상(Hue 0~360°)·채도(Saturation 0~100%)·명도(Lightness 0~100%)로 색을 표현합니다. RGB는 화면 출력에 직접 대응하지만, HSL은 사람이 색을 인지하는 방식과 비슷해 색을 직관적으로 조절하거나 팔레트를 만들 때 편리합니다.
HEX 코드의 두 자리씩을 16진수에서 10진수로 변환하면 됩니다. 예를 들어 #336699의 경우 33→51, 66→102, 99→153 이므로 RGB(51, 102, 153)이 됩니다. 이 변환기에 HEX 코드를 입력하면 RGB와 HSL 값이 자동으로 즉시 계산되어 표시됩니다.
네, 3자리 축약형 HEX 코드를 지원합니다. 각 자리를 두 번 반복한 것과 같습니다. 예를 들어 #F00은 #FF0000(빨강)과, #0AF는 #00AAFF와 동일합니다. 이 변환기는 3자리와 6자리 HEX 코드를 모두 인식합니다.
HSL은 색상(Hue)을 그대로 유지하면서 채도나 명도만 조절하고 싶을 때 매우 편리합니다. 같은 색 계열의 밝고 어두운 톤(틴트·셰이드) 팔레트를 만들거나, 색상값(H)에 180°를 더해 보색을 찾을 때 직관적입니다. CSS에서도 hsl() 함수로 바로 사용할 수 있습니다.
완전히 무료이며 설치나 회원가입이 필요 없습니다. 모든 변환은 브라우저 안에서 즉시 처리되며 색상 데이터가 서버로 전송되지 않아 안전합니다. PC와 모바일 어디서나 사용할 수 있습니다.