본문으로 건너뛰기
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차 추정(교정 필요)

접근성

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

변환 매개변수 및 표시

입력 규칙: 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

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