TToolkio
모든 도구블로그

색상 코드 변환기

HEX, RGB, HSL 색상 코드를 실시간으로 변환하세요.

hsl(217, 91%, 60%)

색상 코드 변환기는 HEX와 RGB를 양방향으로 바꾸고 HSL 값도 함께 보여 줘요. 웹 디자인·CSS·브랜드 가이드 정리에 매번 손이 가요.

각 모델이 쓰이는 곳

  • HEX (#FF5733): 웹·앱 표준. 가장 짧고 보편적
  • RGB (255,87,51): 디지털 화면. 알파(투명도) 표현 가능 → RGBA
  • HSL (12°,100%,60%): 디자이너 친화적. 색조·채도·명도 직관적
  • CMYK (0,66,80,0): 인쇄 전용. RGB와 색역(gamut)이 달라서 변환 시 일부 색 사라짐
  • HSV / HSB: Photoshop·Figma 색 선택기 기본

이 도구에서 바로 바꿀 수 있는 건 HEX·RGB이고, HSL은 결과로 함께 보여 줘요.

RGB ↔ CMYK 변환의 한계

RGB(빛 합성)와 CMYK(잉크 흡수)는 표현 가능한 색 범위(gamut)가 달라요. 형광 색·진한 청록은 RGB에서만 표현 가능하고 인쇄하면 흐려져요.

해결 방법:

  • 소프트 프루핑: Photoshop View → Proof Setup → Working CMYK로 인쇄 모습 미리보기
  • ICC 프로필 적용: 프린터·잉크에 맞춘 변환 프로필 사용
  • 브랜드 컬러는 별도 spec: HEX·CMYK·Pantone 따로 정의해 두기

접근성 — 색 대비 비율

WCAG 가이드는 텍스트 가독성을 위한 최소 대비를 정의해요.

  • AA 일반 텍스트: 4.5:1 이상
  • AA 큰 텍스트(18pt+ / 14pt+ 굵게): 3:1
  • AAA 일반 텍스트: 7:1

흰 배경의 회색 텍스트(#999)는 대비 2.85:1로 AA 미달이에요. 본문은 #555 이하(#444 이하 권장).

자주 묻는 질문

HEX 3자리 #FFF는 #FFFFFF 같나요?

네. CSS는 3자리 HEX를 6자리로 자동 확장해요(#F → #FF). 다만 #ABC = #AABBCC라서 임의 색은 표현 못 해요. 이 도구의 HEX 입력란은 6자리만 인식해요.

RGB와 sRGB 차이는?

RGB는 추상적 모델, sRGB는 구체 색공간(IEC 61966-2-1)이에요. 웹은 사실상 sRGB가 표준이고, 광고·영상은 P3·Rec.2020 같은 더 넓은 색공간을 써요.

투명도는 어떻게 표현해요?

RGBA로 0~1 알파, 또는 8자리 HEX(#RRGGBBAA)로 표현. CSS는 둘 다 지원해요. rgba(255,87,51,0.5) ≡ #FF573380.

디자인 시안의 CMYK 색이 화면과 달라요

정상이에요. 화면(RGB)은 빛을 더해 색을 만들고 인쇄(CMYK)는 잉크를 더해 빛을 빼는 방식이라 표현 범위(gamut)가 달라요. 형광·진한 청록은 인쇄하면 흐려져요. 정확한 색이 중요하면 HEX·CMYK·Pantone을 따로 정의하고, 인쇄소에 ICC 프로필을 확인하세요.

함께 보면 좋은 도구

출처 · 근거 자료