RGB-16진수 변환기
슬라이더를 조절하거나 아래에 HEX 코드를 붙여넣으면, 기기에서 실시간으로 계산되며 RGB, HEX, HSL 간 변환을 즉시 수행하고 색상 미리보기를 확인할 수 있습니다.
색상 입력
변환된 출력
리뷰
RGB를 HEX로 변환하는 방법
- 빨강, 초록, 파랑 슬라이더를 드래그하거나, 입력란에 HEX 코드를 직접 붙여넣어 색상을 설정하세요.
- 미리보기 견본을 확인하면서 설정을 조정하면 HEX, RGB 및 HSL 값이 실시간으로 업데이트되는 것을 볼 수 있습니다.
- 값이 표시된 카드를 클릭하면 해당 값이 복사되어 CSS, 디자인 소프트웨어 또는 코드에 바로 붙여넣을 수 있습니다.
RGB, HEX, HSL: 차이점은 무엇일까요?
RGB, HEX, HSL은 모두 정확히 동일한 색상을 나타내며, 단지 같은 수치를 다른 방식으로 표기한 것일 뿐입니다. RGB는 빨강, 초록, 파랑 빛이 각각 0~255의 척도에서 얼마나 혼합되어 해당 색상을 만드는지에 따라 색상을 정의합니다. HEX는 동일한 RGB 값을 간결한 6자리 16진수 코드로 다시 표기한 것이므로, rgb(31, 58, 95) 와 #1f3a5f 는 동일한 색상입니다. 반면 HSL은 색조(색상환상의 위치), 채도(색의 선명도), 명도 등을 통해 색상을 설명하며, 이 형식은 관련 색조를 선택할 때 종종 더 직관적입니다.
각 형식이 주로 사용되는 곳
| 서식 | 일반적인 용도 | 왜 |
|---|---|---|
| HEX | CSS, HTML, 디자인 도구 | 길이가 짧아 하나의 문자열로 쉽게 붙여넣고 공유할 수 있습니다 |
| RGB | 투명도가 적용된 CSS (rgba) | 불투명도를 위한 알파 채널을 지원합니다 |
| HSL | 색상 팔레트 구성 | 한 숫자만 변경해도 더 밝거나 어두운 색상, 또는 관련 색조를 쉽게 만들 수 있습니다. |
CSS에서 이러한 값 사용하기
다음 세 가지 형식 중 어느 것이든 스타일시트에서 바로 사용할 수 있습니다: color: #1f3a5f;, color: rgb(31, 58, 95); 그리고 color: hsl(210, 51%, 25%); 모두 똑같은 네이비 블루 색상으로 표시됩니다. HEX는 단색을 나타내는 가장 일반적인 약어인 반면, RGB(또는 그 rgba() 변형)은 색상에 부분적인 투명도가 필요한 경우에 유용하며, HSL은 색조를 고정하고 명도만 조정함으로써 일관된 색조 세트를 쉽게 생성할 수 있게 해줍니다.
자주 묻는 질문
이 RGB-HEX 변환기는 무료로 사용할 수 있나요?+
네. 이 서비스는 브라우저 내에서 전적으로 자바스크립트로 실행되므로, 별도의 계정이나 API 키가 필요하지 않으며, 사용 횟수에 대한 제한도 없습니다.
제 색상 데이터가 어딘가에 업로드되나요?+
아닙니다. 모든 변환 작업은 사용자의 브라우저 내에서 로컬로 이루어집니다. 서버로 전송되거나 저장되거나 기록되는 정보는 전혀 없습니다.
HEX와 RGB의 실제 차이점은 무엇인가요?+
이들은 서로 다른 표기법으로 같은 색상을 표현합니다. HEX는 6자리 16진수 약어이며, RGB가 0에서 255 사이의 세 개의 별도 숫자로 표기하는 것과 동일한 빨강, 녹색, 파랑 값을 나타냅니다.
디자인 및 개발 도구
이 변환기의 작동 원리
색상을 입력하거나 선택할 때 JavaScript를 통해 RGB, HEX, HSL 간에 실시간으로 변환되며 — 사용자가 입력한 내용은 서버로 업로드되거나 어디에도 저장되지 않습니다.
최종 업데이트: 2026년 8월 28일.
도구 상자에 들어 있는 다른 도구들
홈페이지에는 API 키가 필요 없는 무료 도구가 더 많이 소개되어 있습니다.