본문으로 건너뛰기
CrateX.app 로고

CrateX.app

색상 변환기

색상 변환기

색상 변환기로 HEX, RGB, HSL, CMYK를 서로 변환하고 실시간 미리보기와 색상 선택기로 결과를 확인할 수 있습니다. CSS 색상 조정, 디자인 전달, 스타일 가이드 정리에 유용합니다.

HEX

#

RGB

HSL

CMYK
색상 변환기

빠른 시작

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

자주 쓰는 활용 사례

디자인 전달

시안의 HEX를 CSS RGB/HSL로 변환

스타일 가이드

컴포넌트 라이브러리의 색상 형식/표기 통일

인쇄 참고

화면 색상을 CMYK로 변환해 1차 추정(교정 필요)

접근성

미리보기로 대비를 빠르게 가늠(정확한 비율은 전용 도구 사용)

rgb to hsl, hsl to rgb, 색상 코드 변환 같은 작업도 같은 확인 흐름에서 함께 처리할 수 있어 복사나 내보내기 전에 결과를 빠르게 점검할 수 있습니다.

변환 매개변수 및 표시

입력 규칙: 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/전용 흐름 필요
알파 없음: 투명도는 처리하지 않음

개인정보 및 보안

모든 처리는 브라우저에서 로컬로 이루어지며 데이터는 기기를 벗어나지 않습니다.

자주 묻는 질문

5

다음 작업에 도움이 되는 관련 도구입니다.