웹 디자인과 CSS
디자인 파일이나 스크린샷 선택기에서 색상을 선택하여 스타일시트에 필요한 16진수 코드로 변환하세요.
RGB-HEX 변환기 — 실시간 미리보기를 통해 RGB 값을 16진수 코드로, 16진수 코드를 RGB로 변환할 수 있습니다.
빨강, 초록, 파랑 수치를 입력하거나, 색상을 선택하거나, 16진수 코드를 붙여넣으면 HEX, RGB, HSL 등 모든 형식을 한눈에 확인할 수 있습니다. 실시간 미리보기와 명암도 확인 기능을 통해 어떤 텍스트 색상이 가장 잘 어울리는지 확인할 수 있습니다. 모든 기능은 브라우저에서 바로 실행됩니다.
색상 변환하기
사용자의 색상 설정은 브라우저에 저장됩니다
색상을 선택하거나 입력하세요
Aa
색상 코드
HEX
–RGB (CSS)
–HSL (CSS)
––가장 잘 어울리는 글자 색상
–명암비
가이드
RGB에서 HEX로 변환하기: 색상 코드, HSL 및 명암비
색상 코드가 어떻게 작동하는지, 그리고 가독성 좋은 색상 조합을 선택하는 방법을 알아보세요.
RGB-HEX 변환기는 어떤 기능을 하나요?
화면은 빨강, 초록, 파랑 빛을 혼합하여 모든 색상을 만들어 냅니다. RGB는 이 혼합 비율을 0에서 255 사이의 세 가지 숫자로 표현합니다. HEX는 같은 세 가지 숫자를 16진수로 표기하여 #1F3A5F와 같은 짧은 코드로 나타내며, CSS, 디자인 도구 및 브랜드 가이드에서는 주로 이 형식을 사용합니다.
세 개의 숫자를 입력하거나, 색상 선택기를 사용하여 색상을 고르거나, 16진수 코드를 붙여넣으세요. 모든 형식이 동시에 업데이트되며, HSL 버전도 확인할 수 있고 해당 색상에서 가장 잘 보이는 텍스트 색상도 확인할 수 있습니다.
사람들이 RGB를 HEX로 변환하는 이유
브랜드 및 문서
로고 파일, 슬라이드 자료, 웹사이트 간에 브랜드 색상을 일관되게 유지하십시오.
접근성
게시하기 전에 어떤 텍스트 색상이 배경에 잘 어울리는지 확인하고 명암비를 살펴보세요.
RGB가 어떻게 HEX로 변환되는가
세 개의 숫자를 각각 16진수 두 자리 수로 변환한 다음, 이 세 쌍을 연결합니다.
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
HEX: #1F3A5F
16진수는 0~9의 숫자와 A~F의 문자를 사용하며, 여기서 A는 10, F는 15를 나타냅니다. #FA0과 같은 짧은 코드는 약어입니다. 각 숫자의 값이 두 배가 되므로, 이는 #FFAA00을 의미합니다.
RGB 및 HEX에서 흔히 사용되는 색상
| 색상 | RGB | HEX |
|---|---|---|
| 검정 | 0, 0, 0 | #000000 |
| 흰색 | 255, 255, 255 | #FFFFFF |
| 빨강 | 255, 0, 0 | #FF0000 |
| 녹색 | 0, 255, 0 | #00FF00 |
| 파랑 | 0, 0, 255 | #0000FF |
| 노란색 | 255, 255, 0 | #FFFF00 |
| 오렌지 | 255, 165, 0 | #FFA500 |
| 회색 | 128, 128, 128 | #808080 |
RGB-HEX 변환기 사용 방법
- 빨강, 초록, 파랑 값을 직접 입력하거나, 색상 견본을 클릭하여 색상 선택기를 사용하세요.
- 또는 ‘Hex’ 필드에 16진수 코드를 붙여넣어 반대 방향으로 변환할 수도 있습니다.
- HEX, RGB 및 HSL 코드를 확인하고, 명암비와 가장 적합한 텍스트 색상을 확인하십시오.
- 필요한 형식 옆에 있는 ‘복사’를 누르세요.
색상을 다루는 간단한 요령
- 텍스트를 가독성 있게 표시하려면, 일반 텍스트의 경우 최소 4.5 : 1, 큰 텍스트의 경우 최소 3 : 1의 명암비를 유지하도록 하십시오.
- 16진수 코드는 대소문자를 구분하지 않으므로, #1f3a5f와 #1F3A5F는 같은 색상입니다.
- CSS에서는 앞의 # 기호가 필수이지만, 여기서는 선택 사항입니다. 이 기호를 포함하거나 생략한 상태로 코드를 붙여넣을 수 있습니다.
- 모니터와 프린터는 색상을 다르게 표현하기 때문에, 인쇄된 색상이 화면에서 보이는 색상과 다를 수 있습니다.
제한 사항 및 개인정보 보호
개인정보 보호
색상은 브라우저에서 변환됩니다. 당사 서버로 전송되거나 저장되는 정보는 없습니다. 기기에는 소문자로 선택된 색상만 저장됩니다.
제한 사항
이 도구는 채널당 0에서 255까지의 표준 8비트 sRGB 색상을 지원합니다. 투명도(RGBA 또는 8자리 16진수), 인쇄용 CMYK, 또는 광색역 색공간은 지원하지 않습니다.
자주 묻는 질문
RGB-HEX 변환기 자주 묻는 질문
RGB를 HEX로 변환하려면 어떻게 해야 하나요?
빨강, 초록, 파랑 값을 각각 0에서 255 사이의 숫자로 입력하세요. 이 도구는 각 숫자를 16진수 두 자리로 변환한 뒤 이를 연결하므로, 31, 58, 95는 #1F3A5F가 됩니다.
HEX를 RGB로 변환하려면 어떻게 해야 하나요?
16진수 코드를 ‘Hex’ 필드에 붙여넣으세요. 그러면 세 개의 RGB 값이 한 번에 자동으로 채워집니다. 예를 들어, #FF8800은 255, 136, 0입니다.
16진수 코드에는 # 기호가 필요합니까?
아닙니다. # 기호를 포함하거나 생략하고 입력할 수 있으며, #FA0과 같은 단축 코드도 작동합니다. 결과에는 항상 # 기호가 포함되므로 CSS에서 바로 사용할 수 있습니다.
RGB의 세 가지 수치는 무엇을 의미하나요?
이는 빨강, 초록, 파랑 빛의 양을 나타내며, 0(없음)부터 255(최대)까지의 값을 가집니다. 0, 0, 0은 검은색이고, 255, 255, 255는 흰색입니다.
HSL 값은 무엇에 쓰이나요?
HSL은 색상을 색상(hue), 채도(saturation), 명도(lightness)로 표현합니다. 예를 들어 색상을 조금 더 밝게 만드는 등 수동으로 조정하기가 더 쉬운 경우가 많으며, CSS에서 바로 사용할 수 있습니다.
명암비는 무엇을 알려주는가?
이는 특정 색상 배경에서 검은색 또는 흰색 텍스트가 얼마나 잘 눈에 띄는지를 나타냅니다. WCAG 접근성 지침에 따르면, 일반 텍스트의 경우 4.5 : 1 이상의 대비 비율이 통상적인 최소 기준입니다.
투명도를 적용할 수 있나요?
여기서는 안 됩니다. 이 도구는 알파 채널이 없는 불투명 색상만 처리합니다. 투명도를 적용하려면 CSS의 rgba()에 알파 값을 직접 추가해야 합니다.
제 데이터는 저장되거나 어딘가로 전송되나요?
아닙니다. 변환 작업은 브라우저 내에서 이루어지며, 사용자의 기기에서 어떤 정보도 외부로 전송되지 않습니다. 다음 번을 위해 소문자 선택 사항만 저장됩니다.
이 도구를 사용하는 분들로부터
리뷰
리뷰 불러오는 중…
계속하세요
도구 상자에 담긴 더 많은 도구들
이 홈페이지에는 API 키가 필요 없는 무료 도구가 수십 가지 더 소개되어 있습니다.