CrateX.app 로고

CrateX.app

색상 형식 변환

HEX, RGB, HSL, CMYK 간 색상을 상호 변환하고 라이브 프리뷰를 제공합니다(데스크톱에서 미리보기 지원)

사용 안내

🚀 빠른 시작

  • 선택/입력: #1E90FF, rgb(30,144,255), hsl(210,100%,56%) 등 지원 형식을 입력하거나 컬러 피커 사용
  • 자동 변환: 한 형식을 입력하면 나머지 형식이 즉시 갱신
  • 복사: 각 형식 옆 복사 버튼으로 정규화된 문자열 복사

📌 자주 쓰는 시나리오

  • 디자인 전달: 시안의 HEX를 CSS RGB/HSL로 변환
  • 스타일 가이드: 컴포넌트 라이브러리의 색상 형식/표기 통일
  • 인쇄 참고: 화면 색상을 CMYK로 변환해 1차 추정(교정 필요)
  • 접근성: 미리보기로 대비를 빠르게 가늠(정확한 비율은 전용 도구 사용)

🎛️ 변환 매개변수 및 표시

  • 입력 규칙: HEX는 6자리만 지원(알파 없음); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. 입력은 대소문자 구분 없음
  • 미리보기: 데스크톱 우측 라이브 미리보기; 모바일은 미리보기 없는 경량 모드
  • 색상 선택기: 각 카드 우측 상단 팔레트 버튼으로 열기
  • HEX 대문자 정책: 출력은 대문자로 표준화(예 #1E90FF), 입력은 대소문자 구분 안 함; 전환 스위치 없음
  • 미세 조정: 채널 문자를 좌우로 드래그(Shift×10, Alt÷0.1)
  • 복사 출력: 복사 버튼은 표준화된 문자열(HEX 대문자)을 출력

🧭 사용 팁

  • 정밀도: 기기/앱별 색 관리가 달라 스포이드 값이 약간 다를 수 있음
  • 알파: 현재 형식은 알파 미포함; rgba()/hsla() 또는 별도 채널 사용
  • 색 공간: 웹 기본은 sRGB; P3/Display‑P3 환경에서는 주의 깊게 검증
  • 팀 일관성: CSS에서 표준 형식(HSL 등)을 합의

⚠️ 제한 및 호환성

  • 기기간 차이: 모니터/브라우저/OS의 색 관리가 달라 보기가 다를 수 있음
  • CMYK 근사: 참고용 값이며 실제 인쇄는 ICC/전용 흐름 필요
  • 알파 없음: 투명도는 처리하지 않음

🔒 개인정보 및 보안

  • 모든 처리는 브라우저 내에서 이루어지며, 데이터는 기기를 떠나지 않습니다

❓ 자주 묻는 질문

#RGB 축약 표기는 지원하나요?

현재 미지원입니다. 6자리 HEX(#RRGGBB)를 사용하세요.

RGB/HSL의 허용 범위는?

RGB는 0–255(정수); H는 0–360, S/L은 0–100%

왜 CMYK가 인쇄 결과와 다르죠?

CMYK는 용지/잉크/장비/ICC에 좌우됩니다. 본 도구 값은 근사치로, 실제 인쇄는 교정이 필요합니다

알파(rgba()/hsla())를 지원하나요?

현재는 지원하지 않습니다. rgba()/hsla() 또는 별도의 알파 값을 사용하세요.

미리보기나 변환 값이 앱/브라우저와 다른 이유는?

컬러 관리, 렌더링, 화면 보정 차이 때문입니다. 본 도구는 sRGB 기준으로 계산하며 참고용입니다.

와이드 게이머트(P3/Display‑P3) 지원하나요?

현재 sRGB 기반입니다. P3 워크플로우에서는 대상 기기와 ICC로 검증하세요.

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

가능하지만 CMYK→화면색은 근사치입니다. 인쇄는 ICC와 프루핑이 필요합니다.

Color Converter - HEX RGB HSL CMYK Picker & Converter - CrateX.app