RGB to HEX 색상 코드 변환기 - CSS 변수 출력 및 팔레트 내보내기 도구
RGB to HEX 색상 코드 변환기
웹 개발과 디자인 작업에서 색상 코드 변환은 필수적인 과정입니다. RGB 값을 HEX 코드로 변환하고, CSS 변수로 즉시 출력하며, 완성된 팔레트를 다양한 형식으로 내보내기할 수 있는 올인원 도구를 제공합니다. 디자이너와 개발자 모두에게 최적화된 이 변환기를 지금 바로 사용해 보세요.
🎨 RGB 값 입력
7970229/* HEX */ color: #4F46E5;
/* RGB */ color: rgb(79, 70, 229);
/* CSS 변수 */ —color-primary: #4F46E5; —color-primary-rgb: 79, 70, 229;
🎨 팔레트 빌더
현재 색상을 팔레트에 추가하고, 완성된 팔레트를 내보내세요. 팔레트에 색상을 추가해 주세요
📦 팔레트 내보내기
RGB와 HEX 색상 코드의 이해
RGB 색상 모델이란?
RGB는 빛의 삼원색인 빨강(Red), 초록(Green), 파랑(Blue)을 조합하여 색상을 표현하는 가산 혼합 모델입니다. 각 채널은 0부터 255까지의 값을 가지며, 세 채널을 조합하면 약 1,677만 가지의 색상을 표현할 수 있습니다. 모니터, 스마트폰 화면 등 디지털 디스플레이에서 표준적으로 사용됩니다.
HEX 색상 코드란?
HEX(16진수) 색상 코드는 RGB 값을 16진수로 변환한 것입니다. # 기호 뒤에 6자리 16진수가 따르며, 처음 두 자리는 빨강, 다음 두 자리는 초록, 마지막 두 자리는 파랑을 나타냅니다. 예를 들어 #FF5733은 R=255, G=87, B=51을 의미합니다. CSS에서 가장 널리 사용되는 색상 표기법입니다.
CSS 변수로 색상을 관리하는 이유
CSS 커스텀 속성(CSS 변수)을 활용하면 프로젝트 전체의 색상을 체계적으로 관리할 수 있습니다. 핵심 장점은 다음과 같습니다:
- 일관성 유지: 한 곳에서 색상 값을 변경하면 프로젝트 전체에 자동 반영됩니다.- 다크 모드 대응: 미디어 쿼리와 결합하여 테마별 색상 전환이 간편합니다.- 가독성 향상:
—color-primary와 같은 의미 있는 이름을 부여하여 코드의 이해도를 높입니다.- 유지보수 효율: 디자인 시스템의 색상 토큰으로 활용하여 디자이너-개발자 간 협업을 강화합니다.
팔레트 내보내기 형식 비교
| 형식 | 사용 환경 | 특징 |
|---|---|---|
| **CSS 변수** | 바닐라 CSS, 일반 웹 프로젝트 | 브라우저 네이티브 지원, 런타임 변경 가능 |
| **SCSS 변수** | Sass/SCSS 프로젝트 | 컴파일 타임 처리, 함수·믹스인과 결합 용이 |
| **Tailwind Config** | Tailwind CSS 프레임워크 | 유틸리티 클래스로 바로 활용 가능 |
| **JSON** | 디자인 토큰, API, 설정 파일 | 플랫폼 독립적, 자동화 파이프라인에 활용 |
Q1. RGB 값과 HEX 코드를 수동으로 변환하는 공식은 무엇인가요?
RGB의 각 채널 값(0~255)을 16진수로 변환하면 됩니다. 예를 들어 R=255는 16진수로 FF, G=128은 80, B=0은 00이 되어 최종 HEX 코드는 #FF8000이 됩니다. 자바스크립트에서는 value.toString(16).padStart(2, ‘0’)으로 간단히 변환할 수 있습니다. 반대로 HEX에서 RGB로 변환할 때는 parseInt(hex.substring(0,2), 16)처럼 두 자리씩 잘라 10진수로 변환합니다.
Q2. CSS 변수를 사용할 때 rgba() 투명도를 적용하려면 어떻게 하나요?
CSS 변수에 RGB 값을 쉼표로 구분하여 저장하면 rgba() 함수와 결합할 수 있습니다. 예를 들어 —color-primary-rgb: 79, 70, 229;로 정의한 후, background: rgba(var(—color-primary-rgb), 0.5);와 같이 투명도를 자유롭게 조절할 수 있습니다. 이 도구는 HEX와 RGB 값을 모두 CSS 변수로 출력하므로 투명도 활용이 즉시 가능합니다.
Q3. 팔레트를 Tailwind CSS 프로젝트에 어떻게 적용하나요?
이 도구에서 Tailwind Config 형식으로 내보내기한 코드를 tailwind.config.js 파일의 theme.extend.colors 섹션에 붙여넣으면 됩니다. 그러면 bg-color-1, text-color-2와 같은 유틸리티 클래스로 즉시 사용할 수 있습니다. 팀 전체가 동일한 설정 파일을 공유하여 디자인 일관성을 유지할 수 있습니다.