사용 방법
- 입력칸에 색상 값을 붙여넣습니다.
#ff5b1f,rgb(255, 91, 31),hsl(16 100% 56%),oklch(68% 0.21 38)등 어느 형식이든 알아서 읽습니다. - 오른쪽 색 고르기 칸을 누르면 브라우저 색상 선택기로 직접 고를 수도 있습니다.
- 아래 표에 6가지 형식의 값이 나오고, 각 줄의 복사 버튼으로 바로 가져갈 수 있습니다.
- 미리보기 위의 글자색은 흰색·검정 중 더 잘 읽히는 쪽으로 자동으로 바뀌고, 대비 수치도 함께 나옵니다.
색상 형식 비교
| 형식 | 예시 | 쓰는 곳 |
|---|---|---|
| HEX | #ff5b1f |
웹·디자인 툴에서 가장 흔한 표기. 빨강·초록·파랑을 16진수 두 자리씩 |
| RGB | rgb(255, 91, 31) |
화면의 빨강·초록·파랑 빛 세기 (0~255) |
| HSL | hsl(16, 100%, 56%) |
색상각·채도·밝기. 같은 색의 밝기만 바꾸기 쉬움 |
| HSV (HSB) | hsv(16, 88%, 100%) |
포토샵 등 색상 선택기의 기준 |
| CMYK | cmyk(0%, 64%, 88%, 0%) |
인쇄 잉크 비율 (청록·자홍·노랑·검정) |
| OKLCH | oklch(68.35% 0.21 37.96) |
사람 눈에 고르게 느껴지도록 만든 색 공간. CSS에서 oklch()로 사용 |
실제 예시
#3366cc를 넣으면 rgb(51, 102, 204), hsl(220, 60%, 50%), cmyk(75%, 50%, 0%, 20%)이 나옵니다. 흰 배경 대비는 약 5.4:1이라 본문 글자색으로 써도 웹 접근성 기준(4.5:1)을 넘습니다.
주의할 점
- CMYK는 단순 계산값입니다. 실제 인쇄 색은 용지·잉크·인쇄소의 색상 프로파일에 따라 달라지므로, 인쇄물은 인쇄소가 안내하는 값으로 확인하세요.
- HSL·HSV를 정수로 반올림하면 HEX로 되돌렸을 때 한 단계(예:
5b→5a) 차이가 날 수 있습니다. 정확한 값이 필요하면 HEX나 RGB를 기준으로 쓰세요. - OKLCH는 일반 모니터(sRGB)가 표현하지 못하는 색도 적을 수 있습니다. 그런 값은 가장 가까운 색으로 맞추고 안내를 띄웁니다.
- 명도 대비는 WCAG 기준으로 본문 글자 4.5:1, 큰 글자 3:1 이상이면 AA를 충족합니다. 어울리는 색 조합은 컬러 팔레트 생성기에서 만들 수 있습니다.
자주 묻는 질문
HEX를 RGB로 직접 바꾸는 방법은?
여섯 자리를 두 자리씩 나눠 16진수를 10진수로 바꿉니다. #ff5b1f는 ff=255, 5b=91, 1f=31이라 rgb(255, 91, 31)입니다. 세 자리 #f53은 각 자리를 두 번 쓴 #ff5533과 같습니다.
투명도(알파)도 바뀌나요?
rgba(…, 0.5)처럼 알파가 붙은 값도 읽지만, 변환 결과에는 불투명한 색만 보여줍니다.