색상 변환기

어떤 색이든 HEX, RGB, HSL, HSV, CMYK 사이로 변환해 보세요. 색을 고르거나 원하는 형식으로 값을 입력하면, 나머지 모든 표기가 브라우저 안에서 곧바로 업데이트됩니다.

#f5530c

클릭하면 색상 선택기가 열립니다

색상 형식

HEX

RGB

HSL

HSV

hsv(18, 95%, 96%)

CMYK

cmyk(0%, 66%, 95%, 4%)

색상 변환기 사용 방법

1
색을 고르거나 붙여넣기
색상 견본을 클릭해 색상 선택기를 열거나, HEX, RGB, HSL 입력란 중 하나에 값을 붙여넣으세요. 어떤 색을 선택하든 도구 전체가 그 색에 맞춰 바뀝니다.
2
원하는 형식으로 편집
HEX, RGB, HSL 입력란에 직접 입력해 보세요. 값을 바꾸는 즉시 HSV와 CMYK를 포함한 나머지 모든 표기가 다시 계산됩니다.
3
모든 표기 한눈에 보기
같은 색을 다섯 가지 표기로 한 번에 확인할 수 있어, CSS와 인쇄, 이미지 편집기를 오가며 다른 도구를 따로 찾지 않고도 디자인 색을 맞출 수 있습니다.

4
필요한 값 복사
각 값 옆의 복사 버튼을 누르면 클립보드에 담기므로, 스타일시트나 디자인 파일에 바로 붙여넣을 수 있습니다.

색상 형식 실전 가이드

같은 색, 다른 표기

HEX, RGB, HSL, HSV, CMYK는 서로 다른 색이 아닙니다. 화면 작업에서 이들은 색 공간 안의 같은 한 점을 적는 서로 다른 방식일 뿐입니다. 순수한 빨강은 #ff0000으로도, rgb(255, 0, 0)으로도, hsl(0, 100%, 50%)으로도 쓸 수 있으며, 셋 모두 똑같이 렌더링됩니다. 어떤 표기를 고를지는 지금 맡은 작업에서 어느 쪽이 다루기 더 쉬운가의 문제이며, 그래서 여러 표기를 나란히 보여 주는 변환기가 실제로 시간을 아껴 줍니다. 직접 계산하는 대신, 자신의 도구에 맞는 형식을 골라 복사하면 됩니다.

단 하나의 예외는 CMYK인데, 이는 빛이 아니라 잉크를 대상으로 하므로 나머지 형식과 완벽하게 대응되지 않습니다. 염두에 둘 만한 점이며 아래에서 다시 다루겠습니다.

HEX와 RGB는 같은 숫자입니다

RGB는 색을 빨강, 초록, 파랑 세 채널로 나타내며, 각 채널은 0부터 255까지의 범위를 가지고 빛으로 혼합됩니다. HEX는 단지 그 똑같은 세 숫자를 16진법으로, 채널당 16진수 두 자리로 적은 것입니다. 그래서 #f5530c에서 f5는 빨강 채널로 245, 53은 초록으로 83, 0c는 파랑으로 12이며, 이는 정확히 rgb(245, 83, 12)가 됩니다. 1바이트가 0부터 255까지의 값을 담으므로 각 채널은 정확히 16진수 두 자리가 필요하고, 두 형식 사이의 변환은 손실 없이 곧바로 이루어집니다.

단축 HEX는 편의를 위한 것으로, 세 자리 코드는 각 자리를 두 번씩 반복합니다. 그래서 #f50은 #ff5500으로 확장됩니다. 이 도구는 단축 표기를 브라우저와 똑같은 방식으로 읽으며, 앞에 해시를 붙이든 붙이지 않든, 대문자든 소문자든 코드를 받아들입니다.

알파: RGBA와 HSLA

알파 채널을 더하면 색이 부분적으로 투명해집니다. RGBA와 HSLA는 네 번째 값, 즉 완전히 투명한 0부터 완전히 불투명한 1까지의 불투명도를 덧붙입니다. 그래서 rgba(245, 83, 12, 0.5)는 불투명도가 절반인 같은 주황색입니다. 최신 CSS는 여덟 자리 HEX도 지원하는데, 여기서는 마지막 두 자리가 알파를 1바이트로 인코딩합니다. 그래서 절반의 알파는 대략 색 뒤에 16진수 쌍 80을 붙인 것에 해당합니다.

알파는 색이 뒤에 놓인 무엇과도 섞이게 해 주며, 이는 오버레이, 스크림, 부드러운 그림자, 색이 입혀진 유리 효과에 꼭 필요합니다. 같은 알파라도 배경이 다르면 다르게 보인다는 점을 기억하세요. 투명도란 최종 모습이 자신의 색과 그 아래 레이어가 섞인 결과라는 뜻이기 때문입니다.

HSL이 조정하기 더 쉬운 이유

HSL은 사람이 색을 떠올리는 방식 그대로 색을 나타냅니다. 색조(hue)는 색상환에서 0도부터 360도까지의 위치, 채도(saturation)는 색이 얼마나 선명한지를 나타내는 백분율, 명도(lightness)는 얼마나 밝은지를 나타내는 백분율입니다. 이런 구조 덕분에 직접 조정하기가 직관적입니다. 같은 색의 더 어두운 음영을 얻으려면 색조와 채도는 그대로 두고 명도만 낮추면 되고, 색을 차분하게 죽이려면 채도를 낮추면 됩니다. 순수한 RGB에서 이와 같은 작업을 하려면 세 채널을 한꺼번에 맞춰 바꿔야 하는데, 이는 눈대중으로 하기가 훨씬 어렵습니다.

그래서 HSL은 색상 체계를 구축할 때 빛을 발합니다. 기본 색보다 살짝 더 어두운 호버 상태가 필요하거나, 같은 색조를 공유하되 명도만 단계적으로 달라지는 색 견본 줄이 필요한가요? HSL 숫자 하나만 밀어 주면 됩니다. HSV는 HSB라고도 쓰며 이와 밀접하게 관련되어 있지만, 색조와 채도에 명도(lightness) 대신 명도(value), 즉 밝기를 짝짓습니다. 또한 많은 이미지 편집기와 색상 선택기가 노출하는 모델이므로, 두 가지를 모두 읽을 수 있으면 여러 디자인 도구를 능숙하게 오갈 수 있습니다.

예제 풀이: 흰색, 검정, 그리고 중간 색

양 끝점은 깔끔합니다. 흰색은 #ffffff이며 rgb(255, 255, 255)이자 hsl(0, 0%, 100%)입니다. 모든 채널이 최대치이거나, HSL로 말하면 채도가 없는 완전한 명도라서 색조는 의미가 없습니다. 검정은 #000000, rgb(0, 0, 0), hsl(0, 0%, 0%)으로 모든 것이 0입니다. 중간 회색은 그 중간쯤인 #808080과 rgb(128, 128, 128) 근처에 자리하며, HSL로는 hsl(0, 0%, 50%)인데, 이는 어떤 무채색이든 채도가 0이고 명도가 그 밝기를 따라간다는 점을 잘 보여 줍니다.

이제 실제 색을 봅시다. 같은 주황색 #f5530c는 rgb(245, 83, 12)로, 대략 hsl(18, 92%, 50%)로 읽힙니다. HSL 형태는 그것이 빨강-주황에 가까운 따뜻한 색조이고, 채도가 높으며, 중간 명도라는 점을 한눈에 알려 주는데, 이는 HEX 문자열이 감추는 정보입니다. 이들 중 아무것이나 도구에 붙여넣고 나머지가 즉시 채워지는 모습을 지켜보세요.

CMYK와 화면-인쇄 변환의 한계

CMYK는 시안(cyan), 마젠타(magenta), 옐로(yellow), 그리고 검정을 뜻하는 키(key)를 가리키며, 화면 위의 빛이 아니라 종이 위의 잉크를 위해 만들어진 감산 혼합 모델입니다. 종이가 반사하는 빛을 빼는 방식으로 작동하기 때문에, 빛나는 디스플레이가 표현할 수 있는 모든 선명한 색을 재현하지는 못합니다. 그래서 화면에서 찬란하던 파랑이나 초록이 인쇄에서는 종종 더 칙칙하게 나옵니다. 이 도구가 알려 주는 CMYK 값은 RGB에서 수학적으로 곧바로 변환한 것이라 출발점으로서는 진정으로 유용하지만, 색 관리가 된 인쇄 워크플로를 대신하지는 못합니다.

색상이 중요한 인쇄에서는 장치와 종이, 잉크가 모두 결과를 바꾸므로, 반드시 사용하는 프린터의 실제 ICC 프로파일과 교정쇄에 대조해 확인하세요. 여기서 나오는 CMYK 출력은 보장이 아니라 빠른 추정치라고 생각하면 됩니다.

이름 있는 색과 넓은 색역으로의 도약

CSS는 tomato, rebeccapurple, slategray 같은 약 150개의 이름 있는 색도 함께 제공하는데, 각각은 특정 16진수 값의 별칭일 뿐입니다. 빠른 프로토타이핑이나 기억하기 쉬운 색조에는 편리하지만, 실제 디자인 체계에서는 명시적인 16진수나 HSL 값이 더 세밀한 제어와 일관성을 줍니다. 이름 있는 색은 편리한 라벨일 뿐, 별도의 색 공간이 아닙니다.

앞을 내다보면, 더 새로운 CSS 색상 함수들은 이들 형식이 전제하는 고전적인 sRGB 색역을 넘어섭니다. 지각적으로 균일한 oklch나 더 넓은 display-p3 같은 색 공간을 위한 함수들은 HEX와 RGB가 도달할 수 있는 것보다 더 채도가 높은 색을 표현할 수 있는데, 이는 최신 화면이 점점 더 뛰어나지면서 중요해집니다. 이 도구가 다루는 HEX, RGB, HSL, HSV 값은 여전히 웹의 일상적 통화로 남아 있으며, 이를 이해하는 것이 그 더 새로운 색 공간을 자신 있게 받아들이는 토대가 됩니다.

자주 묻는 질문

HEX 색상을 RGB로 어떻게 변환하나요?

#f5530c 같은 HEX 코드를 HEX 입력란에 붙여넣으면, 그 아래에 RGB 값이 HSL, HSV, CMYK와 함께 즉시 표시됩니다. 이 경우 RGB 값은 rgb(245, 83, 12)입니다. HEX와 RGB는 동일한 8비트 색상 채널을 나타내므로 변환은 정확하게 이루어집니다.

HSL과 HSV는 어떻게 다른가요?

두 형식 모두 색조를 기준으로 색을 나타내지만, HSL은 여기에 채도와 명도(Lightness)를 결합하고, HSV(HSB라고도 함)는 채도와 명도(Value), 즉 밝기를 사용합니다. HSL은 CSS에서 흔히 쓰이는 반면, HSV는 여러 이미지 편집기와 색상 선택기에서 볼 수 있습니다. 이 변환기는 두 가지를 모두 함께 보여 주므로, 직접 계산하지 않고도 여러 디자인 도구 사이를 자유롭게 오갈 수 있습니다.

3자리 단축 HEX 표기도 지원하나요?

네. #f50 같은 단축 코드는 브라우저가 확장하는 방식 그대로 #ff5500으로 인식됩니다. HEX 값은 앞에 해시 기호(#)를 붙여도, 붙이지 않아도 되며 대문자와 소문자 모두 사용할 수 있습니다.

CMYK는 어디에 쓰이나요?

CMYK는 시안(Cyan), 마젠타(Magenta), 옐로(Yellow), 그리고 검정을 뜻하는 키(Key)를 가리키며, 인쇄에 사용되는 잉크 모델입니다. 여기 표시되는 값은 RGB에서 수학적으로 곧바로 변환한 결과입니다. 화면과 잉크는 색을 재현하는 방식이 서로 다르므로, 색상이 중요한 인쇄 작업에서는 반드시 사용하는 프린터의 고유 프로파일과 대조해 확인하세요.

내 데이터가 서버에 업로드되나요?

아니요. 모든 변환은 전적으로 브라우저에서 실행됩니다. 입력한 내용은 업로드되거나 기록·저장되지 않으므로 작업 내용이 완전히 비공개로 유지되며, 이 도구는 오프라인에서도 계속 작동합니다.