본문으로 건너뛰기
AZ Tools

컬러 포맷 변환기

어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.

미리보기
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91% 60%)
  • HSVhsv(217, 76%, 96%)
  • OKLCHoklch(62.3% 0.188 259.8)
  • CSS 변수--color: #3B82F6;

사용법

  1. 컬러 피커를 쓰거나 HEX 값(3 또는 6자리, # 생략 가능)을 붙여넣으세요.
  2. 모든 포맷이 실시간으로 갱신됩니다.
  3. 필요한 포맷의 복사 버튼을 누르세요.

자세한 설명

펼치기

색을 한 번 입력하면 스타일시트나 디자인 도구가 요구할 만한 모든 표기법으로 되읽을 수 있습니다. hex, rgb(), hsl(), hsv, oklch가 각각 복사 버튼과 함께 나옵니다. 흥미로운 것은 oklch입니다. 밝기가 조잡한 산술 평균인 HSL과 달리 지각 모델 위에 세워져 있어서, L 값이 같은 두 색은 눈에도 똑같이 밝아 보이고 색상만 바꿔도 밝기가 따라 끌려가지 않습니다. 한 단계가 실제로 한 단계로 읽히는 팔레트를 만드는 제정신인 방법이 이것이고, 요즘 CSS 색 작업에서 점점 많이 쓰이는 이유이기도 합니다. 모든 변환은 입력하는 즉시 페이지 안에서 이루어지며 입력한 내용은 업로드되지 않습니다.

자주 묻는 질문

OKLCH가 뭐예요?

지각적으로 균등한 색 공간이라 숫자 거리와 시각적 거리가 비례합니다. 최신 CSS가 기본 지원하며 일부 디자인 툴도 지원하기 시작했습니다. 그라디언트가 자연스럽고 대비 관리가 쉬워집니다.

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 임의 값 복사.

색상·CSS

랜덤 색상 생성기

랜덤 색상을 HEX·RGB·HSL로 한꺼번에 생성합니다 — 개수를 고르고, 원클릭 복사, 즉시 다시 생성해 디자인 영감을 얻으세요.

랜덤

OKLCH 컬러 피커

지각적으로 균등한 OKLCH 공간(명도·채도·색조)에서 색 픽 — 각 픽이 sRGB 디스플레이 gamut 안에 들어가는지 표시.

색상·CSS

CSS color-mix() 미리보기 (보간 공간 비교)

모던 CSS color-mix() 함수가 두 색을 보간 공간(srgb, hsl, oklch, lab 등)에 따라 어떻게 다르게 섞는지 비교 — 실시간 스와치와 복사 가능한 CSS.

색상·CSS

파장 → 색 변환기 (nm → sRGB)

빛의 파장(380–780 nm 가시광)을 sRGB 근사 색으로 변환 — 클릭 가능한 무지개 그라데이션 바와 실제 태양 분광에서 가져온 프라운호퍼 흡수선 레퍼런스 포함.

색상·CSS

CMYK ↔ RGB 색상 변환기 (인쇄용)

화면용 RGB/hex 색상을 인쇄용 CMYK 퍼센트로 (또는 그 반대로) 변환합니다. Simple, GCR (그레이 성분 대체), UCR (언더컬러 제거) 블랙 생성 방식과 채널 분판 미리보기, 총 잉크 커버리지 표시를 지원합니다.

색상·CSS