RGB와 HEX 중 언제 어떤 것을 사용하나요?

HEX는 짧고 간결해 대부분의 CSS에서 선호됩니다. RGB/RGBA는 투명도 조정이나 JavaScript에서 색상 값을 계산할 때 편리합니다. 두 형식 모두 현대 브라우저에서 완벽하게 지원됩니다.

CSS color() 함수란?

CSS color() 함수는 sRGB 이외의 색공간(display-p3, a98-rgb 등)을 지정할 수 있습니다. 예: color(display-p3 0.23 0.51 0.96). 모던 브라우저에서 P3 색역을 활용한 더 선명한 색상 표현이 가능합니다.

Figma나 Sketch에서 HEX 값을 가져오려면?

Figma에서는 색상 패널 우측 HEX 필드 값을 그대로 복사할 수 있습니다. Sketch는 색상 인스펙터에서 HEX 값을 제공합니다. 이 변환기에 붙여넣으면 RGB, HSL 등으로 즉시 변환됩니다.

HSL이 동적 테마 작업에 유리한 이유는?

HSL의 밝기(Lightness) 값만 조정하면 동일한 색조로 다크/라이트 모드 색상 팔레트를 쉽게 만들 수 있습니다. CSS 변수와 함께 hsl(var(--hue), 70%, 50%) 형태로 사용하면 테마 전환이 간편합니다.

색상 변환 시 정밀도 손실이 있나요?

RGB(0-255 정수)에서 HEX로의 변환은 손실이 없습니다. 그러나 HSL에서 RGB로, 다시 HEX로 변환하는 과정에서 반올림으로 인한 미세한 차이가 생길 수 있습니다.

HEX에서 알파(투명도)를 표현하려면?

8자리 HEX (#RRGGBBAA) 형식을 사용합니다. 예를 들어 #3B82F680은 약 50% 투명도의 파란색입니다. 또는 rgba(59, 130, 246, 0.5) 형식을 CSS에서 사용할 수 있습니다.

CSS 커스텀 프로퍼티(변수)와 색상을 어떻게 활용하나요?

:root { --primary: #3B82F6; } 로 정의하고 color: var(--primary); 로 사용합니다. HSL 값을 변수로 분리하면 테마 변경이 더 유연해집니다: --primary-h: 217; --primary-s: 91%; --primary-l: 60%;

브라우저 개발자 도구에서 색상을 변환하는 방법은?

Chrome DevTools에서 색상 스와치를 클릭하면 HEX, RGB, HSL, HWB 형식 간 전환이 가능합니다. Firefox도 유사한 기능을 제공합니다. 그러나 이 온라인 도구는 더 많은 형식(HSV, CSS 변수, 정수 등)으로 한 번에 변환할 수 있습니다.

RGB to HEX

RGB·HSL 색상을 HEX 코드로 변환

RGB

HSL

HSV

H °

S %

L %

H °

S %

V %

변환 결과

#3B82F6

Hash 없이 3B82F6 복사

최근 사용 색상

아직 없음