색상 변환기

색상 변환기는 HEX, RGB, HSL, RGBA, HSLA, HEX8 등 웹 개발과 디자인에서 쓰이는 주요 색상 형식을 실시간으로 상호 변환해주는 도구입니다. 디자이너가 Figma에서 뽑은 HEX 색상을 CSS의 HSL로 바꿔야 하거나, 개발자가 JavaScript에서 계산한 RGB 값을 HEX로 변환해야 할 때 매번 공식을 외울 필요 없이 한 번에 처리할 수 있습니다. 색상 하나를 입력하면 6가지 형식 변환값이 동시에 표시되고, 보색/명도/채도 변형까지 제안해주어 색상 팔레트를 구성할 때도 유용합니다.

주요 기능

• 6가지 형식 동시 변환 - HEX, RGB, HSL, RGBA, HSLA, HEX8 값을 한 번에 확인하고 복사할 수 있습니다.
• 시각적 색상 선택기 - 컬러 피커로 직관적으로 색상을 고르거나, HEX 코드를 직접 입력할 수 있습니다.
• RGB 개별 슬라이더 - 빨강, 초록, 파랑 채널을 슬라이더로 미세 조정하여 원하는 색상을 만들 수 있습니다.
• 투명도 조절 - Alpha 슬라이더로 불투명도를 0~100%까지 조절하며 RGBA, HSLA, HEX8 값에 반영됩니다.
• 관련 색상 제안 - 선택한 색상의 보색, 밝은/어두운 변형, 채도 높은 변형을 자동으로 계산합니다.
• 빠른 색상 팔레트 - 자주 사용하는 기본 색상을 클릭 한 번으로 선택할 수 있습니다.

사용 방법

1. 색상 선택기를 클릭하여 원하는 색상을 선택하거나, HEX 입력란에 코드를 직접 입력합니다.
2. 빠른 선택 팔레트에서 기본 색상을 클릭하면 바로 적용됩니다.
3. RGB 슬라이더를 움직여 빨강(R), 초록(G), 파랑(B) 값을 개별적으로 조절합니다.
4. 투명도가 필요하면 Alpha 슬라이더로 불투명도를 조절합니다.
5. 변환된 각 형식(HEX, RGB, HSL, RGBA, HSLA, HEX8) 옆의 복사 버튼을 클릭하여 클립보드에 복사합니다.
6. 관련 색상 섹션에서 보색, 밝은/어두운/채도 높은 변형을 확인하고 클릭하면 해당 색상이 적용됩니다.

활용 사례

• CSS 스타일링 - 디자인 시안에서 받은 HEX 색상을 HSL로 변환하여 밝기/채도 기반의 유연한 테마 시스템을 구축할 수 있습니다.
• 디자인 시스템 구성 - 브랜드 컬러 하나에서 보색과 명도 변형을 확인하여 Primary, Secondary, Accent 색상을 정할 수 있습니다.
• 반투명 오버레이 제작 - Alpha 값을 조절하여 이미지 위에 올릴 반투명 배경색의 RGBA 코드를 빠르게 얻을 수 있습니다.
• 크로스 플랫폼 개발 - 웹에서는 HEX, Android에서는 HEX8, iOS에서는 RGB로 같은 색상을 다른 형식으로 전달해야 할 때 유용합니다.

팁과 주의사항

• HSL 형식은 색상(H) 값만 바꾸면 같은 톤의 다른 색을 쉽게 만들 수 있어 테마 색상 체계 설계에 적합합니다.
• HEX8의 투명도 순서는 브라우저마다 해석이 다를 수 있으므로, 호환성이 중요하면 RGBA를 사용하세요.
• 보색은 강한 대비를 만들지만, 큰 면적에 동시 사용하면 눈이 피로할 수 있으니 비율을 조절하세요.
• 모든 변환은 브라우저에서 즉시 처리되며, 입력한 색상 정보가 외부로 전송되지 않습니다.
• 모바일에서도 슬라이더와 색상 선택기를 터치로 조작할 수 있습니다.

자주 묻는 질문