CodeKitHub이 도구는 무엇인가요?
웹에서 색상은 여러 개의 동등한 형식으로 표기되며, 모두 MDN의 CSS Color 명세에 정의되어 있습니다. HEX(#4f46e5)는 CSS와 디자인 파일 전달에서 가장 흔히 쓰이는 간결한 표기법입니다. RGB(rgb(79, 70, 229))는 빨강·초록·파랑 채널 값을 직접 나타내며 코드에서 자주 필요합니다. HSL(hsl(243, 75%, 59%))은 색상(hue)·채도(saturation)·명도(lightness)를 표현하는데, 색을 더 어둡게 하거나 채도를 낮추는 것처럼 색을 조정할 때 가장 직관적인 형식입니다.
이 세 가지 모두 같은 색을 가리킵니다. 이 도구는 이들 사이를 정확하게 변환하고 미리보기를 보여줘서 원하던 색이 맞는지 바로 확인할 수 있게 해줍니다.
왜 사용해야 할까요?
- HEX(3자리 또는 6자리), RGB, HSL 중 어떤 형식으로 입력해도 받아서 모든 형식으로 출력합니다.
- 실시간 미리보기 색상으로 숫자가 아니라 실제 색을 눈으로 확인할 수 있습니다.
- 눈으로 직접 고르고 싶을 때를 위한 시각적 색상 선택기.
- 형식별로 클릭 한 번에 복사, CSS나 코드에 바로 사용 가능.
- 무료, 즉시 처리, 업로드 없음.
사용 방법
- #4f46e5, rgb(79, 70, 229), hsl(243, 75%, 59%) 중 어떤 형식이든 입력하거나 붙여넣으세요.
- 또는 색상 선택기를 클릭해 눈으로 직접 고르세요.
- 결과에 표시된 세 가지 형식을 확인하고 미리보기 색상도 함께 체크하세요.
- 필요한 형식 옆의 "복사" 버튼을 클릭하세요.
예시
입력
#4f46e5결과
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)세 가지 표기법이지만 완전히 동일한 색입니다.
어떤 형식을 써야 할까요?
세 형식 모두 정확히 같은 색을 가리킵니다 — 선택 기준은 정확도가 아니라 지금 하려는 작업에 어떤 형식이 더 다루기 편한가입니다.
| 형식 | 적합한 용도 | 이유 |
|---|---|---|
| HEX (#4f46e5) | CSS, 디자인 파일 전달, 빠른 복사-붙여넣기 | 타이핑과 붙여넣기가 가장 짧고, Figma 같은 디자인 툴에서 표준으로 쓰입니다. |
| RGB (rgb(79,70,229)) | 채널을 직접 다루는 코드, 캔버스/이미지 작업 | 그래픽 API와 이미지 픽셀 데이터가 색을 저장하는 방식과 실제로 일치합니다. |
| HSL (hsl(243,75%,59%)) | 색 조정 — 더 밝게, 더 어둡게, 채도 조절 | HEX/RGB는 채널이 다 같이 바뀌지만 HSL은 명도와 채도를 각각 별도 숫자로 직접 조절할 수 있습니다. |
자주 쓰이는 활용 사례
- 디자인 툴에서 눈으로 색을 고른 뒤, CSS나 코드에 필요한 정확한 HEX나 RGB 값으로 변환하기.
- HSL로 변환해 명도를 조정하고 다시 변환하는 방식으로 관련 색상(더 밝은/어두운 버전) 세트 만들기.
- 각기 다른 형식을 기대하는 여러 툴 사이에서 브랜드 색을 맞추기 — RGB로 된 로고 파일, HEX로 된 스타일 가이드, 테마 처리에 HSL이 필요한 CSS 변수 등.
- 스크린샷이나 디자인 파일에서 뽑은(보통 RGB로 표시되는) 색이 스타일시트의 HEX 값과 일치하는지 확인하기.
자주 묻는 질문
HEX나 RGB 대신 HSL을 언제 써야 하나요?
색을 논리적으로 다뤄야 할 때 유용합니다. HSL에서는 색을 10% 어둡게 만들려면 명도를 10포인트 낮추기만 하면 되지만, HEX나 RGB에서는 모든 채널을 다시 계산해야 합니다. 디자인 시스템에서 팔레트를 HSL로 정의하는 경우가 많은 것도 바로 이런 이유 때문입니다.
#fff 같은 3자리 HEX도 지원하나요?
네. #fff는 #ffffff의 축약형으로, 각 자릿수가 두 번씩 반복되는 방식입니다. 두 형식 모두 입력 가능하며 결과는 항상 6자리 형식으로 표시됩니다.
투명도(알파값)는 어떻게 되나요?
이 도구는 불투명한 색(RGB/HSL 값)만 변환합니다. 투명도가 필요하면 직접 알파값을 추가하세요: rgba(79, 70, 229, 0.5)나 #4f46e580처럼 — 색상 부분 자체는 그대로 유지됩니다.
왜 다른 도구와 HSL 값이 1 정도 차이가 나나요?
반올림 때문입니다. HSL↔RGB 변환 과정에서 소수점 값이 생기는데, 도구마다 반올림 방식이 조금씩 다릅니다. 색상값이나 퍼센트가 ±1 정도 차이 나는 건 눈으로 구분되지 않는 정상적인 오차입니다.
'red' 같은 색상 이름도 지원하나요?
1단계에서는 지원하지 않습니다 — 개발자가 가장 많이 변환하는 세 가지 숫자 형식에 집중하고 있습니다. HEX/RGB/HSL 값을 직접 입력하거나 선택기로 골라주세요.
HEX, RGB, HSL 중 언제 무엇을 써야 하나요?
투명도가 필요하면 8자리 HEX(#RRGGBBAA)나 rgba()를 쓰세요 — 6자리 HEX에는 알파 채널이 없습니다. 같은 색의 더 밝거나 어두운 버전을 만들고 싶다면 HSL이 가장 쉽습니다 — 색상과 채도는 고정하고 명도 숫자만 바꾸면 됩니다. CSS나 디자인 툴에 그냥 복사-붙여넣기 할 때는 6자리 HEX가 가장 보편적으로 인정되는 형식입니다.