색상 변환기

HEX·RGB·HSL·HSV·CMYK 색상 코드를 즉시 상호 변환합니다

빠른 선택

소개

색상 변환기란?

디자인과 개발에서 자주 쓰이는 HEX, RGB, HSL, HSV, CMYK 색상 형식을 즉시 상호 변환합니다. 컬러 피커로 색상을 직접 선택하거나 코드를 입력하면 모든 형식의 값이 동시에 표시됩니다.

기능

🔄

HEX·RGB·HSL·HSV·CMYK 5가지 형식 동시 변환 및 복사

🎨

컬러 피커로 색상 직접 선택, CSS 변수·Tailwind 클래스 코드 생성

🌈

보색·유사색·삼각색 등 조화 색상 팔레트 자동 생성

활용

🎨

디자이너

디자인 툴에서 추출한 색상 코드를 CSS에서 쓸 수 있는 형식으로 변환할 때

💻

프론트엔드 개발자

HEX 코드를 rgba()로 변환하거나 opacity 조절이 필요한 HSL 형식으로 바꿀 때

🖼️

UI/UX 작업

브랜드 컬러의 보색이나 유사색을 빠르게 찾아 색상 팔레트를 구성할 때

📱

앱 개발

iOS·Android·웹 각각 다른 색상 형식을 요구할 때 즉시 변환

🎯

마케팅·브랜딩

브랜드 컬러 가이드라인의 색상을 다양한 형식으로 관리할 때

📊

데이터 시각화

차트·그래프 색상을 CSS·SVG에서 쓸 형식으로 변환할 때

FAQ

HEX(16진수)는 #RRGGBB 형태로 색을 표현하며 CSS에서 가장 많이 사용됩니다. RGB는 빨강(0-255), 초록(0-255), 파랑(0-255) 세 값으로 표현하며 투명도를 추가한 rgba() 형식도 지원합니다.

HSL은 색조(Hue)·채도(Saturation)·밝기(Lightness)로 색을 표현해 사람이 직관적으로 이해하기 쉽습니다. 같은 색상의 밝기만 조정하거나 보색을 계산할 때 HSL이 훨씬 편리합니다.

CMYK(Cyan·Magenta·Yellow·Key/Black)는 인쇄물에 사용되는 색상 모델입니다. 모니터(RGB)와 인쇄물(CMYK) 간 색상 차이가 있으므로 인쇄 전 변환 확인이 중요합니다.

보색은 색상환에서 정반대에 위치한 색으로, HEX 기준으로 H 값에 180도를 더한 색입니다. 보색 조합은 대비가 강해 눈에 잘 띄는 디자인에 활용됩니다.

네. 알파(투명도) 채널이 포함된 8자리 HEX를 입력하면 알파값을 포함한 rgba() 및 hsla() 형식으로 변환합니다.

CSS 변수 형식(--color-primary: #ff6b6b)과 HSL 기반 변수 형식을 복사할 수 있습니다. Tailwind CSS에서 사용하는 arbitrary value 형식도 함께 제공합니다.