색상 변환기

개요

HEX, RGB, HSL 컬러 값을 서로 변환한다. 디자이너에게 받은 HEX 코드를 CSS rgb()로 바꿔야 하거나, HSL로 색상 미세 조정을 하고 싶을 때 쓰면 된다. 색상 미리보기가 함께 표시돼서 변환 결과를 눈으로 바로 확인할 수 있다.

주요 기능

• HEX → RGB → HSL 상호 변환
• 실시간 색상 미리보기 패널
• 컬러 피커로 직접 색상 선택
• 각 포맷별 CSS 코드 복사
• 투명도(alpha) 값 지원 (RGBA, HSLA)

사용 방법

1. HEX, RGB, HSL 중 아무 포맷으로 색상값을 입력한다.
2. 나머지 포맷의 변환 결과가 자동으로 표시된다.
3. 컬러 피커로 직접 색상을 골라도 된다.
4. 필요한 포맷 옆의 복사 버튼으로 CSS 코드를 가져간다.

팁

• HSL은 색상(H), 채도(S), 명도(L)로 분리돼 있어서 색 톤 미세 조정에 직관적이다.
• HEX에서 # 뒤의 6자리가 같은 2자리씩 반복되면(#AABBCC) 3자리 축약형(#ABC)으로 쓸 수 있다.
• 다크 모드 대응할 때 HSL의 L(명도)만 조절하면 같은 색조에서 밝기만 바꿀 수 있다.

자주 묻는 질문

CMYK 변환도 지원하나요?

현재는 웹에서 주로 쓰이는 HEX, RGB, HSL만 지원합니다. CMYK는 인쇄 색상 체계로, 웹 색상과 정확히 1:1 대응이 되지 않아 별도 전문 도구를 사용하는 것이 좋습니다.

투명도는 어떻게 설정하나요?

RGB 또는 HSL 입력 시 네 번째 값으로 alpha를 0~1 사이로 지정하면 됩니다. HEX의 경우 8자리 포맷(#RRGGBBAA)으로 입력할 수 있습니다.

Tailwind CSS 색상 이름도 찾을 수 있나요?

Tailwind 색상 이름 매칭은 현재 지원하지 않습니다. HEX/RGB/HSL 포맷 간 변환에 집중한 도구입니다.