색상 변환기

HEX, RGB, HSL 및 기타 색상 형식 간에 색상을 변환합니다. 웹 디자인 및 색상 조작에 유용합니다.

색상 변환기는 무엇인가요?

색상 변환기는 하나의 프로젝트에서 여러 색상 표현을 다루는 웹 디자이너, 프론트엔드 개발자, 그래픽 아티스트에게 필수적인 도구입니다. 디지털 색상은 각기 다른 목적을 가진 다양한 형식으로 표현될 수 있습니다. HEX 코드(예: #3B82F6)는 간결하고 널리 지원되어 HTML과 CSS에서 가장 일반적인 형식입니다. RGB 값(예: rgb(59, 130, 246))은 화면 빛의 강도를 직접 제어하며 색상 채널을 프로그래밍 방식으로 조작할 때 유용합니다. HSL(색조, 채도, 밝기) 값(예: hsl(217, 91%, 60%))은 색조에 영향을 주지 않고 밝기나 채도를 직관적으로 조정할 수 있어 가장 디자이너 친화적인 형식입니다. CMYK(사이안, 마젠타, 노랑, 검정)는 빛이 아닌 잉크 비율을 나타내는 인쇄 디자인의 표준입니다. 브랜드 디자이너가 화면에서 재현해야 할 색상을 제공하거나, 개발자가 CSS 사용자 정의 속성을 위해 HEX를 HSL로 변환해야 할 때 이 도구가 즉각적으로 정확한 양방향 변환을 제공합니다.

색상 변환기 사용 방법

HEX, RGB, RGBA, HSL, HSLA 또는 CMYK 형식으로 색상 값을 입력 필드에 입력하거나, 색상 견본을 클릭하여 브라우저의 기본 시각적 색상 선택기를 열어 정확한 색상을 선택하세요. 어떤 값을 변경하든 다른 모든 형식 필드가 해당 형식의 동등한 색상으로 자동 업데이트됩니다. HEX는 # 기호 유무에 관계없이 3자리 또는 6자리 코드를 입력하세요. RGB는 빨강, 초록, 파랑 채널에 0~255의 정수 세 개를 입력하세요. HSL은 색조를 0~360도로, 채도와 밝기를 0~100%로 입력하세요. RGBA와 HSLA의 경우 0(완전 투명)~1(완전 불투명)의 알파 값이 투명도를 제어합니다. 하단의 CSS 코드 패널은 모든 형식의 복사 준비된 코드 스니펫을 보여줍니다. 팔레트 패널은 선택된 색상의 밝고 어두운 변형을 보여줍니다.

자주 묻는 질문

어떤 색상 형식이 지원되나요?

HEX(#포함·미포함 3자리 및 6자리), RGB, RGBA, HSL, HSLA, CMYK를 지원합니다. 'tomato'나 'cornflowerblue' 같은 CSS 명명 색상도 입력할 수 있으며 모든 숫자 형식으로 변환됩니다. 출력 CSS 패널은 현대 CSS color() 함수 구문을 포함한 모든 형식의 즉시 사용 가능한 코드를 보여줍니다.

CMYK 변환이 디자인 소프트웨어와 약간 다른 이유는 무엇인가요?

HEX, RGB, HSL은 가산 색상 공간(화면 빛)이고, CMYK는 감산 색상 공간(종이 위 잉크)입니다. 이 두 공간 사이의 변환은 모든 인쇄 색상을 화면에서 정확하게 재현할 수 없고 그 반대도 마찬가지이므로 근사치입니다. 이 도구는 일반적인 목적에 잘 작동하는 표준 수학 공식을 사용합니다. 색상 충실도가 중요한 전문 인쇄 작업은 Adobe Photoshop이나 Illustrator 같은 전문 소프트웨어에서 ICC 색상 프로파일을 사용하세요.

HSL이 디자인에서 RGB보다 더 유용한 이유는 무엇인가요?

HSL(색조, 채도, 밝기)은 인간의 직관에 맞게 색상 정보를 분리합니다. 색조는 색상 종류(0°=빨강, 120°=초록, 240°=파랑), 채도는 선명함(0%=회색, 100%=완전 색상), 밝기는 밝기(0%=검정, 50%=기본, 100%=흰색)를 제어합니다. 호버 상태에서 색상을 밝게 하려면 L 값만 높이면 됩니다. 부드러운 색조를 만들려면 S 값을 낮추세요. RGB 채널을 조정하는 것보다 훨씬 직관적이어서 일관된 디자인 시스템 구축에 이상적입니다.

알파/투명도 채널은 어떻게 사용하나요?

0.0(완전 투명)~1.0(완전 불투명) 범위의 네 번째 알파 값이 추가된 RGBA 또는 HSLA 형식을 사용하세요. 예를 들어 rgba(59, 130, 246, 0.5)는 50% 투명한 파랑입니다. 알파 투명도는 오버레이, 모달 배경, 유리모피즘 효과, 뒤의 콘텐츠를 보여야 하는 UI 요소에 필수적입니다. CSS는 #3B82F680처럼 마지막 두 16진수가 00~FF 범위의 알파 채널인 알파가 포함된 HEX 형식도 지원합니다.

Tailwind CSS에 해당하는 색상을 어떻게 찾나요?

Tailwind의 색상 팔레트는 각 색조(shade)에 특정 HEX 값을 사용합니다(예: blue-500은 #3B82F6, red-500은 #EF4444). HEX 값을 변환기에 붙여넣어 RGB와 HSL 등가물을 얻으세요. 가장 가까운 Tailwind 색상을 찾으려면 Tailwind의 공식 색상 참조와 HEX를 비교하세요. 일부 버전의 이 도구에는 가장 가까운 팔레트 색상과 클래스 이름을 보여주는 Tailwind 색상 매칭 패널이 포함되어 있습니다.