색상 변환기

색상 변환기 사용법

왼쪽 색상 피커로 색을 직접 고르거나, 오른쪽 입력칸에 HEX·RGB·HSL 코드를 붙여넣으세요. 어느 쪽을 수정해도 미리보기 스와치와 세 가지 포맷 결과가 즉시 함께 갱신됩니다. 각 줄의 복사 버튼으로 원하는 형식의 코드를 클립보드에 담을 수 있습니다. HEX는 3자리 축약형(#abc)도 자동으로 인식합니다.

색상 포맷 소개

웹과 디자인에서 같은 색을 여러 방식으로 표기합니다. 이 도구는 아래 세 가지 표준 포맷을 서로 정확히 변환합니다.

• HEX: #RRGGBB — 빨강·초록·파랑을 각각 16진수 두 자리로 표기 (예: #3B82F6)
• RGB: rgb(r,g,b) — 빨강·초록·파랑 빛의 세기를 0~255로 표기 (예: rgb(59,130,246))
• HSL: hsl(h,s%,l%) — 색상(0~360도)·채도(%)·명도(%)로 표기 (예: hsl(217,91%,60%))
• HSV: hsv(h,s%,v%) — 색상·채도·명도(Value)로 표기. 그래픽 툴의 컬러 픽커에서 자주 쓰입니다.
• CMYK: cmyk(c%,m%,y%,k%) — 인쇄용 잉크 비율(청록·자홍·노랑·검정). RGB를 변환한 근사값입니다.
• 색상 이름: CSS 표준 색상 이름(예: red, skyblue). 정확히 일치하면 이름만, 비슷하면 가장 가까운 이름을 '(근사)'로 표시합니다. 이름을 입력해도 색이 인식됩니다.

HSV·CMYK 값과 밝기 변형(틴트·셰이드) 스와치도 함께 제공합니다. CMYK는 화면(RGB) 기준 표준 공식 변환값으로, 실제 인쇄 색상은 잉크·용지에 따라 달라질 수 있습니다.

입력을 인식하는 방식

입력칸은 형식을 따로 고르지 않아도 됩니다. 붙여넣은 값을 순서대로 검사해 다음 네 가지를 알아봅니다.

• CSS 색상 이름 — red, skyblue, rebeccapurple처럼 표준 이름 140가지를 인식합니다.
• HEX — #3b82f6, #f80은 물론 #을 뺀 3b82f6도 인식합니다. 세 자리는 각 자리를 두 번 반복해 여섯 자리로 해석합니다.
• RGB — rgb(59,130,246) 형태를 읽으며 rgba도 받습니다. 세 값이 모두 255 이하여야 합니다.
• HSL — hsl(217,91%,60%) 형태를 읽으며 hsla도 받습니다. 채도·명도는 100 이하여야 합니다.

인식되면 안내 문구가 변환 완료로 바뀌고, 형식이 어긋나면 어떤 형식을 쓸 수 있는지 알려 줍니다. 색상 피커로 색을 고르면 입력칸에도 같은 HEX가 채워집니다.

변환 계산과 표시

HEX와 RGB는 16진수와 10진수 표기의 차이라 값이 정확히 1:1로 대응합니다. HSL과 HSV는 R·G·B 중 최댓값과 최솟값의 차이로 색상 각도와 채도를 구하는 표준 공식을 씁니다. HSL은 명도(Lightness)를 최댓값과 최솟값의 가운데로 잡고, HSV는 명도(Value)를 최댓값으로 잡는다는 점이 다릅니다. 각도·백분율은 정수로 반올림해 표시합니다.

CMYK는 R·G·B에서 가장 밝은 값을 기준으로 검정(K)을 먼저 뽑고 나머지를 청록·자홍·노랑으로 나누는 방식으로 계산한 근사값입니다. 화면 색을 인쇄용으로 옮길 때 참고하는 정도로만 보고, 실제 인쇄 색은 잉크와 용지에 따라 달라집니다.

색상 이름은 표준 색 140가지와 R·G·B 거리를 재서 가장 가까운 이름을 찾습니다. 정확히 일치하면 이름만, 비슷하기만 하면 뒤에 (근사)가 붙습니다.

밝기 변형과 복사

결과 아래 다섯 칸은 지금 색을 -40%, -20%, 0%, +20%, +40%만큼 검정 또는 흰색 쪽으로 섞은 틴트·셰이드입니다. 가운데 칸이 원래 색이며 테두리로 표시됩니다. 각 칸을 클릭하면 그 색의 HEX가 복사되어, 호버·비활성 상태처럼 같은 계열의 밝기 변형이 필요할 때 바로 쓸 수 있습니다. 줄마다 있는 복사 버튼은 해당 형식 하나만, 모든 포맷 한 번에 복사는 HEX·RGB·HSL·HSV·CMYK 다섯 줄을 한꺼번에 복사합니다.

활용 예시

• 디자인 시안의 HEX를 받아 CSS에 쓸 rgb·hsl 값으로 옮기기
• HSL로 바꿔 채도와 명도만 조정한 뒤 다시 HEX로 되돌리기
• 버튼의 기본·호버·눌림 색을 밝기 변형에서 골라 한 계열로 맞추기
• 화면용으로 정한 색을 인쇄물에 쓰기 전 CMYK 근사값 확인하기
• 코드에 적힌 색 이름이 실제로 어떤 색인지 확인하기

주의점과 팁

• HSL·HSV 값은 정수로 반올림해 보여 주므로, 변환을 여러 번 왕복하면 마지막 자리에서 미세한 차이가 생길 수 있습니다.
• CMYK는 표준 공식에 따른 근사값입니다. 정확한 인쇄 색이 필요하면 인쇄소의 색상 프로파일을 따르세요.
• 알파(투명도)는 변환 결과에 포함되지 않습니다. rgba·hsla를 입력해도 색상 부분만 읽습니다.
• 글자와 배경으로 함께 쓸 색이라면 명암대비도 따로 확인해 보세요.
• 모든 변환은 브라우저 안에서 이루어지며 입력한 색값은 서버로 전송되지 않습니다.

자주 묻는 질문

HEX 색상 코드를 RGB로 어떻게 바꾸나요?

입력칸에 #FF8800 처럼 HEX 코드를 붙여넣으면 RGB(rgb(255,136,0))와 HSL 결과가 즉시 함께 표시됩니다. HEX는 빨강·초록·파랑 각각을 16진수 두 자리로 적은 형식으로, 각 자리를 10진수로 변환하면 RGB 값이 됩니다. #abc 처럼 3자리 축약형도 자동으로 인식합니다.

3자리 HEX(#abc)도 입력할 수 있나요?

네. #abc 같은 3자리 축약형은 각 자리를 두 번 반복한 #aabbcc로 해석합니다. 예를 들어 #f80은 #ff8800과 같은 색상입니다. 결과는 항상 6자리 정식 표기(#RRGGBB)로 보여드립니다.

RGB와 HSL은 무엇이 다른가요?

RGB는 빨강·초록·파랑 빛의 세기를 0~255로 섞어 색을 표현하고, HSL은 색상(Hue 0~360도)·채도(Saturation)·명도(Lightness)로 표현합니다. HSL은 색의 밝기나 선명도를 직관적으로 조절하기 좋아 디자인 작업에 자주 쓰이며, 이 변환기는 두 값을 표준 공식으로 정확히 상호 변환합니다.

입력한 색상 코드가 인식되지 않아요.

HEX는 #으로 시작하는 3자리 또는 6자리, RGB는 rgb(0~255,0~255,0~255), HSL은 hsl(0~360,0~100%,0~100%) 형식을 따라야 합니다. 괄호·% 기호를 생략하거나 숫자만 입력해도 최대한 인식하지만, 범위를 벗어난 값이나 형식이 크게 어긋난 입력은 변환되지 않습니다.

색상 이름으로도 찾을 수 있나요?

네. red, skyblue처럼 CSS 표준 색상 이름 140가지를 입력하면 해당 색으로 변환됩니다. 결과의 색상 이름 줄에는 지금 색과 가장 가까운 이름이 표시되고, 정확히 일치하지 않으면 뒤에 (근사)가 붙습니다.

HSV와 CMYK는 어떤 값인가요?

HSV는 색상·채도·명도(Value)로 표기하는 형식으로 그래픽 툴의 컬러 피커에서 자주 쓰입니다. CMYK는 인쇄용 잉크 비율로, 화면 색을 표준 공식으로 옮긴 근사값이라 실제 인쇄 색은 잉크와 용지에 따라 달라질 수 있습니다.

밝기 변형 스와치는 어떻게 만들어지나요?

지금 색을 -40%, -20%, 0%, +20%, +40%만큼 검정 또는 흰색 쪽으로 섞은 색입니다. 가운데가 원래 색이며, 각 칸을 클릭하면 그 색의 HEX가 복사됩니다.

여러 형식을 한 번에 복사할 수 있나요?

모든 포맷 한 번에 복사 버튼을 누르면 HEX, RGB, HSL, HSV, CMYK 다섯 줄이 한꺼번에 복사됩니다. 한 가지 형식만 필요하면 각 줄의 복사 버튼을 쓰세요.