CoderTools

색상 선택기/변환기

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

아직 기록 없음
잘 일치 ΔE: 0.00

대체 일치:

텍스트 외관 미리보기

The quick brown fox jumps over the lazy dog

대비 비율
5.48:1
WCAG AA
일반 텍스트 큰 텍스트
WCAG AAA
일반 텍스트 큰 텍스트
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 L*a*b*)

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 디자인의 색상 구성표
브랜드 디자인 및 시각적 아이덴티티
접근성 디자인 준수 검사
인쇄 디자인을 위한 색상 변환
데이터 시각화 차트 색상 지정