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

HEX 색상 코드는 #RRGGBB 형식으로 빨강(R), 초록(G), 파랑(B)을 각각 16진수 두 자리로 표현한 웹 표준 색상 형식입니다. #000000은 검정, #ffffff는 흰색입니다.

3자리 HEX와 6자리 HEX의 차이는?

#RGB는 #RRGGBB의 축약형으로, 각 자리를 두 번 반복한 것과 같습니다. #f0a는 #ff00aa와 동일합니다. 6자리가 더 정확한 표현이지만, 두 형식 모두 CSS에서 지원됩니다.

8자리 HEX의 마지막 두 자리(AA)는 알파(투명도) 채널을 나타냅니다. #ff000080은 50% 투명도의 빨간색입니다. 모던 브라우저에서 CSS에서 직접 사용할 수 있습니다.

두 형식 모두 CSS에서 완벽하게 지원됩니다. HEX는 짧고 간결하며 대부분의 디자인 도구에서 기본 형식입니다. RGB/RGBA는 투명도 조정이나 JavaScript로 색상 값을 계산할 때 더 유용합니다.

HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)로 색상을 표현하므로 직관적인 수정이 가능합니다. 밝기만 조정해 다크/라이트 테마를 만들거나, 색조만 변경해 색상 변형을 만들기 쉽습니다.

CSS는 HEX(#RGB, #RRGGBB, #RRGGBBAA), rgb(), rgba(), hsl(), hsla(), oklch(), color() 등 다양한 형식을 지원합니다. 최신 CSS는 P3 색공간도 지원합니다.

sRGB는 웹 표준 색공간으로 HEX와 RGB가 이를 기반으로 합니다. P3는 더 넓은 색영역을 가진 색공간으로, 최신 Mac과 iPhone 디스플레이에서 더 선명한 색상을 표시할 수 있습니다. CSS color() 함수로 P3 색상을 사용할 수 있습니다.

CSS는 red, blue, tomato 등 140가지 이상의 색상 이름을 지원합니다. 색상 이름은 읽기 쉽지만 정확한 색상 값을 지정하기 어렵습니다. HEX 코드는 정확한 색상을 16진수로 표현해 디자인 도구와의 호환성이 높습니다.

HEX 색상 코드를 RGB·RGBA·HSL로 변환

HEX 입력

#RGB, #RRGGBB, #RRGGBBAA 형식 지원

Alpha 1.0

RGB rgb(59, 130, 246) 복사

RGBA rgba(59, 130, 246, 1.0) 복사

HSL hsl(217, 91%, 60%) 복사

HSB/HSV hsv(217, 76%, 96%) 복사

CSS Var --color: #3B82F6; 복사

Integer 3900150 복사

최근 사용 색상

아직 없음