HEX·RGB·HSL 색상 변환기

입력 형식과 결과 형식을 선택하고 색상 값을 넣으세요.

변환 결과 RGB

rgb(51,102,153)

같은 색을 다른 코드로 바꾸는 방법

같은 파란색 견본 세 개가 서로 다른 색상 표기를 나타내는 그림

HEX, RGB, HSL 중 하나로 입력한 sRGB 색상을 다른 형식으로 변환합니다. 바둑판 무늬 위에 표시되는 견본을 보면 알파값이 있는 색의 투명도를 구별할 수 있습니다.

이미 쓰고 있는 CSS 값을 새로운 형식으로 옮길 때는 입력 형식을 먼저 고르세요. 그러면 필요한 채널 필드만 표시되어 불필요한 값을 수정할 일이 없습니다.

입력 형식에 맞는 숫자 넣기

HEX는 16진수 3·4·6·8자리 중 하나를 받으며 #은 생략할 수 있습니다. RGB의 빨강·초록·파랑 채널은 각각 0~255의 정수입니다. HSL의 색조는 0~360°, 채도와 명도는 0~100%입니다. RGB와 HSL의 알파는 0~1입니다. 입력 형식을 정한 뒤 다른 결과 형식을 선택합니다.

8자리 HEX는 #RRGGBBAA 순서로 읽으며 마지막 두 자리가 알파입니다. 이 규칙은 CSS Color 명세에 정의되어 있습니다. 색 견본은 임의의 배경에서 보이는 최종 색과 같지 않을 수 있습니다.

결과를 확인할 수 있는 값

#336699를 입력하면 RGB는 rgb(51,102,153), HSL은 hsl(210,50%,40%)입니다. 표기 방식만 다르고 견본의 파란색은 같습니다.

짧은 흰색 코드 #FFF는 문자를 반복하여 #FFFFFF가 됩니다. 세 RGB 채널은 모두 255입니다.

HSL에서 색조 120°, 채도 100%, 명도 50%를 넣으면 rgb(0,255,0)이 나옵니다. 가운데 초록 채널만 최댓값인 색입니다.

반올림과 색 영역의 한계

RGB 채널은 정수, HSL은 소수 한 자리, 알파는 소수 세 자리까지 표시합니다. 여러 번 변환하면 끝자리 숫자가 달라질 수 있습니다. CMYK와 Display P3 색 변환은 하지 않으며, 텍스트 대비도 판단하지 않습니다. 대비에는 글자색과 배경색이 모두 필요합니다.

색상 코드에 관한 질문

축약형과 투명도는 코드를 복사하기 전에 확인하는 편이 좋습니다.

HEX에서 #을 빼도 되나요?

네. 입력할 때는 생략할 수 있고, 결과 HEX 코드에는 #이 붙습니다.

#0008은 어떤 코드로 늘어나나요?

각 문자를 두 번씩 쓰므로 #00000088이 됩니다. 마지막 88이 알파입니다.

회색은 왜 색조가 0°인가요?

채도가 0%이면 색조를 바꿔도 회색은 그대로입니다. 변환기는 일관된 표시값으로 0°를 사용합니다.

알파 80은 정확히 50%인가요?

아닙니다. 16진수 80은 128이며, 128/255는 약 0.502입니다.

이 견본이 모든 화면에서 같게 보이나요?

sRGB 수치는 같지만 화면의 색상 프로필과 밝기 설정에 따라 보이는 색은 달라질 수 있습니다.

비슷한 계산기

같은 주제에 대한 다음 계산기가 유용할 수 있습니다:

소셜 미디어에 공유하기

좋았다면, 계산기를 소셜 미디어 플랫폼에 공유해 주세요. 여러분에게 쉽고 프로젝트 홍보에 도움이 됩니다. 감사합니다!

Calcopedia (ko) → HEX·RGB·HSL 색상 변환기