HEX
#db2777
RGB
rgb(253, 121, 168)
HSL
hsl(339, 97%, 73%)
RGBA
rgba(219,39,119, 1)
HSLA
hsla(339, 97%, 73%, 1)
CSS Filter
—
복사됨!
색상 변환기 (HEX RGB HSL)
HEX ↔ RGB ↔ HSL ↔ CMYK를 한 화면에서. 색상 미리보기도 바로 옆에.
쓰는 법
- 아무 입력칸에나 값 넣기 (HEX #FF5733, RGB 255,87,51, HSL 11°,100%,60% 중 하나).
- 나머지 포맷이 실시간으로 동시에 갱신돼요.
- 위쪽 색상 미리보기 영역을 클릭하면 브라우저 기본 컬러피커가 열려서 마우스로 색 고를 수도 있어요.
- 각 포맷 옆 복사 버튼으로 한 번에 클립보드 복사.
예시
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
CMYK: 76, 47, 0, 4디자이너 시안 색이랑 CSS 색이 다를 때
디자인 시안에서 받은 HEX 코드를 CSS에 박았는데 퍼블리셔가 HSL로 달라고 하는 경우 있잖아요. 또는 인쇄 맡기려고 CMYK 값이 필요하거나. 이럴 때 매번 계산기 두들기지 말고 여기 HEX 하나 넣으면 RGB, HSL, CMYK가 동시에 뜹니다.
#RRGGBB(HEX)는 웹, rgb(255,87,51)은 CSS 변수 계산용, hsl(11,100%,60%)은 색상 톤 조정할 때, CMYK는 인쇄용이에요.
여기 쓰면 편한 점
- HEX, RGB, HSL, CMYK 네 가지가 한 화면에 같이 떠서 왔다갔다 할 필요 없어요.
- 색상 미리보기 박스가 커서 실제 어떻게 보이는지 바로 감이 옵니다.
- 입력 도중에도 실시간 변환이라 슬라이더 움직이듯 값 바꿔가며 볼 수 있어요.
- 알파(투명도)도 지원해서 rgba, hsla 값도 그대로 처리됩니다.
- 브라우저 컬러피커도 내장돼 있어서 포토샵 안 켜고 색 고르기 가능.
다른 색상 변환 사이트랑 비교
| 항목 | 사장나라 | ColorHexa | RapidTables |
|---|---|---|---|
| 지원 포맷 | HEX, RGB, HSL, CMYK | 다양 | HEX, RGB, HSL |
| 실시간 변환 | 있음 | 있음 | 페이지 새로고침 |
| 알파 지원 | rgba/hsla | 제한적 | 없음 |
| 컬러피커 | 내장 | 내장 | 없음 |
자주 묻는 질문
어떤 포맷을 지원해요?
HEX (#RRGGBB, #RGB 축약), RGB (0-255), HSL (hue 0-360°, saturation/lightness 0-100%), CMYK (0-100%) 네 가지를 지원합니다.
컬러피커로 색 고르고 싶어요
네, 상단 색상 미리보기 영역을 클릭하면 브라우저 기본 컬러피커가 떠요. 마우스로 고른 색이 바로 HEX, RGB, HSL로 변환됩니다.
HEX → RGB 어떻게 변환되나요?
#FF5733 같은 6자리 HEX를 입력하면 앞 두 자리(FF=255), 가운데(57=87), 뒤(33=51)가 각각 R, G, B 값이 됩니다. 자동으로 계산돼서 표시돼요.
투명도도 되나요?
네, rgba(255,87,51,0.5) 또는 hsla(11,100%,60%,0.5) 형식으로 알파 값 붙이면 그대로 처리됩니다. HEX도 8자리(#FF573380) 지원해요.
무료예요?
네, 가입도 필요 없고 사용 횟수 제한도 없어요.