색상 일괄 변환
🎨 색상여러 색상 코드를 한 번에 입력해 HEX, RGB, HSL 형식으로 일괄 변환하는 디자인 시스템 도구입니다.
🔄 색상 일괄 변환기란?
색상 일괄 변환기는 여러 색상 코드를 한 번에 HEX, RGB, HSL로 변환합니다. #FF5733, rgb(255,87,51), RGBA, HSL, HSLA 등 다양한 입력 형식을 자동으로 인식합니다. 줄바꿈으로 구분하여 수십 개의 색상을 동시에 처리할 수 있어 대량 작업에 효율적입니다. 디자인 시스템 구축, CSS 마이그레이션, 색상 문서화 작업에 유용합니다.
🎨 활용 팁
Figma 컬러 스타일 export를 통째로 붙여넣으면 RGB·HEX·HSL이 한 번에 정리되어 디자인 핸드오프가 빨라집니다.
📊 지원하는 색상 형식
| 형식 | 예시 | 특징 |
|---|---|---|
| HEX (6자리) | #FF5733 | 가장 일반적, 웹에서 널리 사용 |
| HEX (3자리) | #F53 | 축약형, 6자리로 자동 확장 |
| RGB | rgb(255, 87, 51) | 0-255 정수값, 프로그래밍에 유용 |
| RGBA | rgba(255, 87, 51, 0.5) | 투명도 포함, 알파값은 무시됨 |
| HSL | hsl(14, 100%, 60%) | 색조/채도/명도, 직관적 조정 |
💡 활용 팁
- CSS 변수 마이그레이션: 기존 HEX 30~50개를 HSL로 한 번에 바꾸면 다크모드 토글이 채도/명도 조정만으로 가능해집니다.
- 디자인 핸드오프: Figma의 컬러 스타일 export를 붙여넣으면 개발팀이 쓸 RGB·HEX·HSL을 한 번에 확보할 수 있어 슬랙 핑퐁이 줄어듭니다.
- 브랜드 가이드 문서화: Notion/Confluence 표에 동일한 색을 세 형식으로 나란히 기록하면 인쇄·웹·앱 디자이너 모두 그대로 복사할 수 있습니다.
- 레거시 코드 정리: 10년 된 SCSS 파일에 흩어진 #aaa, #AAA, rgb(170,170,170)을 골라내서 동일한 색이라는 사실을 빠르게 검증할 수 있습니다.
- 접근성 점검: 본문 색을 HSL로 뽑아 보면 L(명도)가 50% 이하인 색은 흰 배경에서 보통 WCAG AA(4.5:1)를 충족합니다.
⚙️ 입력 시 자주 막히는 케이스
- 3자리 HEX 혼용: #fff와 #ffffff가 같은 색인지 헷갈릴 때 둘 다 붙여넣고 출력 형식을 HEX(6자리)로 고정하면 한눈에 확인됩니다.
- 공백 차이: rgb(255,87,51)와 rgb(255, 87, 51) 모두 인식되므로 엑셀 표에서 복사한 값도 그대로 사용 가능합니다.
- 대소문자: #FF5733과 #ff5733은 동일 색입니다. 코드 컨벤션 통일을 위해 출력값을 한쪽 케이스로 맞춰 복사하세요.
- CSS 색상명: tomato, slategray 같은 명명색은 현재 인식하지 않으므로 사전에 HEX로 바꿔 입력해야 합니다.
자주 묻는 질문
RGBA의 투명도는 어떻게 처리되나요?▼
현재 버전에서는 알파(투명도) 값이 무시되고 RGB 부분만 변환됩니다. 투명도가 중요한 오버레이/그림자 색은 알파값을 따로 메모해 두고 변환 후 다시 결합하는 흐름을 권장합니다.
인식되지 않는 색상은 어떻게 표시되나요?▼
빨간색 배경으로 표시되며 "인식할 수 없는 형식"이라고 안내됩니다. 오타, 닫는 괄호 누락, CSS 색상명(예: red, navy) 사용, 8자리 HEX(#FF5733AA) 등이 흔한 원인입니다.
결과를 복사하면 어떤 형식으로 복사되나요?▼
선택한 출력 형식(HEX, RGB, HSL, 전체)에 따라 줄바꿈으로 구분된 텍스트로 복사됩니다. 구글 시트에 붙여넣으면 한 줄에 한 색이 들어가고, 코드 에디터에서는 그대로 변수 값에 매핑하기 쉽습니다.
몇 개까지 한 번에 처리할 수 있나요?▼
브라우저 메모리에 따라 다르지만, 일반적으로 수백 개 정도까지는 즉시 변환됩니다. 디자인 토큰 전체를 한꺼번에 마이그레이션하기에 충분한 용량입니다.