색상 변환기: HEX, RGB, HSL, CMYK

Color Converter란?

Color Converter는 HEX, RGB, HSL, HSB(HSV), CMYK 등 가장 많이 쓰이는 5가지 색상 포맷 간에 색상을 즉시 변환하는 무료 온라인 도구입니다. 지원하는 포맷으로 색상 값을 붙여넣거나 입력하면 도구가 자동으로 입력 내용을 감지해 다른 모든 표현을 실시간으로 동시에 표시합니다. Figma의 HEX 값과 CSS HSL 함수 사이를 전환하거나, 화면 RGB 값을 인쇄용 CMYK 백분율로 변환하는 일상적인 번거로움을 계산기 없이 해결합니다. 모든 변환은 서버 없이 브라우저에서 로컬로 처리됩니다.

주요 기능

• HEX, RGB, HSL, HSB, CMYK 간 변환 — 유효한 색상이 입력되는 순간 5가지 포맷이 모두 동시에 표시됩니다. 소스는 hex, rgb, hsl, hsb, cmyk 상태 객체를 동기화 상태로 유지하는 useColorConversion 훅을 사용합니다.
• 입력 포맷 자동 감지 — 텍스트 영역이 HEX(#으로 시작하거나 /^[0-9a-f]{3,8}$/i에 일치하는 값), RGB(rgb 접두사), HSL(hsl 접두사)을 자동으로 감지해 "Detected: HEX"(또는 RGB/HSL/Auto)라고 표시된 배지를 보여줍니다.
• 입력 중 실시간 변환 — 파싱 가능한 값을 생성하는 키 입력마다 5가지 출력 포맷이 즉시 재렌더링됩니다. 버튼을 누를 필요가 없습니다.
• 임의 포맷을 클립보드에 복사 — 각 포맷 행에는 복사 버튼이 있으며, 복사 성공 후 2초간 녹색 체크마크를 표시합니다. 토스트 알림으로 작업을 확인합니다.
• 시각적 색상 미리보기 — 큰 미리보기 상자가 현재 색상으로 채워지고, 밝기를 기반으로 자동 대비 텍스트(검정 또는 흰색)로 hex 값을 표시합니다.
• RGB, HSL, HSB, CMYK 수치 입력 — 수동 조정 패널로 개별 채널을 미세 조정할 수 있습니다. R, G, B(0~255), H(0~360), S(0~100), L(0~100)(HSL용), H(0~360), S(0~100), B(0~100)(HSB용), C, M, Y, K(0~100)(CMYK용), 모두 유효한 범위로 제한됩니다.
• 공유 가능한 URL — 도구는 현재 색상을 URL에 인코딩하는 useShareableState 훅을 사용해 특정 색상 변환에 대한 직접 링크를 만들 수 있습니다.
• 로드 후 오프라인 작동 — 변환 중 네트워크 요청 없음. 전체 변환 라이브러리가 페이지에 번들로 포함되어 있습니다.

사용법

1단계: 색상 입력

Color Converter를 엽니다. 입력 카드의 왼쪽 절반에 텍스트 입력 필드가 있습니다. 다음 중 하나를 붙여넣습니다.

• hex 값: #3B82F6
• RGB 함수: rgb(59, 130, 246)
• HSL 함수: hsl(217, 91%, 60%)
• 순수 hex 문자열: 3b82f6(# 없이)

인식 가능한 값을 입력하거나 붙여넣으면 입력 필드 오른쪽 상단에 작은 배지가 나타납니다(예: "Detected: HEX"). 카드의 오른쪽 절반에 감지된 색상으로 즉시 채워지는 실시간 색상 미리보기 상자가 표시됩니다.

또는 미리보기 상자 아래의 네이티브 색상 선택기를 사용할 수 있습니다. 사각형 스와치를 클릭하면 브라우저의 색상 선택 창이 열리고, 색상을 선택하면 입력이 설정되고 모든 포맷이 동시에 업데이트됩니다.

2단계: 모든 포맷 확인

입력 카드 아래에 "All Formats" 카드가 5개 행을 나열합니다.

각 행에는 포맷 레이블, 고정폭 글꼴로 서식이 지정된 값, 복사 아이콘 버튼이 표시됩니다. 복사 버튼을 클릭하면 해당 값이 클립보드에 저장됩니다.

3단계: 수치 입력으로 미세 조정

텍스트 입력 아래에 4가지 조정 가능한 색상 모델에 대한 직접 수치 입력이 있습니다.

• RGB: R, G, B 레이블이 붙은 3개의 숫자 입력 — 각각 0에서 255까지 값을 받고 유효한 범위로 제한됩니다.
• HSL: H(0~360), S(0~100), L(0~100) 레이블이 붙은 3개의 숫자 입력.
• HSB: H(0~360), S(0~100), B(0~100) 레이블이 붙은 3개의 숫자 입력.
• CMYK: C, M, Y, K 레이블이 붙은 4개의 숫자 입력 — 각각 0에서 100까지 값을 받습니다.

입력을 변경하면 hex 상태가 업데이트되어 5가지 출력 포맷 모두에 즉시 전파됩니다. 목표 색상 각도, 채도 백분율, 또는 CMYK 값을 알고 CSS용 해당 hex가 필요할 때 유용합니다.

4단계: 변환된 값 복사 및 사용

필요한 포맷 옆의 복사 버튼을 클릭합니다. 버튼 아이콘이 2초 동안 클립보드 아이콘에서 녹색 체크마크로 바뀝니다. 화면 하단에 성공 토스트가 나타납니다.

도구는 HistoryPanel(Premium)에서 변환 기록도 추적합니다. 기록 항목을 복원하면 저장된 hex 값으로 입력이 설정되고 모든 변환이 다시 실행됩니다.

5단계: 특정 색상 공유

색상을 변경할 때마다 URL이 자동으로 업데이트됩니다(useShareableState 통해). 특정 색상에 대한 직접 링크를 공유하려면 브라우저 URL을 복사합니다. 링크를 연 수신자는 "Loaded from shared link" 토스트와 함께 모든 포맷에 공유된 색상이 미리 로드된 상태를 보게 됩니다.

실용 예시

Figma 디자인 토큰을 CSS로 변환

디자이너가 브랜드 보라색 #8467C7을 제공합니다. 개발자는 CSS color-mix() 함수용 HSL 값이 필요합니다. Color Converter를 열고 #8467C7을 입력하면 즉시 HSL 행에 hsl(261, 40%, 59%)이 표시됩니다 — 붙여넣기 준비 완료입니다.

인쇄 색상을 웹용으로 변환

인쇄소가 회사 파란색을 cmyk(76%, 47%, 0%, 4%)로 지정합니다. 텍스트 입력 자동 감지는 원시 CMYK 표기를 인식하지 못하지만, CMYK 수치 입력 패널을 사용해 값을 직접 입력할 수 있습니다. C를 76, M을 47, Y를 0, K를 4로 설정합니다. HEX, RGB, HSL 출력이 실시간으로 업데이트되어 즉시 웹용 값을 얻을 수 있습니다.

다크 모드 팔레트 만들기

개발자가 다크 테마를 구축하면서 밝은 색상을 더 어두운 변형으로 바꿔야 합니다. #E2E8F0(라이트 슬레이트)을 입력하고 HSL이 hsl(214, 32%, 91%)임을 확인한 뒤, L 채널 입력을 91에서 25로 수동으로 줄여 어두운 동등색을 얻습니다. HEX 출력이 #253443으로 업데이트되어 바로 복사합니다.

팁과 모범 사례

빠른 입력을 위해 # 없이 입력합니다. 자동 감지 정규식은 3b82f6 같은 순수 hex 문자열을 HEX 포맷으로 인식합니다. 해시를 제거하는 디자인 도구에서 직접 붙여넣을 수 있습니다.

정밀한 채널 제어를 위해 RGB 입력을 사용합니다. 정확한 빨간색 값 200이 필요한 색상이 필요하면, 올바른 hex 접두사를 찾는 대신 R 입력에 직접 입력합니다. 최솟값/최댓값 제한으로 실수로 범위를 벗어난 값을 입력하는 것을 방지합니다.

공유 가능한 URL을 통해 색상을 북마크합니다. useShareableState를 통해 색상이 URL에 인코딩되므로 자주 참조하는 브랜드 색상을 북마크하고 값을 다시 입력하지 않고 즉시 다시 열 수 있습니다.

감지 배지는 빠른 유효성 확인 도구입니다. 입력 후 배지가 나타나지 않으면 입력이 유효한 색상으로 인식되지 않은 것입니다. 오타를 확인하세요 — 흔한 실수로는 # 누락, 알파 채널이 있는 rgba 사용(현재 파싱되지 않음), 퍼센트 기반 RGB 값 입력 등이 있습니다.

4가지 색상 모델 모두 편집 가능한 입력이 있습니다. RGB, HSL, HSB, CMYK 모두 전용 수치 입력 패널이 있습니다. 어떤 모델에서든 값을 직접 조정해 시작할 수 있고, 다른 포맷은 실시간으로 업데이트됩니다.

자주 발생하는 문제 및 해결 방법

입력 후 출력 행에 아무것도 나타나지 않습니다. 입력 텍스트가 유효한 색상으로 인식되지 않았습니다. parseColorToHex 함수는 # hex, 순수 hex, rgb(), hsl() 문자열을 처리합니다. 다른 포맷을 입력한 경우(예: CSS 색상 이름 cornflowerblue), 자동 감지가 null로 떨어져 변환이 실행되지 않습니다. 대신 hex 값을 사용하세요.

RGB 입력이 255 이상의 값을 받습니다. 코드가 변경 시 Math.min(255, Math.max(0, val))로 값을 제한하므로, 300을 입력하면 입력이 처리될 때 255로 스냅됩니다. 이는 예상된 동작입니다.

HSL 색상 입력이 360에서 제한됩니다. 색상 필드는 Math.min(360, Math.max(0, val))로 제한됩니다. 361을 입력하면 360으로 설정되고, -1을 입력하면 0으로 설정됩니다.

복사 버튼이 반응하지 않습니다. navigator.clipboard.writeText가 실패할 경우(예: 안전하지 않거나 제한된 컨텍스트), 도구는 임시 textarea 요소를 사용하는 document.execCommand('copy') 방법으로 폴백합니다. 둘 다 실패하면 브라우저가 해당 사이트의 클립보드 권한을 갖고 있는지 확인하세요.

"Loaded from shared link" 토스트가 예기치 않게 나타납니다. 이 토스트는 isFromUrl이 true일 때 한 번 표시되며, URL 쿼리 문자열에 색상이 인코딩되어 있음을 의미합니다. 북마크한 URL을 열었다면 예상된 동작입니다. hasShownShareToast ref 가드로 인해 토스트는 페이지 로드당 한 번만 표시됩니다.

개인정보 보호 및 보안

Color Converter는 JavaScript 계산을 사용해 모든 변환을 로컬로 처리합니다. 색상 값, 입력 텍스트, 변환 결과는 어떤 서버에도 전송되지 않습니다. 공유 가능한 URL은 브라우저 URL에만 색상을 인코딩합니다 — 링크를 공유하기로 선택하지 않는 한 어디에도 전송되지 않습니다. 도구는 복사 작업에 Web Clipboard API를 사용하며, 이 역시 완전히 로컬입니다. 최초 페이지 로드 후에는 완전히 오프라인으로 작동합니다.

자주 묻는 질문

Color Converter는 무료인가요?

네, 계정 없이 완전 무료입니다. 5가지 변환 포맷, 시각적 색상 피커, RGB 및 HSL 수동 입력, 클립보드 복사, 공유 가능한 URL이 모든 사용자에게 무료로 제공됩니다. PresetsPanel 및 HistoryPanel 같은 Supporter 기능은 30일 접근을 위해 $5 Ko-fi 활성화가 필요합니다.

Color Converter는 오프라인으로 작동하나요?

네. 페이지가 한 번 로드되면 모든 변환 로직이 외부 요청 없이 JavaScript에서 완전히 실행됩니다. 네트워크 연결을 끊어도 중단 없이 색상을 계속 변환할 수 있습니다.

Color Converter에서 제 데이터는 안전한가요?

네. 색상 값은 브라우저 메모리에서만 처리됩니다. 어떤 것도 서버로 전송되지 않습니다. 공유 가능한 URL은 클라이언트 측에서 색상을 인코딩합니다 — Glyph Widgets 서버는 작업한 특정 색상을 기록하지 않습니다.

Color Converter는 어떤 포맷을 지원하나요?

도구는 5가지 포맷을 지원합니다: HEX(# 포함 또는 제외된 3자리 또는 6자리 hex 문자열), RGB(rgb(R, G, B) 표기), HSL(hsl(H, S%, L%) 표기), HSB/HSV, CMYK. 5가지 포맷 모두 직접 값 조정을 위한 전용 수치 입력 패널이 있습니다.

HSL과 HSB의 차이점은 무엇인가요?

둘 다 색상(0~360도)과 채도(0~100%)를 사용하지만 세 번째 채널이 다릅니다. HSL은 밝기를 사용하며, 50%가 완전히 채도가 있는 색상이고 100%는 항상 흰색입니다. HSB(HSV라고도 함)는 명도/값을 사용하며, 100%가 가장 순수한 색상이고 0%는 항상 검정입니다. Figma와 대부분의 디자인 도구는 HSB를 표시하고, CSS는 HSL을 사용합니다.

CMYK를 HEX로 변환할 수 있나요?

텍스트 입력의 자동 감지는 원시 CMYK 표기를 파싱하지 않지만, CMYK 수치 입력 패널을 사용해 C, M, Y, K 값을 직접 입력할 수 있습니다. CMYK 값을 조정하면 HEX를 포함한 다른 모든 포맷이 실시간으로 업데이트됩니다.

CMYK 변환이 인쇄 값과 약간 다르게 보이는 이유는?

화면에서 인쇄로의 변환은 색상 프로파일에 따라 달라집니다. 도구는 ICC 프로파일 보정 없이 표준 sRGB에서 CMYK로의 수학 공식을 사용합니다. 인쇄 제작 작업에는 프린터와 종이에 맞는 올바른 ICC 프로파일을 적용하는 색상 관리 도구를 사용하세요.

#F0F 같은 3자리 단축 hex 값을 입력할 수 있나요?

네. parseColorToHex 함수는 /^[0-9a-f]{3,8}$/i에 일치하는 hex 문자열을 감지하며, 여기에 3자리 단축 형식이 포함됩니다. #F0F는 #FF00FF와 동등한 것으로 처리됩니다.

동료와 특정 색상을 어떻게 공유하나요?

도구에서 색상을 변경하고 브라우저 URL을 복사합니다. 현재 hex 값은 useShareableState를 통해 URL 쿼리 문자열에 인코딩되어 있습니다. 동료가 링크를 열면 "Loaded from shared link" 알림과 함께 색상이 모든 포맷에 미리 로드된 상태를 보게 됩니다.

Color Converter는 알파(RGBA / HSLA)를 지원하나요?

현재 버전에서는 지원하지 않습니다. 입력 파서는 rgb()와 hsl()을 처리하지만 rgba()나 hsla()는 처리하지 않습니다. 알파 채널 값은 변환 파이프라인에서 보존되지 않습니다. 완전한 알파 지원을 위해서는 RGB 또는 HSL 값을 수동으로 추출하고 알파를 별도로 처리하세요.

관련 도구

• Color Picker — 업로드한 이미지나 화면에서 직접 색상을 샘플링하고 결과를 변환기로 보냅니다.
• Contrast Checker — 변환한 두 색상이 WCAG AA 또는 AAA 대비 요건을 충족하는지 확인합니다.
• 곧 출시 예정: Palette Generator — 기본 색상에서 조화로운 색상 팔레트를 생성하고 각 스와치를 원하는 포맷으로 변환합니다.

지금 Color Converter를 사용해 보세요: Glyph Widgets Color Converter