색상 선택기/변환기

색상을 선택하고 다양한 형식 간 변환

색상 선택기

색상 기록

아직 기록 없음

HEX 값

RGB 값

빨강 (R)

녹색 (G)

파랑 (B)

HSL 값

색조 (H)

채도 (S)

명도 (L)

CMYK 값

HSV 값

YCbCr 값

Lab 값

Pantone 값

잘 일치 ΔE: 0.00

대체 일치:

색상 팔레트

색상 대비 검사기

전경

배경

텍스트 외관 미리보기

The quick brown fox jumps over the lazy dog

대비 비율

5.48:1

WCAG AA

일반 텍스트 ? 큰 텍스트 ?

WCAG AAA

일반 텍스트 ? 큰 텍스트 ?

CSS 코드

color: #6366f1;
background-color: #6366f1;
border-color: #6366f1;

색상 모델 정보

디자인과 개발을 위한 색상 모델 변환 및 이해.

다양한 색상 모델을 이해하는 것은 웹 개발, UI 디자인 및 디지털 아트 제작에 필수적입니다.

지원 형식

HEX

#RRGGBB

RGB

0-255, 0-255, 0-255

HSL

0°-360°, 0-100%, 0-100%

HSV

0°-360°, 0-100%, 0-100%

CMYK

0-100%, ×4

YCbCr

16-235, 16-240, 16-240

Lab

L*: 0-100, a*/b*: -128 to +127

색상 형식 세부 정보

HEX (16진수)

HEX 색상은 # 앞에 오는 6자리 16진수 표기법을 사용합니다. 각 쌍은 빨강, 녹색 및 파랑 값(00-FF)을 나타냅니다. 짧은 표기법(#RGB)은 #RRGGBB로 확장됩니다. 알파 투명도에 대한 8자리 형식(#RRGGBBAA)을 지원합니다.

범위: #000000 (검정)부터 #FFFFFF (흰색)까지 예: #FF5733 = R:255, G:87, B:51

사용: CSS, HTML, 웹 디자인, 대부분의 프로그래밍 언어

RGB (빨강, 녹색, 파랑)

RGB 모델은 빨강, 녹색 및 파랑 빛을 결합하여 색상을 만드는 가산 색상 모델입니다. 이 모델은 화면이 빛을 방출하는 방식에 직접 매핑되어 디지털 디스플레이의 기본 색상 공간이 됩니다.

범위: 각 채널 0-255 (8비트) 또는 0.0-1.0 (정규화) 예: rgb(255, 87, 51) 또는 알파가 있는 rgba(255, 87, 51, 0.5)

사용: 화면 디스플레이, LED 조명, CSS, 디지털 이미징

HSL (색조, 채도, 명도)

HSL은 인간의 지각 측면에서 색상을 나타냅니다. 색조는 색상환의 색상 각도이고, 채도는 강도이며, 명도는 색상이 얼마나 밝거나 어두운지를 나타냅니다. 이는 색상 조작을 더 직관적으로 만듭니다.

범위: H: 0°-360°, S: 0%-100%, L: 0%-100% 예: hsl(14, 100%, 60%) = 따뜻한 오렌지색

사용: CSS, 색상 구성표 생성, 직관적인 색상 선택

HSV/HSB (색조, 채도, 명도/밝기)

HSV(HSB라고도 함)는 HSL과 유사하지만 명도 대신 명도를 사용합니다. 명도는 밝기를 나타내며 100%가 가장 밝습니다. 이 모델은 예술가들이 색상에 대해 생각하는 방식과 더 잘 일치하므로 많은 그래픽 응용 프로그램에서 선호됩니다.

범위: H: 0°-360°, S: 0%-100%, V: 0%-100% 예: hsv(14, 80%, 100%) = 선명한 오렌지

사용: Photoshop, GIMP, 그래픽 소프트웨어의 색상 선택기

CMYK (시안, 마젠타, 노랑, 검정)

CMYK는 인쇄에 사용되는 감산 색상 모델입니다. 빛을 더하는 RGB와 달리 CMYK는 흰색 용지에서 빛을 뺍니다. 'K'는 인쇄 품질을 향상시키고 잉크 사용량을 줄이기 위해 Key(검정)를 나타냅니다.

범위: 각 채널 0%-100% 예: cmyk(0%, 66%, 80%, 0%) = 오렌지 톤

사용: 인쇄 디자인, 상업 인쇄, 포장

YCbCr (휘도, 색차)

YCbCr은 루마(Y)를 크로마(Cb, Cr) 구성 요소와 분리합니다. 이 분리는 인간의 눈이 색상보다 밝기에 더 민감하기 때문에 효율적인 비디오 압축을 가능하게 합니다. JPEG, MPEG 및 방송 표준에서 일반적으로 사용됩니다.

범위: Y: 16-235 (디지털), Cb/Cr: 16-240 (128을 중심으로) 예: Y:166, Cb:90, Cr:198 ≈ 오렌지

사용: JPEG 압축, 비디오 인코딩(H.264, HEVC), TV 방송

Lab (CIE Lab*)

Lab은 인간의 시각을 근사화하도록 설계된 지각적으로 균일한 색상 공간입니다. L*은 명도를 나타내고, a*는 녹색-빨강 축을, b*는 파랑-노랑 축을 나타냅니다. 1단위의 지각적 거리는 색상에 관계없이 대략 동일하게 보입니다.

범위: L*: 0-100, a*: -128 ~ +127, b*: -128 ~ +127 예: L*:70, a*:45, b*:65 ≈ 오렌지

사용: 색상 과학, 색상 차이 계산(Delta E), 전문 색상 관리

Pantone (PMS)

Pantone Matching System(PMS)은 인쇄, 패션 및 제품 디자인에 널리 사용되는 독점 색상 표준화 시스템입니다. 각 색상에는 다양한 재료와 제조업체에서 일관된 재현을 보장하는 고유한 코드가 있습니다.

형식: PANTONE [번호] C/U/M (Coated/Uncoated/Matte) 예: PANTONE 186 C (코카콜라 레드), PANTONE 286 C (IBM 블루)

사용: 브랜드 아이덴티티, 상업 인쇄, 포장 디자인, 섬유 산업

참고: 이것은 근사 디지털 표현입니다. 실제 Pantone 색상은 인쇄 시 다를 수 있습니다.

색상 이론 기초

색상은 다양한 목적에 최적화된 다양한 '공간'에 존재합니다. 가산 모델(RGB)은 빛을 더하여 작동하는 반면, 감산 모델(CMYK)은 빛을 흡수하여 작동합니다. 지각 모델(Lab)은 인간의 시각과 일치합니다.

가산 색상 모델

RGB는 빨강, 녹색 및 파랑 빛을 결합합니다. 세 가지 모두를 최대 강도로 더하면 흰색이 생성됩니다. 이것이 화면, 프로젝터 및 디지털 디스플레이가 작동하는 방식입니다.

감산 색상 모델

CMYK는 흰색에서 빛의 파장을 흡수(감산)합니다. 모든 색상을 결합하면 (이론적으로) 검정이 생성됩니다. 이것이 잉크와 페인트가 작동하는 방식입니다.

지각 색상 모델

Lab 및 유사한 공간은 인간의 지각을 중심으로 설계되어 색상 비교 및 보정에 이상적입니다.

L* a* b*

변환 참고 사항

RGB ↔ HEX: 무손실 변환, 형식만 변경
RGB ↔ HSL/HSV: 색역 내에서 무손실, 정밀도 손실 가능
RGB ↔ CMYK: 인쇄 색역 외의 색상 손실 가능
RGB ↔ Lab: D65 광원 사용, sRGB 색상 공간 가정
RGB ↔ YCbCr: 기본적으로 BT.601 표준 사용

WCAG 대비 표준

웹 콘텐츠 접근성 지침(WCAG)은 시각 장애가 있는 사용자를 포함한 모든 사용자가 콘텐츠를 읽을 수 있도록 텍스트와 배경 간의 최소 대비 요구 사항을 정의합니다.

AA 레벨 AA: 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1

AAA 레벨 AAA: 일반 텍스트에 최소 7:1, 큰 텍스트에 4.5:1

일반적인 사용 사례

웹 개발에서 CSS 색상 설정

UI/UX 디자인의 색상 구성표

브랜드 디자인 및 시각적 아이덴티티

접근성 디자인 준수 검사

인쇄 디자인을 위한 색상 변환

데이터 시각화 차트 색상 지정

참고 자료

W3C CSS 색상 사양 MDN 웹 색상 문서 WCAG 2.1 지침

자주 묻는 질문

HEX, RGB, HSL 색상 형식의 차이점은 무엇인가요?

HEX는 RGB와 동일한 세 가지 색상 채널을 6자리 16진수로 표현한 방식(예: #FF5733)입니다. RGB는 각 채널을 0에서 255의 정수로 나타내어 코드에서 다루기 쉬운 형식입니다. HSL(색조, 체도, 명도)은 색상 각도와 선명도, 밝기를 분리하여 RGB 값을 추측하지 않고도 연한 색이나 진한 색으로 바꾸는 작업에 유연합니다. 세 형식은 모두 상호 변환이 가능합니다.

RGBA와 HSLA의 알파 채널(A)은 무엇을 의미하나요?

알파 채널은 색상의 진명도(얼마나 투명한지)를 제어합니다. A 값은 0(완전 투명)에서 1(완전 불투명)의 범위를 가지며, CSS에서는 백분율로도 표현할 수 있습니다. 예를 들어 rgba(255, 0, 0, 0.5)는 50% 투명도의 빨간색으로, 뒤에 있는 콘텐츠가 비쳐 보입니다. 알파는 오버레이, 그임자, 호버 효과 등에 널리 사용됩니다. 표준 HEX는 8자리 HEX(예: #FF573380)를 사용하지 않는 한 알파를 포함하지 않습니다.

HSL과 HSV(HSB)의 차이는 무엇인가요?

HSL과 HSV(또는 HSB: 색조, 체도, 밝기) 둘 다 색조 각도를 사용하지만 세 번째 차원의 정의가 다릅니다. HSL에서는 명도 50%에 체도 최대일 때 순수한 빈티 컰로르가 나오며 0%가 검정, 100%가 흰색입니다. HSV에서는 밝기(Value) 100%에 체도 최대일 때 순수 빈티 컰로르가 나오며, 0%는 체도에 관계없이 항상 검정입니다. HSV는 Photoshop 등 이미지 편집 소프트웨어에서 많이 사용되며, HSL은 CSS와 웹 디자인에서 주로 사용됩니다.

CMYK 색상과 RGB 색상은 어떻게 다른가요?

RGB는 가산 혼합을 사용하여 세 채널 최대가 모두 첨가되면 흰색이 됩니다. CMYK는 감산 혼합으로 잌크가 뺛을 흥수하여 어두운 색조를 만듭니다. RGB는 화면과 카메라의 기본 모델이쿠, CMYK는 인쇄 업계의 표준입니다. 인쇄용 디자인은 가능한 한 일직 CMYK로 변환하세요. 특히 강렬한 파란과 전기 녹색 같은 색상은 종이에서 딜저보일 수 있습니다.

동일한 색상이 기기나 화면마다 다르게 봅이는 이유는 무엇인가요?

색상 외관은 디스플레이 기술, 컰러 프로파일, 하드웨어 콜리브레이션의 차이로 기기마다 달리 보입니다. 각 화면에는 게어트(표현 가능한 색상 범위)가 있는데, 입문용 모니터는 sRGB의 60~72%만 커버하지만 전문가용 디스플레이는 99% sRGB 또는 P3, AdobeRGB같은 넓은 게어트를 지원합니다. ICC 프로파일은 운영 체제에 해당 디스플레이의 숫자 색상값을 어떻게 해석할지 알려줍니다. 콜리브레이션 없이는 같은 #FF5733이 화면에 따라 주황이나 주황빛글으로 매우 다르게 보읽 수 있습니다. 정밀한 색상 작업을 위해서는 하드웨어 콜리브레이션된 모니터를 사용하세요.

색상 선택기/변환기

색상 모델 정보

지원 형식

색상 형식 세부 정보

HEX (16진수)

RGB (빨강, 녹색, 파랑)

HSL (색조, 채도, 명도)

HSV/HSB (색조, 채도, 명도/밝기)

CMYK (시안, 마젠타, 노랑, 검정)

YCbCr (휘도, 색차)

Lab (CIE Lab*)

Pantone (PMS)

색상 이론 기초

가산 색상 모델

감산 색상 모델

지각 색상 모델

변환 참고 사항

WCAG 대비 표준

일반적인 사용 사례

참고 자료

자주 묻는 질문

관련 도구

이미지를 Base64로 변환기

CSS 축소기 및 정렬기

색상 팔레트 생성기

HTML 인코더/디코더

Base64 인코더/디코더

URL 인코더/디코더

빠른 메뉴

색상 선택기/변환기

색상 모델 정보

지원 형식

색상 형식 세부 정보

HEX (16진수)

RGB (빨강, 녹색, 파랑)

HSL (색조, 채도, 명도)

HSV/HSB (색조, 채도, 명도/밝기)

CMYK (시안, 마젠타, 노랑, 검정)

YCbCr (휘도, 색차)

Lab (CIE L*a*b*)

Pantone (PMS)

색상 이론 기초

가산 색상 모델

감산 색상 모델

지각 색상 모델

변환 참고 사항

WCAG 대비 표준

일반적인 사용 사례

참고 자료

자주 묻는 질문

관련 도구

이미지를 Base64로 변환기

CSS 축소기 및 정렬기

색상 팔레트 생성기

HTML 인코더/디코더

Base64 인코더/디코더

URL 인코더/디코더

빠른 메뉴

쿠키 설정

필수 쿠키

분석 쿠키

Lab (CIE Lab*)