색상 변환기

색상 미리보기 (박스 클릭)

#164e63

HEX

RGB

0-255

HSL

0-360

0-100%

HEX -

RGB -

HSL -

친구에게 공유하기

사용 방법

1 HEX 코드(예: #FF5733), RGB 값(예: 255, 87, 51), 또는 HSL 값 중 하나를 입력합니다.
2 입력과 동시에 나머지 색상 형식으로 자동 변환됩니다.
3 색상 미리보기와 함께 변환된 값을 복사할 수 있습니다.

주요 색상 모델 (HEX, RGB, HSL, CMYK)

모델	주요 용도	특징
HEX	웹 CSS 스타일링	#RRGGBB 16진수 표현, 간결함
RGB	디지털 디스플레이, 웹	빛의 가산 혼합, 0~255 값, RGBA로 투명도 조절
HSL	직관적 색상 조작, 웹 애니메이션	색상·채도·명도 분리 조절, HSLA 투명도
CMYK	인쇄물(명함·전단지)	잉크의 감산 혼합, 웹에서는 거의 미사용

HEX ↔ RGB 변환 공식

RGB→HEX: 각 R·G·B 값을 16진수 변환 후 연결. 예: rgb(23, 154, 210) → #179AD2
HEX→RGB: #을 제외하고 2자리씩 10진수로 변환. 예: #DA70D6 → rgb(218, 112, 214)

웹 접근성 색상 대비 기준 (WCAG 2.1)

일반 텍스트는 전경색과 배경색의 명도 대비 4.5:1 이상, 큰 텍스트(18pt↑ 또는 14pt↑ 볼드)는 3:1 이상이어야 합니다. 저시력자·색약자를 위해 색상 선택 시 반드시 확인하세요.

웹 디자인 색상 조합 팁

보색(Complementary): 색상환 맞은편 색 조합(예: 빨강+청록) → 강렬한 강조 효과. 유사색(Analogous): 인접한 2~3색(예: 노랑·주황) → 편안하고 통일감 있는 디자인. 삼색(Triadic): 정삼각형 위치 3색 → 균형 잡히고 다채로운 느낌.

자주 묻는 질문

Q HEX, RGB, HSL의 차이는 무엇인가요?

HEX는 16진수 6자리로 색상을 표현(#RRGGBB), RGB는 빨강/초록/파랑의 조합(0~255), HSL은 색상(Hue)/채도(Saturation)/명도(Lightness)로 표현합니다. 모두 같은 색상을 다른 방식으로 나타냅니다.

Q 웹 개발에서 어떤 색상 형식을 사용해야 하나요?

CSS에서 HEX, RGB, HSL 모두 사용 가능합니다. HEX가 가장 간결하고, 투명도가 필요하면 RGBA를 사용합니다. HSL은 색상 조정(밝기, 채도 변경)이 직관적이어서 디자인 시스템에 유용합니다.

Q RGBA의 A는 무엇인가요?

A는 Alpha(투명도) 값으로 0(완전 투명)~1(불투명) 사이의 값입니다. rgba(255, 0, 0, 0.5)는 50% 투명한 빨간색을 의미합니다. HEX에서는 #FF000080처럼 뒤에 2자리를 추가하여 표현합니다.

Q 색상 피커에서 선택한 색상을 코드로 변환하려면?

브라우저 개발자 도구(F12)의 Elements 탭에서 CSS 색상 속성 클릭 시 HEX/RGB/HSL로 전환 가능합니다. Figma·Adobe XD 등 디자인 툴에서도 색상 패널에서 코드 형식을 전환할 수 있습니다. 이 계산기로 HEX ↔ RGB ↔ HSL 자유롭게 변환하세요.