색상 변환기

색상 변환기 사용 방법

색상 코드를 모르더라도 ‘색 직접 선택’의 색상칸을 눌러 원하는 색을 고르거나 빠른 색 선택 버튼을 누르면 HEX·RGB·HSL 값이 함께 표시됩니다. 기존 코드가 있다면 원본 형식을 선택하고 값을 입력하세요. 세 형식의 결과와 투명도를 확인하는 체크무늬 미리보기가 바로 표시됩니다. 결과를 클릭하면 전체 선택되며 개별 복사 버튼을 사용할 수 있습니다. 입력 오류가 있으면 이전 결과를 숨깁니다.

색 선택은 현재 입력 형식과 유효한 투명도를 유지합니다. 내장 알파는 별도 알파 입력칸으로 옮겨 직접 조절할 수 있게 합니다. 잘못된 입력 상태에서 색을 고르면 불투명 색으로 다시 시작합니다. 선택창 모양은 브라우저·기기에 따라 다르며 투명도는 알파 입력칸에서 조절하세요.

입력 형식 변경은 새 예시값으로 초기화합니다. 변환 결과를 다시 입력하려면 먼저 결과를 복사한 다음 형식을 바꾸고 붙여 넣으세요. 별도 알파값을 비우면 1로 처리합니다.

지원 입력 형식과 범위

• HEX: #36C, #36C8, #336699, #33669980처럼 3·4·6·8자리. # 생략과 대소문자를 허용합니다.
• RGB: 51, 102, 153 또는 rgb(51, 102, 153). 채널은 0~255 정수만 허용합니다. 내장 알파는 rgba(51, 102, 153, 0.5)로 입력하세요.
• HSL: 210, 50, 40 또는 hsl(210, 50%, 40%). 색상각은 0~360도, 채도·명도는 0~100입니다. hsla(210, 50%, 40%, 0.5)와 deg 색상각도 지원합니다.
• 알파: 0~1 숫자만 허용하며 백분율은 지원하지 않습니다. 색상값에 알파가 있으면 별도 입력을 무시합니다.

CSS의 모든 색상 문법을 지원하지는 않습니다. 공백/슬래시 기반 현대 문법, RGB 백분율, 색상 이름, lab(), oklch(), display-p3는 대상이 아닙니다. 범위를 벗어난 입력은 자동으로 잘라내지 않습니다.

변환 공식과 반올림 기준

RGB 채널을 255로 나눈 최댓값 M과 최솟값 m으로 명도 L = (M + m) / 2를 구합니다. 차이 Δ = M − m가 0이면 무채색, 그렇지 않으면 채도 S = Δ / (1 − |2L − 1|)이며 가장 큰 채널에 따라 색상각을 구합니다. HSL에서 RGB로 돌아갈 때는 채도·명도로 채널을 계산한 뒤 가장 가까운 정수로 반올림합니다.

HSL은 표시할 때만 소수점 둘째 자리로 반올림하고 불필요한 0을 제거합니다. HEX의 알파는 알파 × 255를 반올림하며 중간값은 큰 정수 쪽으로 갑니다. HEX는 불투명이면 6자리, 알파가 1보다 작으면 RRGGBBAA 8자리로 표시합니다. 결과를 다시 변환하면 채널과 알파의 반올림 때문에 미세한 차이가 생길 수 있습니다.

표기 기준: MDN HEX 색상, MDN HSL.

자주 묻는 질문