색상 변환기
HEX, RGB, HSL 간 실시간 변환.
색상 변환기: HEX, RGB, HSL
색상 변환기를 사용하면 가장 많이 사용되는 세 가지 웹 색상 형식 간에 변환할 수 있습니다: HEX(#FF5733), RGB(rgb(255, 87, 51)), HSL(hsl(14, 100%, 60%)). 세 형식 모두 정확히 같은 1,670만 가지 색상을 표현하며, 표기법만 다릅니다.
HEX 형식은 CSS에서 가장 널리 사용되며, 16진수로 각 색상 채널을 2자리로 표현합니다. RGB는 빨강, 초록, 파랑을 각각 0~255의 범위로 정의합니다. HSL은 색조(0-360도), 채도(0-100%), 명도(0-100%)로 가장 직관적인 모델입니다.
우리 변환기는 실시간으로 작동합니다: 한 형식에 값을 입력하면 즉시 다른 형식으로 변환됩니다. 시각적 색상 선택기도 포함되어 있어 원하는 색상을 선택하면 자동으로 세 가지 형식의 코드를 생성합니다.
자주 묻는 질문
HEX와 RGB의 차이점은 무엇인가요?
둘 다 정확히 같은 색상을 표현하며, 표기법만 다릅니다. HEX는 #RRGGBB 형식의 16진수(16진법)를 사용하고, RGB는 각 채널에 0~255의 10진수를 사용합니다. 예를 들어 흰색은 HEX로 #FFFFFF, RGB로 rgb(255, 255, 255)입니다. HEX는 CSS에서 더 간결하고, RGB는 프로그래밍으로 조작하기 더 쉽습니다.
HSL은 언제 사용하나요?
HSL은 조화로운 색상 팔레트나 같은 톤의 변형을 만들 때 이상적입니다. 색조(H)를 채도(S)와 명도(L)에서 분리함으로써, 기본 색조를 변경하지 않고 명도만 조정하여 더 밝거나 어두운 버전을, 채도를 변경하여 더 선명하거나 차분한 버전을 만들 수 있습니다.
브라우저는 어떤 색상 모델을 사용하나요?
웹 브라우저는 CSS에서 HEX, RGB, HSL 세 가지 형식을 모두 이해합니다. 내부적으로 화면은 각 픽셀이 빨강, 초록, 파랑 서브 픽셀로 구성되므로 RGB로 작동합니다. 그러나 최신 CSS는 HDR 디스플레이의 더 넓은 색역을 위해 oklch와 display-p3 같은 더 발전된 모델도 지원합니다.
더 알고 싶으신가요? 전체 가이드 읽기 →