liminfo

Color Converter

HEX/RGB/HSL/CMYK 색상 변환

Tailwind:
CSS:

Color Converter 소개

Color Converter는 HEX, RGB, HSL, CMYK 색상 형식을 실시간으로 변환하는 무료 온라인 도구입니다. 어떤 형식으로든 색상 값을 입력하면 나머지 모든 형식이 즉시 업데이트됩니다. HEX 코드를 입력하거나, RGB 값을 조정하거나, HSL 값을 설정하거나, CMYK 퍼센트를 입력하면 됩니다. 변경 사항이 적용된 정확한 색상을 실시간 미리보기로 확인할 수 있으며, 내장 컬러 피커로 원하는 색상을 시각적으로 선택할 수도 있습니다.

CSS를 작성하는 웹 개발자, 디자인 시스템을 구축하는 UI/UX 디자이너, 인쇄용 파일을 준비하는 그래픽 디자이너 등 디지털(화면)과 인쇄 형식 간 색상 변환이 필요한 모든 분에게 유용합니다. 포토샵의 CMYK 값을 CSS hex 코드로 변환하거나, CSS 애니메이션을 위해 RGB 색상의 HSL 값을 찾거나, 웹 색상이 인쇄 CMYK 값으로 어떻게 변환되는지 확인할 수 있습니다.

모든 색상 계산은 서버 통신 없이 브라우저 내에서 수행됩니다. 변환 알고리즘은 색상 공간 간의 표준 수학적 변환을 구현하여 일관되고 정확한 결과를 보장합니다.

주요 기능

  • HEX, RGB, HSL, CMYK 네 가지 색상 형식 간 즉시 동기화되는 양방향 변환
  • 전체 스펙트럼 팔레트에서 색상을 시각적으로 선택할 수 있는 네이티브 컬러 피커
  • 값 변경 시 실시간으로 업데이트되는 색상 미리보기 견본
  • RGB 채널별 개별 입력(0-255) 및 입력값 유효성 검증
  • 색상(0-360), 채도(0-100%), 밝기(0-100%)를 개별 조절하는 HSL 입력
  • 인쇄 작업 흐름을 위한 CMYK 퍼센트 입력(C, M, Y, K 각 0-100%)
  • 각 형식별 원클릭 복사 버튼 — rgb(59, 130, 246), hsl(217, 91%, 60%) 등 CSS에 바로 사용 가능한 값 복사
  • 어떤 형식이든 수정하면 나머지 형식이 자동으로 재계산되는 양방향 편집

자주 묻는 질문

HEX 색상 코드란 무엇인가요?

HEX 색상 코드는 HTML, CSS, 웹 디자인에서 사용하는 6자리 16진수 색상 표현입니다. #RRGGBB 형식으로, 각 두 자리가 빨강, 초록, 파랑 채널의 강도를 00(0)에서 FF(255)까지 나타냅니다. 예를 들어 #FF0000은 순수 빨강(R=255, G=0, B=0), #00FF00은 순수 초록, #3B82F6은 중간 파랑입니다. HEX 코드는 CSS에서 색상을 지정하는 가장 일반적인 방법으로, 16진법으로 표기한 RGB 값과 동일합니다.

RGB와 CMYK의 차이점은 무엇인가요?

RGB(빨강, 초록, 파랑)는 화면과 디지털 디스플레이에 사용되는 가산혼합 색상 모델입니다. 빛을 더해 색상을 만들며, 세 색상을 최대 강도로 합치면 흰색이 됩니다. CMYK(시안, 마젠타, 노랑, 키/검정)는 인쇄에 사용되는 감산혼합 색상 모델입니다. 잉크로 빛을 흡수하여 색상을 만들며, 네 가지 잉크를 모두 합치면 검정이 됩니다. 화면에서 선명하게 보이는 색상(RGB)이 인쇄물(CMYK)에서는 탁하게 보일 수 있는데, 화면은 빛을 방출하지만 종이는 빛을 반사하기 때문입니다.

HEX를 RGB로 어떻게 변환하나요?

HEX를 RGB로 변환하려면 6자리 16진수 문자열을 세 쌍으로 나누고 각 쌍을 16진수에서 10진수로 변환합니다. 예를 들어 #3B82F6은 3B, 82, F6으로 나뉩니다. 변환하면: 3B = 3x16+11 = 59, 82 = 8x16+2 = 130, F6 = 15x16+6 = 246입니다. 따라서 #3B82F6 = rgb(59, 130, 246)입니다. 이 도구에서는 HEX 코드를 입력하면 RGB 값이 즉시 표시됩니다.

RGB나 HEX 대신 HSL을 사용해야 할 때는 언제인가요?

HSL(색상, 채도, 밝기)은 사람이 색상을 인지하는 방식과 직접 대응되므로 색상 변형과 테마를 만들 때 더 직관적입니다. 색상(Hue, 0-360)은 색상환에서의 각도(0=빨강, 120=초록, 240=파랑), 채도(Saturation, 0-100%)는 색상의 선명도(0%=회색, 100%=선명), 밝기(Lightness, 0-100%)는 명암(0%=검정, 50%=순색, 100%=흰색)입니다. CSS 호버 효과(밝기만 조정), 일관된 색상 팔레트 구성(같은 색상, 다양한 채도/밝기), 색상 관계 파악에 이상적입니다.

웹 디자인과 인쇄 디자인에서 사용하는 색 공간은 어떻게 다른가요?

웹 디자인은 화면이 빨강, 초록, 파랑 서브픽셀로 빛을 발산하므로 RGB 기반 색 공간을 사용합니다. CSS는 HEX(#3B82F6), rgb() 함수 표기법, hsl() 표기법을 지원합니다. 인쇄 디자인은 프린터가 시안, 마젠타, 노랑, 검정 잉크를 적용하므로 CMYK를 사용합니다. 전문 인쇄 작업에서는 정확한 색상 일치를 위해 ICC 색상 프로파일(FOGRA39, GRACoL 등)을 사용합니다. 웹 디자인을 인쇄물로 변환할 때 색상을 RGB에서 CMYK로 변환해야 하며, 특히 CMYK 색역 밖에 있는 밝은 파랑과 초록에서 눈에 띄는 색상 차이가 발생할 수 있습니다.

화면에서 보는 색상과 인쇄물의 색상이 다르게 보이는 이유는 무엇인가요?

화면과 인쇄는 근본적으로 다른 색상 재현 방식을 사용합니다. 화면은 가산혼합 RGB 색상(빛 방출)으로 더 넓은 색역을 가지고, 인쇄는 감산혼합 CMYK 색상(반사된 종이에서 빛 흡수)으로 더 좁은 색역을 가집니다. 일렉트릭 블루(#0000FF)나 네온 그린(#00FF00) 같은 밝고 채도 높은 색상은 CMYK 잉크로 재현할 수 없어 가장 가까운 색상으로 근사됩니다. 또한 종이 종류, 잉크 품질, 주변 조명, 모니터 보정 등도 색상 인식에 영향을 미칩니다.

HEX에서 CMYK로의 변환은 어떻게 이루어지나요?

HEX에서 CMYK 변환은 두 단계로 이루어집니다. 먼저 HEX 코드를 RGB 값으로 변환합니다(16진수 문자열을 R, G, B 10진수 값으로 분리). 그런 다음 RGB를 CMYK로 변환하는 공식을 적용합니다: K = 1 - max(R/255, G/255, B/255), C = (1 - R/255 - K) / (1 - K), M = (1 - G/255 - K) / (1 - K), Y = (1 - B/255 - K) / (1 - K). 결과는 퍼센트(0-100%)로 표현됩니다. 이것은 수학적 변환이며, 실제 인쇄 CMYK 값은 ICC 색상 프로파일과 잉크/종이 특성에 따라 달라질 수 있습니다.

이 도구가 출력하는 CSS 색상 형식은 무엇인가요?

이 도구는 CSS 호환 형식으로 색상을 출력합니다: HEX 표기법(#3B82F6), RGB 함수 표기법(rgb(59, 130, 246)), HSL 함수 표기법(hsl(217, 91%, 60%)). 각 형식에 복사 버튼이 있어 CSS에 바로 사용할 수 있는 값을 클립보드에 복사하여 스타일시트에 바로 붙여넣을 수 있습니다. CMYK 출력(cmyk(76%, 47%, 0%, 4%))은 인쇄 참고용으로 제공되며, CMYK는 CSS 색상 형식이 아닙니다.