색상 변환기
HEX, RGB, HSL 색상 변환
색상 변환기 사용 방법
HEX, RGB, HSL 색상 변환 무료 온라인 도구, 회원가입 없음, 광고 없음. 지금 바로 무료로 사용하세요.
색상 코드를 변환해야 하는 경우는?
디지털 디자인에서 색상은 다양한 형식으로 존재하며 각각 다른 맥락에 적합합니다. 웹 개발자, 프런트엔드 전문가, 그래픽 디자이너는 일상 업무에서 형식 간 변환을 자주 해야 합니다.
- CSS 개발: 디자인 도구는 HEX(#7B35F5)로 내보내지만 CSS는 RGB(rgb(123,53,245))와 HSL(hsl(264,91%,58%))도 허용합니다. CSS 형식 간 변환으로 코드 일관성을 유지하세요.
- 브랜드 색상 일관성: 기업 색상은 웹에서는 HEX로, 인쇄에서는 CMYK로, 화면에서는 RGB로 정확하게 표현되어야 합니다. 모든 미디어에서 정확한 색상 일치를 위해 변환하세요.
- 접근성: HSL은 색조를 유지하면서 밝기를 쉽게 조정할 수 있어 WCAG 기준에 맞는 접근 가능한 색상 변형을 만드는 데 유용합니다.
- 디자인-개발 핸드오프: 피그마와 Adobe XD는 HEX로 내보냅니다. 일부 개발자는 CSS에서 색상을 직접 조정하기 더 직관적인 HSL을 선호합니다.
- 인쇄 준비: 화면 색상(RGB)은 전문 인쇄를 위해 CMYK로 변환해야 합니다. RGB가 더 넓은 색역을 가지며 일부 밝은 화면 색상은 인쇄로 재현하기 어렵습니다.
형식 요약: HEX(#RRGGBB)는 간결하고 웹에서 범용적입니다. RGB(0~255 각 채널)는 화면의 기본 형식입니다. HSL(색조 0~360°, 채도 0~100%, 밝기 0~100%)은 인간에게 가장 직관적입니다. CMYK(0~100% 각 채널)는 전문 인쇄용입니다.
RGB와 RGBA의 차이는 무엇인가요?
RGBA는 RGB에 투명도(알파) 채널을 추가합니다: rgba(123,53,245,0.5)는 50% 투명한 보라색입니다. 알파 값: 0(완전 투명)에서 1(완전 불투명). HEX는 8자리 표기법으로 알파를 지원합니다: #7B35F580(16진수 80 = 50% 불투명).
RGB와 CMYK가 다른 색역을 갖는 이유는?
RGB는 가산혼합으로 빨강, 녹색, 파란 빛을 합치면 흰색이 됩니다(화면용). CMYK는 감산혼합으로 잉크가 빛을 흡수합니다(인쇄용). RGB는 표준 CMYK 잉크로 인쇄할 수 없는 더 밝고 채도 높은 색을 표현할 수 있습니다.
HSL이란 무엇이고 왜 유용한가요?
HSL(색조, 채도, 밝기)은 사람에게 직관적으로 설계되었습니다. 색조는 색상(0°=빨강, 120°=초록, 240°=파랑), 채도는 강도(0%=회색, 100%=선명), 밝기는 밝기(0%=검정, 50%=순색, 100%=흰색)입니다. 색조를 바꾸지 않고 더 어둡거나 밝게 만들려면 밝기 값만 변경하면 됩니다.
HEX를 RGB로 수동 변환하는 방법은?
6자리 HEX를 3쌍으로 나누고 각 쌍을 16진수에서 10진수로 변환합니다. #7B35F5: 7B=123(빨강), 35=53(초록), F5=245(파랑) → rgb(123,53,245). 변환기가 즉시 처리하지만 원리를 이해하면 코드에서 HEX 값을 직접 읽을 수 있습니다.
색상 프로필(sRGB, AdobeRGB, Display P3)이란 무엇인가요?
색상 프로필은 기기가 표시할 수 있는 색역을 정의합니다. sRGB는 웹과 일반 모니터의 표준입니다. AdobeRGB는 전문 사진에서 사용되며 가시 스펙트럼을 약 50% 더 많이 포함합니다. Display P3(애플 기기)는 sRGB보다 약 25% 넓습니다. 웹 콘텐츠에는 항상 sRGB를 사용하세요.
색상 변환기 vs 컬러 피커 vs 팔레트 생성기
색상 변환기는 기존 색상 값을 형식 간에 변환합니다. 컬러 피커(브라우저 DevTools, OS 색상 선택기)는 시각적으로 색상을 선택하고 값을 내보냅니다. 팔레트 생성기는 색채 이론을 사용하여 기본 색상에서 조화로운 색상 조합을 만듭니다. 명암 비율 검사기는 색상 조합이 WCAG 접근성 기준을 충족하는지 확인합니다. 네 가지 모두 디자이너의 일상 작업에서 상호 보완적으로 사용됩니다.