🎨
색상 변환기
HEX, RGB, HSL 색상 값을 변환합니다
색상 변환기는 HEX, RGB, HSL 등 웹에서 사용하는 주요 색상 형식을 실시간으로 상호 변환하는 도구입니다. 컬러 피커로 원하는 색을 직접 선택하거나, 코드 값을 입력하면 모든 형식의 결과를 한눈에 확인할 수 있습니다. 투명도(Alpha) 설정도 지원하여 RGBA, HSLA 값도 생성할 수 있으며, CSS 코드를 바로 복사하여 웹 개발에 활용할 수 있습니다.
📖 사용법
- HEX, RGB, 또는 HSL 중 하나의 값을 입력하세요
- 자동으로 다른 형식으로 변환됩니다
- 색상 미리보기를 확인하세요
- 필요한 형식의 값을 복사하세요
✨ 주요 기능
- ✓HEX ↔ RGB ↔ HSL 변환
- ✓실시간 색상 미리보기
- ✓컬러 피커 지원
- ✓투명도(Alpha) 지원
- ✓CSS 코드 복사
💡 활용 사례
- •웹 개발자: 디자인 시안의 HEX 색상 코드를 RGB나 HSL로 변환하여 CSS에 적용합니다.
- •UI 디자이너: HSL 모드에서 채도와 밝기를 조절하여 일관된 색상 팔레트를 구성합니다.
- •마케터: 브랜드 가이드라인의 색상 코드를 다양한 형식으로 변환하여 다양한 플랫폼에 적용합니다.
- •퍼블리셔: Figma나 Sketch에서 추출한 색상 값을 CSS 형식으로 변환합니다.
- •접근성 검수자: 배경색과 텍스트 색상의 RGB 값을 확인하여 명도 대비를 검토합니다.
🎯 활용 팁
- ▸컬러 피커를 사용하면 정확한 코드 값을 몰라도 원하는 색을 쉽게 선택할 수 있습니다.
- ▸HSL 형식은 색조(H)만 변경하면 같은 톤의 다른 색상을 빠르게 만들 수 있습니다.
- ▸투명도가 필요한 오버레이나 그림자에는 RGBA 값을 활용하세요.
- ▸HEX 3자리 축약형(#F00)은 6자리(#FF0000)와 동일한 색상입니다.
❓ 자주 묻는 질문
Q. HEX와 RGB의 차이는?
A. HEX는 16진수(#FF0000), RGB는 10진수(255, 0, 0)로 같은 색상을 표현합니다. CSS에서 둘 다 사용 가능합니다.
Q. HSL은 언제 사용하나요?
A. HSL은 색상 조정이 직관적입니다. 밝기나 채도를 조절할 때 유용합니다.
Q. RGBA와 RGB의 차이는 무엇인가요?
A. RGBA는 RGB에 투명도(Alpha) 값이 추가된 형식입니다. Alpha는 0(완전 투명)~1(완전 불투명) 사이의 값입니다.
Q. CSS에서 어떤 색상 형식을 쓰는 것이 좋나요?
A. 모든 형식이 호환되지만, HEX는 간결하고 RGB는 명확하며 HSL은 색상 조절이 직관적입니다. 프로젝트 컨벤션에 따라 선택하세요.
Q. 색상 코드를 어떻게 복사하나요?
A. 각 형식 옆의 복사 버튼을 클릭하면 해당 CSS 코드가 클립보드에 복사됩니다.
🔗 관련 도구
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.