미리보기: 번역 미리보기: 한국어 사이트를 준비 중입니다. 한국어 사이트 전체 검토가 끝날 때까지 이 페이지는 검색 색인에서 제외됩니다.
HEX·RGB·HSL 색상 변환기
불투명한 sRGB 색상을 이 도구가 지원하는 HEX, RGB, HSL 표기 사이에서 변환합니다. 처리는 브라우저에서 이루어집니다.
HEX, RGB 또는 HSL 형식으로 색상을 입력하세요.
sRGB 색상을 표현하는 세 가지 형식
- HEX
- CSS와 HTML에서 흔히 쓰는 간결한 16진수 표기입니다. #RGB와 #RRGGBB 형식(예: #FF5733)을 지원합니다.
- RGB
- 빨강, 초록, 파랑 채널을 0~255 값으로 나타냅니다. 예: rgb(255, 87, 51).
- HSL
- 색조 0°~360°, 채도와 명도 0%~100%입니다. 구성 요소를 조정해 색상 변형을 만들 수 있습니다.
예시
- 순수한 빨강: #FF0000 → rgb(255, 0, 0) → hsl(0, 100%, 50%).
- 로열 블루: #4169E1 → rgb(65, 105, 225) → 약 hsl(225, 73%, 57%).
- 연한 초록: hsl(120, 80%, 70%) → #75F075 및 rgb(117, 240, 117).
변환 방식
- HEX에서 RGB: 빨강, 초록, 파랑의 16진수 쌍을 나눈 뒤 각각 10진수로 바꿉니다.
- RGB에서 HEX: 각 10진 채널을 두 자리 16진수로 바꿔 # 뒤에 붙입니다.
- RGB와 HSL: 표준 채널 및 색조 계산을 적용하며 표시되는 HSL 값은 정수로 반올림됩니다.
각 형식을 사용하는 경우
- HEX는 간결하며 CSS, HTML, 디자인 도구에서 널리 사용됩니다.
- RGB는 빨강, 초록, 파랑 채널 값을 직접 보여 줍니다.
- HSL은 색조, 채도, 명도를 조정할 때 편리합니다.
지원 형식과 제한
- 불투명한 sRGB 색상의 짧은/긴 HEX, 쉼표로 구분한 rgb() 및 hsl() 표기를 지원합니다.
- 알파 투명도, RGBA, HSLA, 공백으로 구분된 최신 CSS 문법, 색상 이름, 광색역 공간은 지원하지 않습니다.
- HSL 출력은 정수 도와 백분율로 반올림되므로 다시 변환하면 원래 채널 값과 정확히 같지 않은 근사 색상이 될 수 있습니다.
- 색상과 결과는 브라우저에 남으며 페이지와 코드는 사이트에서 불러옵니다.
자주 묻는 질문
HEX 색상의 # 기호는 무엇을 뜻하나요?
16진수 색상 표기를 나타냅니다. # 뒤에 3자리 또는 6자리 sRGB 값을 입력할 수 있으며 기호 자체는 색상 채널이 아닙니다.
HSL로 색상을 밝게 하거나 어둡게 하려면?
색조와 채도를 유지하고 명도를 높이거나 낮추세요. 명도를 높이면 파란색이 더 밝아지는 식입니다.
투명한 색상을 입력할 수 있나요?
아니요. 불투명한 HEX, RGB, HSL 값만 처리하며 알파 채널은 지원하지 않습니다.