HEX, RGB, HSL, HSV, CMYK 변환 — 실시간 미리보기, 음영, 색조 및 접근성 대비
색상 코드는 디지털 디자인의 보편적인 언어입니다. 웹사이트를 구축하든, 디지털 아트를 만들든, 모바일 앱을 디자인하든, 브랜드 색상을 선택하든, 색상 코드를 이해하는 것은 필수적입니다. 화면의 모든 색상은 빨강, 초록, 파랑 빛을 얼마나 방출할지를 알려주는 값의 조합으로 수학적으로 정의됩니다 — 그리고 모든 전문 디자인 도구는 HEX, RGB, HSL, HSV, CMYK 등 여러 방언으로 이 언어를 사용합니다.
색상 코드 및 색상 공간 이해하기
색상 코드는 무엇인가요?
색상 코드는 특정 색상을 숫자 값 또는 값 집합으로 표현하는 표준화된 방법입니다. 디지털 디스플레이는 빨강, 초록, 파랑 빛을 다양한 강도로 혼합하여 가시적인 색상을 생성합니다 — 이를 가산 색 혼합이라고 합니다. HEX 코드는 이러한 RGB 값을 16진수 표기법으로 표현합니다: #FF0000은 최대 빨강(FF), 초록 없음(00), 파랑 없음(00)을 의미합니다. RGB 표기법은 같은 값을 0에서 255까지의 십진수 정수로 표현합니다. HSL과 HSV는 색조(색상 유형)를 채도(색상 풍부함) 및 밝기 또는 값(밝기)과 분리하여 인간이 이해하기 더 직관적입니다. CMYK는 인쇄에 사용되며 청록, 마젠타, 노랑 및 검정 잉크를 사용하여 감산 색 혼합을 수행합니다. 각 형식은 수학적으로 동등하며 — 모두 같은 색상 집합을 설명하지만, 서로 다른 사용 사례에 최적화된 다른 표기법으로 표현됩니다.
색상 변환은 어떻게 계산되나요?
색상 형식 간 변환은 정밀한 수학 공식을 포함합니다. HEX에서 RGB로의 변환은 간단합니다: 각 16진수 숫자 쌍(00-FF)은 16진수 산술을 사용하여 십진수 정수(0-255)로 변환됩니다. RGB에서 HSL로의 변환은 RGB 값을 0-1로 정규화하고, 최대 및 최소 채널 값을 찾고, 델타를 계산하고, 어떤 채널이 우세한지에 따라 색조를 도출하며, 델타를 밝기에 대한 비율로 사용하여 채도를 계산하고, 최대 및 최소의 평균으로 밝기를 계산합니다. RGB에서 CMYK로의 변환은 먼저 키(검정) 구성 요소를 최대 RGB 비율의 1에서 빼서 식별한 다음, 남은 잉크에서 C, M, Y를 도출합니다. CMYK에서 RGB로의 변환은 이를 반전시킵니다: 각 채널은 255에 (1에서 잉크 비율을 뺀 값)와 (1에서 검정 비율을 뺀 값)을 곱하여 계산됩니다. 모든 변환은 표시 가능한 색상의 전체 범위에 걸쳐 수학적 정밀성을 유지합니다.
색상 코드가 디자인에 중요한 이유는 무엇인가요?
색상 코드의 일관된 사용은 전문 디자인 작업의 기본입니다. 정확한 색상 코드가 없으면 색상이 디자인 도구, 브라우저 및 인쇄 환경 간에 이동할 때 변동할 수 있어 브랜드 일관성이 깨질 수 있습니다. 웹 디자이너는 HEX 및 RGB 코드를 사용하여 브라우저와 장치 간에 픽셀 완벽한 색상 일치를 보장합니다. 인쇄 디자이너는 CMYK 값을 사용하여 인쇄소에 정확한 잉크 비율을 전달합니다. 화면과 프린터는 완전히 다른 색 혼합 방법을 사용하기 때문입니다. 접근성 지침(WCAG)은 저시력 또는 색맹인 사람들이 읽을 수 있도록 텍스트와 배경 색상 간의 최소 대비 비율을 요구합니다 — 대비 비율 확인은 많은 조직의 법적 요구 사항입니다. 디자인 시스템은 제품 간의 일관성을 유지하기 위해 정확하게 정의된 색상 토큰(일반적으로 HEX 또는 HSL 값)을 사용하며, HSL은 색조를 변경하지 않고 색상을 10% 더 밝게 만드는 것과 같은 프로그래밍적 조정을 허용하기 때문에 종종 선호됩니다.
색상 공간의 제한 및 고려 사항
HEX, RGB, HSL 및 CMYK는 대부분의 실용적인 디자인 요구를 충족하지만 이해해야 할 중요한 제한 사항이 있습니다. RGB 색상 모델은 장치 의존적입니다 — 동일한 RGB 값이 모니터 보정, 색상 프로필(sRGB 대 Display P3) 및 주변 조명에 따라 서로 다른 화면에서 다르게 보일 수 있습니다. 이 도구에 표시된 CMYK 값은 표준 sRGB에서 CMYK로의 변환에 대한 근사값입니다; 전문 인쇄 작업은 정확한 팬톤 매칭을 위해 Adobe Illustrator 또는 InDesign과 같은 도구로 색상 프로필 관리를 요구하는 경우가 많습니다. 140개의 CSS 명명 색상은 CSS 색상 사양에 의해 정의되며 정확합니다 — 그러나 '가장 가까운 명명 색상' 기능은 RGB 공간에서 유클리드 거리를 사용하여 인지적 근사를 제공합니다. 현대 색상 공간인 OKLCH 및 OKLAB(여기에는 포함되지 않음)은 더 인지적으로 균일한 그라디언트를 제공하지만 CSS 색상 레벨 4에 대한 브라우저 지원이 필요합니다.
색상 코드 차트 사용 방법
색상 입력
HEX 필드에 HEX 코드를 직접 입력하세요 (예: #FF5733), 10진수 RGB 값(각각 0–255)을 입력하거나 HSL 또는 CMYK 값을 입력하거나 색상 견본을 클릭하여 시각적 색상 선택기를 엽니다. '무작위 색상'을 클릭하여 즉각적인 영감을 받을 수도 있습니다. 모든 입력 방법은 입력하는 대로 결과를 실시간으로 업데이트합니다.
모든 변환된 형식 보기
결과 패널은 HEX, RGB, HSL, HSV, CMYK 및 정수 형식으로 색상을 동시에 보여줍니다. 각 형식에는 필요한 내용을 정확히 복사할 수 있는 복사 버튼이 있습니다. '모두 복사' 버튼을 사용하여 모든 형식을 한 번에 복사하거나 문서화를 위해 CSV로 내보낼 수 있습니다.
음영, 색조 생성 및 접근성 확인
결과를 아래로 스크롤하여 9개의 음영(더 어두운 변형)과 9개의 색조(더 밝은 변형) 스트립을 확인하세요 — 변형을 변환기에 로드하려면 어떤 견본이든 클릭하세요. WCAG 대비 섹션은 흰색과 검은색에 대한 대비 비율을 보여주며, AA/AAA 통과 지표로 색상이 접근성 기준을 충족하는지 확인합니다.
명명된 색상 참조 탐색
'명명된 색상 차트' 탭으로 전환하여 가족별로 정리된 140개의 CSS 명명된 색상을 탐색하세요 (빨강, 초록, 파랑, 보라 등). 각 행은 색상 견본, CSS 이름, HEX 코드 및 RGB 값을 보여줍니다. 어떤 행에서든 '색상 사용'을 클릭하여 즉시 변환기에 로드하세요.
자주 묻는 질문
HEX와 RGB 색상 코드의 차이는 무엇인가요?
HEX와 RGB는 서로 다른 표기 시스템을 사용하여 정확히 동일한 색상을 설명합니다. RGB는 빨강, 초록 및 파랑 채널을 0에서 255까지의 세 개의 10진 정수로 분리합니다. 예를 들어, rgb(59, 130, 246)는 중간 파랑입니다. HEX는 이러한 세 가지 값을 16진수(기수-16)로 나타냅니다: 59는 3B가 되고, 130은 82가 되며, 246은 F6이 되어 #3B82F6이 됩니다. HEX는 더 간결하며 HTML 및 CSS의 표준 형식입니다. RGB는 수학적으로 읽기 쉽고 CSS 및 그래픽 디자인 소프트웨어에서 사용됩니다. 두 형식은 동등하며, 한 형식으로 표현할 수 있는 모든 색상은 다른 형식으로도 표현할 수 있습니다.
HSL이 HEX 또는 RGB보다 디자인 조정에 더 나은 이유는 무엇인가요?
HSL(색상, 채도, 밝기)은 순수한 색상 정체성(색상, 0–360도)과 얼마나 생생한지(채도), 얼마나 밝거나 어두운지(밝기)를 분리합니다. 이는 디자인 작업에 훨씬 더 직관적입니다. 예를 들어, 색상을 20% 더 밝게 만들려면 L 값을 20만큼 증가시키면 됩니다 — HEX 또는 RGB에서는 동일한 작업이 모든 세 개의 채널을 별도로 계산해야 합니다. HSL은 또한 인간이 색상을 자연스럽게 설명하는 방식입니다: '밝고 중간 밝기의 파랑'은 높은 채도와 중간 범위의 밝기를 가진 파란색 색조에 직접적으로 매핑됩니다. CSS는 기본적으로 hsl() 표기법을 지원하며, Figma와 같은 디자인 도구는 내부적으로 HSL 유사 모델을 사용합니다. 많은 디자인 시스템이 이 이유로 HSL로 색상 토큰을 정의합니다.
CMYK란 무엇이며 언제 사용해야 하나요?
CMYK는 청록, 마젠타, 노랑 및 키(검정)를 의미합니다 — 색상 인쇄에 사용되는 네 가지 잉크 색상입니다. RGB와 달리, CMYK는 특정 파장을 흡수하는 잉크를 겹쳐서 빛을 빼앗는 방식(감소 혼합)으로 작동합니다. 이 때문에 화면에서 생생하게 보이는 색상이 인쇄될 때는 더 흐릿하게 보일 수 있습니다 — RGB 색역(표시 가능한 색상의 범위)은 CMYK 인쇄가 재현할 수 있는 것보다 넓습니다. 전문 인쇄를 위한 파일을 준비할 때는 명함, 브로셔, 포스터 및 포장 등을 포함하여 CMYK 값을 사용하세요. 대부분의 전문 인쇄소 및 디자인 소프트웨어(Adobe Illustrator, InDesign)는 인쇄 프로젝트를 위해 CMYK로 작업합니다. 웹 및 화면 디자인의 경우 HEX 또는 RGB를 사용하세요.
WCAG 대비 비율이란 무엇이며 왜 중요한가요?
WCAG(웹 콘텐츠 접근성 지침) 대비 비율은 저시력 또는 색맹인 사람이 전경색과 배경색이 얼마나 다르게 보이는지를 측정합니다. 이는 상대적 밝기를 사용하여 계산됩니다 — 인지된 밝기의 측정입니다. 1:1 비율은 대비가 없음을 의미하며(같은 색상), 21:1은 최대 대비(흰색 위의 검정색)입니다. WCAG AA 표준은 일반 텍스트에 대해 4.5:1, 큰 텍스트에 대해 3:1을 요구합니다. WCAG AAA는 7:1을 요구합니다. 이러한 기준을 충족하면 시각 장애인이 웹사이트를 읽을 수 있도록 보장되며, ADA(장애인법) 및 WCAG 2.1/2.2 기준에 대한 법적 준수를 위해 종종 필요합니다. 이 도구는 입력한 모든 색상에 대해 흰색과 검은색에 대한 대비 비율을 자동으로 계산합니다.
음영과 색조는 어떻게 생성되나요?
음영은 색상을 검정과 혼합하여 생성됩니다 — 수학적으로는 각 RGB 채널을 1보다 작은 계수로 곱하는 방식입니다. 예를 들어, 빨강(255, 0, 0)의 50% 음영은 (128, 0, 0)입니다. 색조는 흰색과 혼합하여 생성됩니다 — 원래 채널 값을 255로 혼합합니다. 빨강의 50% 색조는 (255, 128, 128)입니다. 이 도구는 9개의 고르게 분포된 음영(거의 검정색에서 원래 색상까지)과 9개의 고르게 분포된 색조(원래 색상에서 거의 흰색까지)를 생성하여 총 19개의 변형을 제공합니다. 이러한 스트립은 디자인 시스템 팔레트를 구축하는 데 매우 유용합니다 — 예를 들어, Tailwind CSS는 각 22개 색상 계열에 대해 50(가장 밝은)에서 950(가장 어두운)까지 유사한 10단계 음영 스케일을 사용합니다.
140개의 CSS 명명된 색상은 무엇인가요?
140개의 CSS 명명된 색상은 CSS 색상 사양(CSS Colors Level 4)에서 정의된 색상 키워드 집합입니다. 여기에는 '빨강', '파랑', '초록'과 같은 고전적인 웹 색상과 '코넬플라워 블루', '라벤더 블러시', '파파야 휘프'와 같은 설명적인 이름이 포함됩니다. 각 이름은 모든 브라우저와 운영 체제에서 일관된 특정 HEX/RGB 값에 매핑됩니다. 이들은 유닉스 환경에서 사용되는 X11 색상 시스템에서 유래되었으며, 이후 CSS에 대해 표준화되었습니다. 일반적인 색상에 편리하지만, 명명된 색상은 24비트 RGB로 표현할 수 있는 1,670만 색상의 극히 일부만을 포함합니다. 정밀한 디자인 작업을 위해서는 항상 HEX 또는 RGB 값을 사용하고, 명명된 색상에 의존하지 마세요. 이름이 오해를 불러일으킬 수 있습니다(예: '회색'과 '그레이'는 약간 다릅니다).