HEX ↔ RGB 변환기
HEX·RGB·HSL 색상값을 서로 변환합니다.
아무 페이지에서나 사용 (북마클릿)
보고 있는 페이지를 떠나지 않고 HEX ↔ RGB 변환기을(를) 쓰고 싶나요? 아래 버튼을 즐겨찾기 바에 끌어다 놓고, 아무 웹사이트에서나 클릭하면 그 자리에서 HEX ↔ RGB 변환기이(가) 열립니다 — 전부 브라우저 안에서만 실행됩니다.
주의해서 사용하세요: 북마클릿은 클릭한 페이지 위에서 실행됩니다. 인터넷 뱅킹·결제·의료 등 민감한 사이트에서는 사용을 피하세요 — 사용 책임은 본인에게 있습니다. 모든 처리는 로컬에서 이루어지며 어떤 데이터도 전송되지 않습니다. 이용약관를 참고하세요.
- 즐겨찾기 바가 숨겨져 있다면 표시하세요 — Ctrl+Shift+B (Mac은 ⌘+Shift+B).
- 위 버튼을 즐겨찾기 바에 끌어다 놓습니다.
- 아무 웹사이트나 열고 북마크를 클릭하면 우측 상단에 HEX ↔ RGB 변환기 패널이 나타납니다. ✛로 코너를 이동하고, ›/‹로 가장자리에 접었다 다시 꺼낼 수 있습니다.
- 북마크를 다시 클릭하면(또는 ✕) 닫힙니다.
참고: 보안 정책이 엄격한 일부 사이트에서는 북마클릿이 차단될 수 있습니다.
예시
HEX → RGB & HSL
입력
#3B82F6
출력
rgb(59, 130, 246) · hsl(217, 91%, 60%)
RGB → HEX
입력
rgb(255, 99, 71)
출력
#FF6347 · hsl(9, 100%, 64%)
도구 소개
이 무료 온라인 색상 변환기는 HEX·RGB·HSL 사이에서 색을 변환합니다. 세 형식 중 아무거나 값을 입력하거나 — 컬러 피커를 쓰거나, 스포이드로 화면 어디서든 색을 집으면(크롬·엣지) — 나머지 형식이 실시간 스와치와 함께 즉시 갱신됩니다. 약식·8자리 hex는 물론 rgb()·hsl() 표기도 받습니다. 모든 것이 업로드 없이 브라우저에서 실행됩니다.
사용 방법
- HEX·RGB·HSL 색을 입력하세요(또는 스와치로 고르세요).
- 세 형식 모두의 변환 값을 읽으세요.
- 필요한 형식을 복사하세요.
흔한 용도
디자인 토큰을 형식 간 변환, CSS에서 브랜드 색 맞추기, 목업의 hex 코드를 rgb()나 hsl()로 옮기기, HSL로 밝기·채도 조정.
자주 묻는 질문
HEX를 RGB로 어떻게 변환하나요?
#3B82F6 같은 hex 색을 붙여넣으면 도구가 동등한 rgb(59, 130, 246)과 hsl 값을 실시간 컬러 스와치와 함께 즉시 보여줍니다.
RGB와 HSL을 다시 HEX로 변환하나요?
네. rgb()나 hsl() 값을 입력하면 대응하는 HEX·RGB·HSL을 얻습니다 — 변환은 모든 방향으로 작동합니다.
이 색상 변환기는 무료인가요?
네 — 가입 없이 완전 무료인 온라인 HEX·RGB·HSL 변환기입니다.
약식과 8자리 hex도 지원하나요?
네. 3자리(#abc), 4자리, 6자리, 8자리 hex 코드를 받으며, 알파 채널은 RGB/HSL 출력에서 무시됩니다.
색을 시각적으로 고를 수 있나요?
네. 내장 컬러 피커로 색을 고르면 HEX·RGB·HSL 값이 자동으로 갱신됩니다.
이미지나 화면 어디서든 색을 집을 수 있나요?
크롬과 엣지에서 가능합니다. 스포이드 버튼을 누르면(또는 아무 페이지에서 북마클릿 실행) 커서가 피커가 되어 — 이미지·웹사이트·다른 창의 어떤 픽셀이든 클릭해 hex 색을 캡처합니다. 스포이드는 파이어폭스나 사파리에선 지원되지 않아 지원되는 곳에서만 버튼이 나타납니다.
제 데이터가 어딘가로 업로드되나요?
아니요. 모든 변환이 업로드 없이 브라우저에서 이뤄집니다.
관련 도구