컬러 포맷 변환기
컬러 피커로 색을 고르거나 HEX 값을 붙여넣으면, 자주 쓰는 모든 CSS 포맷으로 즉시 변환합니다 — HEX, 모던 공백 구분 RGB, 레거시 콤마 RGB, HSL, HSV, OKLCH(최신 CSS가 선호하는 지각 균등 색 공간), 바로 붙여넣을 수 있는 CSS 변수. 각 값마다 복사 버튼 포함.
- HEX
#3B82F6 - RGB
rgb(59 130 246) - RGB (legacy)
rgb(59, 130, 246) - HSL
hsl(217 91% 60%) - HSV
hsv(217, 76%, 96%) - OKLCH
oklch(62.3% 0.188 259.8) - CSS 변수
--color: #3B82F6;
사용법
- 컬러 피커를 쓰거나 HEX 값(3 또는 6자리, # 생략 가능)을 붙여넣으세요.
- 모든 포맷이 실시간으로 갱신됩니다.
- 필요한 포맷의 복사 버튼을 누르세요.
자주 묻는 질문
- OKLCH가 뭐예요?
- 지각적으로 균등한 색 공간이라 숫자 거리와 시각적 거리가 비례합니다. 최신 CSS가 기본 지원하며 Figma 2024+ 등 디자인 툴도 도입 중 — 그라디언트가 자연스럽고 대비 관리가 쉬워집니다.
- RGB가 왜 두 줄인가요?
- 모던 CSS는 공백 구분 'rgb(59 130 246)', 레거시·구형 브라우저는 콤마 구분 'rgb(59, 130, 246)'. 색은 동일합니다.
- 투명도(RGBA/HSLA)는?
- 이 도구는 불투명 색에 집중합니다. 투명도가 필요하면 모던 문법에 '/ 0.5'를 덧붙이거나(예: 'rgb(59 130 246 / 0.5)') 레거시 'rgba(…, 0.5)' 형태를 쓰세요.
- HSV는 HSB와 같나요?
- 네 — HSV(Value)와 HSB(Brightness)는 같은 모델의 다른 이름. CSS는 hsv()를 직접 받지 않으므로 스타일시트엔 HSL을 쓰세요.
이 주제의 가이드
관련 도구
HSL 색상 픽커
Hue·Saturation·Lightness·Alpha 슬라이더로 색 조정 — HEX·RGB·HSL·Tailwind 임의 값 복사.
랜덤 색상 생성기
랜덤 색상을 HEX·RGB·HSL로 한꺼번에 생성합니다 — 개수를 고르고, 원클릭 복사, 즉시 다시 생성해 디자인 영감을 얻으세요.
OKLCH 컬러 피커
지각적으로 균등한 OKLCH 공간(명도·채도·색조)에서 색 픽 — 각 픽이 sRGB 디스플레이 gamut 안에 들어가는지 표시.
CSS color-mix() 미리보기 (보간 공간 비교)
모던 CSS `color-mix()` 함수가 두 색을 보간 공간(srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear)에 따라 어떻게 다르게 섞는지 한눈에 비교 — 실시간 스와치, 계산된 hex, 공간별 전체 그라데이션, 그리고 복사 가능한 CSS.
파장 → 색 변환기 (nm → sRGB)
빛의 파장(380–780 nm 가시광)을 sRGB 근사 색으로 변환 — 클릭 가능한 무지개 그라데이션 바와 실제 태양 분광에서 가져온 프라운호퍼 흡수선 레퍼런스 포함.
CMYK ↔ RGB 색상 변환기 (인쇄용)
화면용 RGB/hex 색상을 인쇄용 CMYK 퍼센트로 (또는 그 반대로) 변환합니다. Simple, GCR (그레이 성분 대체), UCR (언더컬러 제거) 블랙 생성 방식과 채널 분판 미리보기, 총 잉크 커버리지 표시를 지원합니다.