🎨색상 변환기
로딩 중...
웹 개발과 디자인에서 색상은 HEX, RGB, HSL, HSV, CMYK 등 다양한 형식으로 표현됩니다. CSS에서는 주로 HEX(#FF5733)와 RGB(rgb(255, 87, 51))를 사용하고, 디자인 도구에서는 HSL이나 HSV를 선호합니다. 인쇄 디자인에서는 CMYK가 표준입니다. 이 도구는 한 형식의 색상값을 입력하면 다른 모든 형식으로 즉시 변환하며, 색상 피커를 통해 시각적으로 색상을 선택할 수도 있습니다.
사용 방법
- 1색상 입력
HEX, RGB, HSL 중 원하는 형식으로 색상값을 입력합니다. 색상 피커(color picker)를 클릭하여 시각적으로 선택할 수도 있습니다.
- 2변환 결과 확인
입력한 색상이 HEX, RGB, HSL, HSV, CMYK 등 모든 형식으로 동시에 변환됩니다.
- 3CSS 코드 활용
하단에 CSS에서 바로 사용할 수 있는 코드 스니펫이 표시됩니다. 복사하여 스타일시트에 붙여넣을 수 있습니다.
- 4미리보기 확인
선택한 색상이 프리뷰 영역에 표시되어 실제 화면에서 어떻게 보이는지 확인할 수 있습니다.
활용 팁
- 💡HSL 형식은 색상(Hue), 채도(Saturation), 밝기(Lightness)로 구성되어 색상 조절이 직관적입니다.
- 💡웹 접근성을 위해 배경색과 텍스트 색상의 대비 비율을 고려하세요.
- 💡CSS 변수(custom properties)에 색상을 저장할 때 HEX보다 HSL 형식이 색상 변형에 유리합니다.
- 💡CMYK 값은 모니터(RGB)와 인쇄물 간의 색상 차이를 이해하는 데 도움이 됩니다.