Design Tools

색상 코드 변환기

HEX, RGB, HSL, CMYK 등 다양한 색상 코드를 변환하고 미리 보기 할 수 있는 도구입니다.

Color Picker

#3B82F6royalblue

Color Values

#
r:
g:
b:
r:
g:
b:
a:
h:
s:
l:
h:
s:
l:
a:
c:
m:
y:
k:

색상 표기 변환 기준

같은 색을 다른 형식으로 적어야 할 때

하나의 색상을 HEX, RGB, RGBA, HSL, HSLA, CMYK 값으로 함께 확인하고 변환하는 디자인·개발 보조 도구입니다.

최종 기능 검토일:

색상 코드를 변환하는 순서

  1. 컬러 피커 또는 색상 값을 입력합니다.
  2. 연동되어 갱신되는 각 색상 형식을 확인합니다.
  3. 필요한 값을 복사해 디자인이나 CSS 작업에 사용합니다.

HEX 값을 RGB와 HSL로 옮긴 결과

입력
#FF0000
결과
RGB 255, 0, 0 / HSL 0, 100%, 50%

동일한 빨간색을 웹에서 사용하는 여러 색상 모델로 표현한 예입니다.

변환이 필요한 작업 환경

  • CSS HEX를 RGB로 바꿀 때
  • 불투명도가 포함된 RGBA 값을 만들 때
  • 화면 색상을 CMYK 참고값으로 확인할 때

다룰 수 있는 색상 표기

  • HEX
  • RGB·RGBA
  • HSL·HSLA
  • CMYK 참고 변환

변환에서 값이 달라 보이는 이유

  • 화면 RGB를 인쇄 CMYK로 바꾼 값은 인쇄 프로파일에 따른 실제 출력색과 다를 수 있습니다.
  • 범위를 벗어난 숫자는 허용 범위로 조정됩니다.

입력한 색상값의 처리 범위

모든 계산은 브라우저에서 수행되며 입력한 색상값은 서버로 전송되지 않습니다.

왕복 변환 오차를 확인한 방법

검정, 흰색, 기본 원색과 투명도 경계값을 각 형식 사이에서 변환해 결과 범위를 확인합니다.

색상 코드에서 자주 나오는 질문

CMYK 값이 인쇄물과 정확히 같나요?

아닙니다. 일반 수식 기반 참고값이며 실제 인쇄에는 색상 프로파일과 교정이 필요합니다.

알파 값은 어떤 범위인가요?

0은 완전 투명, 1은 완전 불투명입니다.

HEX 8자리도 지원하나요?

현재 화면에서 제공하는 입력 형식과 알파 필드를 사용해 투명도를 지정하는 방식을 권장합니다.