RGB to HEX 색상 코드 변환기 - 팔레트 미리보기 및 CSS 변수 내보내기
RGB to HEX 색상 코드 변환기
웹 개발과 디자인 작업에서 RGB 색상 값을 HEX 코드로 변환하는 것은 필수적인 과정입니다. 이 도구를 사용하면 RGB 값을 즉시 HEX 코드로 변환하고, 팔레트를 구성하며, CSS 변수로 한 번에 내보낼 수 있습니다. 디자이너와 프론트엔드 개발자 모두에게 유용한 올인원 색상 변환 도구입니다.
🎨 색상 변환기
HEX: #808080RGB: rgb(128, 128, 128)HSL: hsl(0, 0%, 50%)
🎯 나의 팔레트
색상을 추가하여 팔레트를 구성하세요. 최대 12개까지 저장 가능합니다.
📋 CSS 변수 내보내기
RGB와 HEX 색상 코드의 이해
RGB(Red, Green, Blue)와 HEX(16진수) 색상 코드는 디지털 색상을 표현하는 가장 대표적인 두 가지 방식입니다. RGB는 각 색상 채널에 0부터 255까지의 값을 할당하여 약 1,678만 가지 색상을 표현할 수 있으며, HEX 코드는 동일한 정보를 6자리 16진수 문자열로 압축하여 표현합니다.
변환 원리
RGB에서 HEX로의 변환은 각 10진수 값을 16진수로 변환하는 과정입니다. 예를 들어, RGB(255, 128, 0)은 다음과 같이 변환됩니다:
- R: 255 → FF (255 ÷ 16 = 15 나머지 15 → FF)- G: 128 → 80 (128 ÷ 16 = 8 나머지 0 → 80)- B: 0 → 00 (0 ÷ 16 = 0 나머지 0 → 00)- 결과: #FF8000
CSS 변수를 활용한 색상 관리
현대 웹 개발에서는 CSS 커스텀 속성(변수)을 사용하여 색상을 체계적으로 관리합니다. 이 도구의 CSS 변수 내보내기 기능을 사용하면 팔레트에 저장한 모든 색상을 즉시 프로젝트에 적용할 수 있는 코드로 변환할 수 있습니다.
| 형식 | 예시 | 사용 상황 |
|---|---|---|
| HEX | #FF6B35 | CSS 스타일시트, 디자인 시안 |
| RGB | rgb(255, 107, 53) | CSS 함수, 투명도 조절 시 |
| HSL | hsl(16, 100%, 60%) | 색조 기반 색상 조절 |
| CSS 변수 | var(--color-1) | 디자인 시스템, 테마 전환 |
Q1. RGB 값과 HEX 코드는 정확히 같은 색상을 표현하나요?
네, 완전히 동일합니다. RGB와 HEX는 같은 색상 정보를 다른 형식으로 표기하는 방법입니다. RGB(255, 0, 0)과 #FF0000은 수학적으로 완전히 동일한 빨간색을 나타냅니다. 단지 10진수와 16진수라는 표현 방식의 차이일 뿐이므로, 어느 형식을 사용하든 웹 브라우저에서 렌더링되는 결과는 같습니다.
Q2. CSS 변수로 색상을 관리하면 어떤 장점이 있나요?
CSS 변수를 사용하면 색상 값을 한 곳에서 중앙 관리할 수 있어 유지보수가 매우 편리합니다. 브랜드 색상이 변경될 경우 변수 값만 수정하면 전체 사이트에 즉시 반영됩니다. 또한 다크 모드와 라이트 모드 전환, 테마 시스템 구축, 그리고 디자이너와 개발자 간의 커뮤니케이션에도 큰 도움이 됩니다. SCSS 변수와 달리 런타임에서 동적으로 변경이 가능하다는 것도 큰 장점입니다.
Q3. 웹 접근성을 위한 색상 대비 비율은 어떻게 확인하나요?
WCAG 2.1 기준에 따르면, 일반 텍스트는 4.5:1 이상, 큰 텍스트(18pt 이상 또는 14pt 볼드)는 3:1 이상의 명암 대비 비율을 충족해야 합니다. 이 도구에서 생성한 색상의 RGB 또는 HEX 값을 WebAIM Contrast Checker와 같은 도구에 입력하여 대비를 확인할 수 있습니다. 팔레트를 구성할 때 반드시 텍스트 색상과 배경색 조합의 접근성을 검증하시기 바랍니다.