색상 코드 변환기

HEX, RGB, HSL은 같은 웹 색상을 표현해요

HEX와 RGB는 모두 빨강, 초록, 파랑 빛의 채널을 표현해요. 6자리 HEX 코드는 채널마다 16진수 두 자리를 사용해요. #3366FF는 빨강 0x33 = 51, 초록 0x66 = 102, 파랑 0xFF = 255를 뜻해요. 3자리 축약형 #0F8은 각 자릿수를 반복해 #00FF88이 돼요. 변환기는 복사 결과가 일정하도록 항상 대문자 6자리 HEX 값을 반환해요.

HSL은 색상, 채도, 명도를 나타내요. 색상은 색상환 위의 각도이고, 채도는 색이 얼마나 선명하거나 회색에 가까운지를 나타내요. 명도는 0%의 검정에서 약 50%의 해당 색상을 지나 100%의 흰색으로 이어져요. 빨강·초록·파랑 채널을 직접 생각하지 않고 비슷한 색상군을 조정할 때 HSL이 더 편리할 수 있어요.

변환 방향과 공식

HEX에서 RGB로 변환할 때 16진수 두 자리씩을 0~255의 정수로 바꿔요. RGB에서 HEX는 반대로 변환하며 16진수가 한 자리면 앞에 0을 붙여요. RGB에서 HSL은 각 채널을 0~1로 정규화한 뒤 최댓값과 최솟값을 구해 명도, 채도, 색상 구간을 계산해요. HSL에서 RGB는 채도와 명도로 크로마를 계산하고 색상 구간에 배치한 뒤 명도 오프셋을 더하고 최종 RGB 채널을 반올림해요.

HEX→RGB, RGB→HEX, HEX→HSL, HSL→HEX, RGB→HSL, HSL→RGB의 여섯 방향을 모두 지원해요. HEX와 HSL 간 변환은 내부적으로 같은 RGB 채널을 거쳐요. 결과는 CSS RGB와 6자리 HEX의 정수 채널 한도 안에서 같은 색상을 나타내요.

범위, 색상 각도 순환과 정밀도

• HEX 입력은 정확히 3자리 또는 6자리 16진수이며 앞에 #을 붙일 수 있어요. 알파 투명도, 색상 이름, 8자리 HEX, CSS 변수, 임의의 CSS 표현식은 지원하지 않아요.
• RGB 채널은 0~255의 정수예요. 소수, 음수, 범위를 벗어난 값은 임의로 잘라내지 않고 오류로 처리해요.
• 채도와 명도는 0%~100%의 소수를 입력할 수 있어요. 색상 각도는 순환하므로 360°는 0°, 420°는 60°, −120°는 240°와 같아요.
• RGB와 HEX 결과는 정수를 사용해요. HSL은 소수 둘째 자리까지 표시하고 끝의 0을 없애요. 무채색인 검정, 흰색, 회색은 채도가 0%일 때 색상 각도가 보이는 색에 영향을 주지 않으므로 0°를 사용해요.
• 견본은 시각적 확인용이며 색상 보정을 보증하지 않아요. 디스플레이, 브라우저 색상 관리, 주변 조명, 접근성 명암비 조건에 따라 색이 다르게 보일 수 있어요.

실제 활용과 출력

• 디자이너의 HEX 토큰을 코드, 문서 또는 개별 채널을 입력하는 소프트웨어에 쓸 RGB로 바꾸세요.
• 연관된 마우스 오버색, 테두리색, 배경색을 만들려면 RGB를 HSL로 변환한 뒤 색상·채도·명도를 조절하세요.
• 복사하기 전에 붙여 넣은 값과 색상 견본을 비교하세요. 미리보기는 기기에서 계산한 6자리 HEX를 사용하며 색상 입력을 분석 서비스로 보내지 않아요.
• 복사하면 rgb(51, 102, 255) 또는 hsl(225deg, 100%, 60%)처럼 대상 값 하나를 얻어요. 이 도구는 팔레트 생성, 이미지 색상 추출, CMYK 인쇄 프로필 제공을 하지 않아요.

HEX, RGB, HSL 변환 방향

가지고 있는 코드와 필요한 코드에 맞는 조합을 선택하세요. 아래 각 방향에는 형식의 전체 이름, 변환 규칙, 입력과 결과 예제가 있어요.