색상 변환기
HEX, RGB, HSL 색상 코드를 실시간으로 변환하고 조화 색상 팔레트를 확인하세요
색상 값
#
R
G
B
H°
S%
L%
CSS 코드
조화 색상 팔레트
보색 (Complementary)
삼색 조화 (Triadic)
유사색 (Analogous)
색상 변환기란?
색상 변환기는 HEX, RGB, HSL 등 다양한 색상 코드 형식을 실시간으로 상호 변환해주는 도구입니다. 웹 디자이너와 개발자가 CSS 스타일링, UI 디자인, 브랜드 컬러 관리 시 필요한 색상 값을 빠르게 확인하고 변환할 수 있습니다. 또한 보색, 삼색 조화, 유사색 등 색상 조화 팔레트를 자동으로 생성하여 디자인 작업에 도움을 줍니다.
사용 방법
- 색상 선택기를 클릭하여 원하는 색상을 선택하거나, HEX/RGB/HSL 값을 직접 입력합니다.
- 하나의 형식에 값을 입력하면 나머지 형식의 값이 자동으로 계산되어 표시됩니다.
- 각 형식 옆의 복사 버튼을 클릭하여 원하는 형식의 색상 코드를 복사할 수 있습니다.
- 하단의 조화 색상 팔레트에서 보색, 삼색 조화, 유사색을 확인할 수 있습니다.
자주 묻는 질문
HEX는 16진수 표기법(#FF5733)으로 웹에서 가장 많이 사용됩니다. RGB는 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 값(0-255)으로 색상을 표현합니다. HSL은 색조(Hue, 0-360도), 채도(Saturation, 0-100%), 명도(Lightness, 0-100%)로 사람이 색상을 인식하는 방식에 가장 가까운 표현법입니다.
아닙니다. 모든 색상 변환 처리는 브라우저에서 JavaScript로 이루어지며, 입력한 데이터는 외부 서버로 전송되지 않습니다.
색상환(Color Wheel)의 원리를 기반으로 합니다. 보색은 색상환에서 180도 반대에 위치한 색상, 삼색 조화는 120도 간격의 세 색상, 유사색은 현재 색상에서 30도씩 떨어진 인접 색상을 의미합니다. 이러한 색상 조합은 시각적으로 균형 잡힌 디자인을 만드는 데 효과적입니다.
CSS에서는 세 가지 형식 모두 사용할 수 있습니다. HEX는 간결하여 가장 널리 사용되며, RGB는 투명도(alpha)를 추가할 때 rgba() 형식으로 자주 쓰입니다. HSL은 색상의 밝기나 채도를 조절할 때 직관적이어서 디자인 시스템에서 유용합니다.