색상 하나로 모든 컬러 코드 변환

HEX, RGB, HSL, CMYK, HSV까지 — 어떤 값을 입력해도 나머지가 즉시 계산됩니다. 클릭 한 번으로 복사하세요.

클릭해서 색 선택
RGB
HSL
HSV / HSB
CMYK (인쇄용)
CSS 변수

색상 코드 가이드

HEX·RGB·HSL·CMYK, 언제 무엇을 써야 할까요

HEX와 RGB는 웹·앱 화면의 표준 표기법으로 CSS에 그대로 붙여 쓸 수 있습니다. HSL은 색상·채도·명도로 색을 설명해서 색을 더 밝게 하거나 채도를 낮추는 감각적인 조정에 편리하고, HSV/HSB는 포토샵 같은 디자인 툴의 색상 선택기에서 흔히 쓰이는 표기법입니다. CMYK만 조금 결이 달라서, 잉크를 얼마나 섞을지를 나타내는 인쇄용 값이라 인쇄소에 파일을 넘기기 전에 꼭 확인해야 합니다.

HEX랑 RGB는 같은 색 아닌가요?

네, 둘 다 빛의 삼원색(RGB) 값을 가리키는 서로 다른 표기법일 뿐 같은 색이에요. HEX는 16진수로 압축돼 있어 CSS에 붙여넣기 편하고, RGB는 채널별 숫자가 그대로 보여서 값을 직접 조정할 때 편리합니다.

인쇄용 디자인엔 어떤 값을 써야 하나요?

인쇄는 빛이 아니라 잉크를 섞는 방식이라 CMYK 값을 기준으로 삼아야 화면과 실제 인쇄물의 색 차이를 줄일 수 있어요. 다만 프린터와 용지에 따라 결과가 달라질 수 있으니 인쇄소의 컬러 프로파일도 함께 확인해 보세요.

CSS 변수는 왜 필요한가요?

--color: 처럼 값을 변수로 선언해두면 사이트 전체에서 같은 색을 재사용하다가, 나중에 한 곳만 바꿔도 전체가 한 번에 바뀝니다. 다크모드를 구현할 때도 자주 쓰이는 방식이에요.

어울리는 색이 궁금하다면
색상환에서 찾아보세요

보색, 유사색, 삼각 배색까지 — 색상환에서 바로 확인할 수 있어요.

색상환 열어보기 팔레트 스튜디오로 가기
복사됨 ✓