색상 코드 변환기 모든 형식

색상 코드 변환기 (모든 형식)에 오신 것을 환영합니다. 이 도구는 모든 색상 값을 공통 형식으로 한 번에 변환해 주는 무료 온라인 도구입니다. HEX 코드, RGB 삼중항, HSL 또는 HSV 정의, CMYK 사중항, 심지어 CSS 네임드 컬러까지 붙여넣기만 하면 즉시 등가 값을 확인하고, 라이브 미리보기 견본을 보고, WCAG 접근성 대비를 확인하며, 보색, 삼보색, 유사색, 틴트 및 쉐이드로 구성된 디자이너 팔레트를 탐색할 수 있습니다.

왜 올인원 색상 변환기를 사용해야 하나요?

대부분의 온라인 색상 변환기는 한 방향(HEX를 RGB로, 또는 RGB를 CMYK로)만 처리하므로 전체적인 정보가 필요할 때 여러 도구를 번갈아 사용해야 합니다. 이 변환기는 단일 필드에서 모든 일반적인 형식을 허용하고, 입력한 형식을 자동으로 감지하며, 실시간 미리보기와 함께 다섯 가지 형식을 모두 동시에 반환하므로 웹, 모바일, 인쇄 및 디자인 도구 사이를 오갈 때 여러 단계를 절약할 수 있습니다.

지원되는 입력 형식

HSL과 HSV 색상 모델의 차이점은 무엇인가요?

HSL과 HSV 모두 색상(Hue), 채도(Saturation) 및 세 번째 명도 관련 값이라는 세 가지 직관적인 채널을 통해 색상을 설명하지만, 세 번째 채널에서 차이가 있습니다.

• HSL — 색상(Hue), 채도(Saturation), 명도(Lightness): 명도는 0%(순수 검정)에서 50%(해당 색상의 가장 선명한 버전)를 거쳐 100%(순수 흰색)까지 범위가 지정됩니다. HSL은 색상을 밝게 하거나 어둡게 하는 것이 대칭적이고 예측 가능하기 때문에 CSS에서 선호됩니다.
• HSV / HSB — 색상(Hue), 채도(Saturation), 명도(Value/Brightness): 명도는 0%(순수 검정)에서 100%(해당 색상의 가장 가득 차고 포화된 버전)까지 범위가 지정됩니다. HSV는 Photoshop, Figma 및 대부분의 데스크톱 디자인 도구의 색상 피커에 사용되는 모델입니다.

예를 들어, 완전히 포화된 빨간색은 HSL에서 hsl(0, 100%, 50%)이지만 HSV에서는 hsv(0, 100%, 100%)입니다. 동일한 색상이지만 두 가지 다른 사고 모델이며, CSS 작성자처럼 생각하느냐 화가처럼 생각하느냐에 따라 둘 다 유용합니다.

CMYK 값이 인쇄 소프트웨어와 약간 다르게 보이는 이유는 무엇인가요?

RGB는 화면에서 사용하는 가산 모델인 반면, CMYK는 프린터에서 사용하는 감산 모델입니다. 이 도구가 수행하는 수학적 변환은 ICC 색상 프로필, 잉크 커버리지 제한 또는 종이별 조정을 포함하지 않는 빠른 근사치입니다. 실제 인쇄 작업의 경우 항상 디자인 소프트웨어의 색상 관리 CMYK 프로필(예: US Web Coated SWOP v2 또는 Coated FOGRA39)에 의존하십시오. 이 변환기는 초기 디자인 단계에서 "충분히 가까운" CMYK 수치가 필요할 때 빠른 참조용으로 사용하십시오.

WCAG 대비 확인은 어떻게 작동하나요?

웹 콘텐츠 접근성 가이드라인(WCAG)은 상대 휘도를 기반으로 두 색상 간의 대비비를 정의합니다. 상대 휘도는 초록색을 빨간색보다, 빨간색을 파란색보다 더 무겁게 가중치를 두는 지각적 밝기 모델입니다. 비율은 1:1(대비 없음)에서 21:1(순수 흰색 위의 순수 검정)까지입니다.

• AAA — 비율 ≥ 7:1, 본문 텍스트에 대한 가장 엄격한 접근성 수준 충족
• AA — 비율 ≥ 4.5:1, 대부분의 규정에서 본문 텍스트에 대한 최소 기준
• AA Large — 비율 ≥ 3:1, 큰 텍스트(18pt 이상 또는 14pt 굵게) 및 그래픽 UI 요소에 충분함
• Fail — 비율 < 3:1, 텍스트용으로 이 조합을 사용하지 마십시오.

이 도구는 순수 흰색과 순수 검정색에 대한 대비를 계산한 다음, 이 색상이 배경으로 사용될 때 기본 텍스트 색상으로 더 나은 선택을 강조 표시합니다.

변환기가 색상 팔레트도 생성하나요?

네. 모든 변환 후에 도구는 동일한 색상을 바탕으로 다음과 같은 디자이너 팔레트를 구축합니다:

• 보색 (Complementary) — 색상환에서 정반대에 위치한 색상(180° 회전), 고대비 강조에 유용합니다.
• 삼보색 (Triadic) — 120° 간격으로 균등하게 배치된 두 색상으로, 균형 잡히고 활기찬 느낌을 줍니다.
• 유사색 (Analogous) — ±30°에 위치한 인접 색상으로, 조화로운 그라데이션 및 배경에 유용합니다.
• 틴트 (Tints) — 세 가지 더 밝은 변형 (동일 색상, 더 높은 명도)
• 쉐이드 (Shades) — 세 가지 더 어두운 변형 (동일 색상, 더 낮은 명도)

팔레트 견본을 클릭하면 즉시 변환기에 새로운 시작점으로 로드되어 브랜드 색상, 아이콘 세트 또는 UI 테마를 빠르게 반복 작업하는 데 적합합니다.

이 도구 사용 방법

1. 색상 입력 또는 선택 — 입력 필드에 임의의 값(HEX, RGB, HSL, HSV, CMYK 또는 CSS 색상 이름)을 입력하거나 작은 색상 견본을 클릭하여 브라우저의 기본 색상 피커를 엽니다.
2. 변환 — 변환 버튼을 클릭합니다. 도구가 제공된 형식을 자동으로 감지하고 다른 모든 형식을 계산합니다.
3. 필요한 값 복사 — 형식 값 옆에 있는 원터치 복사 버튼을 클릭합니다. 버튼에 체크 표시가 잠시 나타나며 값이 클립보드에 복사되었음을 확인해 줍니다.
4. 접근성 확인 — 순수 흰색 및 순수 검정색에 대한 WCAG 대비비를 검토하여 해당 색상이 텍스트나 배경으로서 가독성이 있는지 확인합니다.
5. 팔레트 탐색 — 디자이너 팔레트 섹션의 견본을 클릭하여 변환함으로써 페이지를 떠나지 않고도 디자인 탐색을 확장할 수 있습니다.

실질적인 사용 사례

웹 개발자용

• Figma 컴포지션의 HEX를 CSS 사용자 정의 속성 및 현대적인 테마 시스템에서 사용하기 위해 hsl()로 변환
• 브랜드 HEX 색상에서 직접 반투명 오버레이를 위한 rgba() 값 생성
• 출시 전 브랜드 색상이 흰색 배경에서 WCAG AA를 충족하는지 확인

그래픽 디자이너용

• 웹사이트의 CSS 색상을 인쇄 목업을 위한 CMYK 근사치로 변환
• 단일 시작 색상에서 톤 스케일(틴트 및 쉐이드) 구축
• 브라우저를 떠나지 않고 보색 또는 삼보색 강조색 찾기

UI 및 제품 디자이너용

• 디자인 토큰을 문서화할 때 HSV(Figma 피커)와 HSL(CSS) 간의 상호 참조
• 모든 배경에 대해 최적의 텍스트 색상(검정 vs 흰색)을 자동으로 식별
• 결과 페이지의 URL을 통해 변환된 색상을 빠르게 북마크하거나 공유

최상의 결과를 위한 팁

• 유연한 구분 기호 사용 — 파서는 괄호 안에 쉼표, 공백 또는 슬래시를 모두 허용하므로 rgb(79 70 229)는 rgb(79, 70, 229)와 동일하게 작동합니다.
• 백분율 사용 가능 — rgb(31%, 27%, 90%)도 유효하며, 도구는 내부적으로 백분율을 0–255로 변환합니다.
• CSS 네임드 컬러 시도 — rebeccapurple와 같은 현대적인 추가 이름을 포함하여 140개 이상의 이름을 지원합니다.
• 채널 바 확인 — 빨강/초록/파랑 및 CMYK 채널의 시각적 분석을 통해 색상의 인쇄 버전에서 어떤 잉크가 지배적인지 쉽게 확인할 수 있습니다.
• CMYK는 가이드로만 활용 — 최종적인 정확한 값을 위해서는 색상 관리 기능이 있는 인쇄 소프트웨어에서 결과를 확인하십시오.

자주 묻는 질문

HEX 값을 입력할 때 # 기호를 포함해야 하나요?

아니요. #4f46e5와 4f46e5 모두 허용됩니다. 앞의 #은 선택 사항입니다.

알파 채널이 포함된 4자리 및 8자리 HEX 값이 지원되나요?

파서가 이를 허용하지만, 변환 과정에서 알파 채널은 삭제됩니다. RGB, HSL, HSV 및 CMYK의 클래식 형식은 알파를 포함하지 않기 때문입니다. 이 도구는 색상 부분에만 집중합니다.

변환된 색상을 공유하거나 북마크할 수 있나요?

네. 양식이 GET 방식으로 전송되므로 URL에 변환한 색상이 포함됩니다. 변환 후 페이지 URL을 복사하여 정확한 결과 페이지를 공유하거나 북마크하십시오.

왜 일부 HEX 값은 대문자로 표시되나요?

출력 시 HEX를 대문자(예: #4F46E5)로 표준화하며, 이는 많은 디자인 및 브랜드 스타일 가이드에서 사용하는 관례입니다. 원하시는 경우 소문자로 다시 붙여넣으셔도 되며, 둘은 동일합니다.

모바일 기기에서도 작동하나요?

네. 인터페이스는 완전히 반응형이며 양식, 팔레트 및 대비 카드는 작은 화면에서 단일 열 레이아웃으로 재배치되어 편리한 터치 경험을 제공합니다.

추가 리소스

• HSL 및 HSV - 위키백과
• CMYK 색상 모델 - 위키백과
• WCAG 2.1 대비 (최소) 요구 사항