색상 · 2026-07-16 · 5분 읽기

색상 20개 하나씩 변환하다 지쳐서 일괄 변환 도구 만들었음

👉 여러 색상 일괄 변환 바로 가기

디자인 시스템 색상 토큰 정리하다가 HEX 20개를 하나씩 RGB로 바꾸는 나 자신을 발견함. 이건 아니다 싶었음.

언제 필요한지

혼자 색상 하나 바꾸는 건 괜찮음. 근데 이런 상황이 되면 얘기가 달라짐:

• 디자인 시스템 구축 → 피그마에서 뽑은 색상 토큰 수십 개를 CSS 변수로 정리할 때
• Tailwind 커스텀 팔레트 → tailwind.config.js에 넣을 색상들 형식 통일 필요
• 디자이너 핸드오프 → 피그마 HEX 값 일괄 RGB/HSL로 변환해서 스펙 문서에 넣을 때
• 다크모드 토큰 정리 → 라이트/다크 두 세트 색상 동시에 변환할 때
• 레거시 코드 마이그레이션 → 구버전에서 쓰던 색상 형식 새 형식으로 일괄 교체
• 브랜드 가이드라인 작성 → 동일 색상을 HEX/RGB/CMYK 전부 표기해야 할 때
• CSS-in-JS 전환 → styled-components로 갈아타면서 색상 코드 형식 바꿔야 할 때

공통점이 뭐냐면, 색상 하나가 아니라 여러 개를 동시에 처리해야 한다는 거임. 이럴 때 하나씩 변환하는 건 진짜 비효율 중에 비효율.

기존 방법 문제

뭐 방법이 없는 건 아님. 근데 다 불편함:

• 구글 "hex to rgb" 검색 → 한 번에 하나씩만 됨. 20개면 20번 검색.
• 색상 변환 사이트 → 대부분 단일 입력 UI. 여러 개 붙여넣기 안 됨.
• 피그마 플러그인 → 있긴 한데 팀 플랜 아니면 제한 있거나 설치 귀찮음.
• 직접 스크립트 짜기 → 가능하긴 한데 매번 짜는 것도 귀찮고, 출력 포맷도 신경 써야 함.
• 엑셀/스프레드시트 → 색상 변환 공식 넣어서 쓰는 사람도 있는데 세팅이 번거롭고 공유 안 됨.

결국 "에라 모르겠다 하나씩 하자"가 됨. 근데 30개 되면 진짜 고통임 ㅋㅋ

그래서 만들었음

여러 색상 코드를 한 번에 붙여넣고 원하는 형식으로 일괄 변환하는 도구:

• HEX 여러 개 한꺼번에 입력 → RGB / HSL / CMYK 동시 변환
• 지원 형식: HEX, RGB, RGBA, HSL, HSLA, CMYK
• 입력 형식 자동 감지 → HEX 섞여 있어도, RGB 섞여 있어도 알아서 파싱
• 변환 결과 전체 복사 → 한 번에 클립보드로, 바로 붙여넣기 가능
• 미리보기 스와치 → 색상이 실제로 어떻게 보이는지 바로 확인
• CSS 변수 형식 내보내기 → --color-primary: #1E90FF; 형태로 바로 복사

디자인 시스템 작업할 때 "색상 토큰 정리"에 드는 시간이 진짜 확 줄었음. 예전엔 색상 하나씩 복붙하면서 30분 걸리던 거 이제 2분도 안 걸림.

색상 코드 형식 간단 정리

헷갈리는 사람 있을까봐 짧게 설명:

• HEX (#RRGGBB) — 디자이너 도구 기본값. 피그마, Adobe XD, Sketch 전부 HEX. 예: #1E90FF
• RGB (r, g, b) — CSS 웹 개발 기본. 각 채널 0~255. 예: rgb(30, 144, 255)
• RGBA — RGB + 불투명도(alpha). 반투명 배경, 오버레이에 필수. 예: rgba(30, 144, 255, 0.5)
• HSL (hue, saturation%, lightness%) — 색조/채도/명도. 프로그래밍으로 색상 조작할 때 직관적. 다크모드 색상 파생에 자주 씀.
• CMYK — 인쇄용. 실제 인쇄물 제작할 때 인쇄소에 넘기는 형식. 디지털 화면에서는 잘 안 씀.

프론트엔드 개발하면서 가장 자주 필요한 건 HEX ↔ RGB/RGBA ↔ HSL 이 세 가지임. CMYK는 인쇄 작업할 때나 쓰고.

실제로 써보니

좋은 점:

• 디자인 시스템 색상 토큰 정리가 진짜 빠르게 됨
• 피그마에서 뽑은 값 그대로 붙여넣으면 알아서 파싱해줌
• 색상 미리보기가 있어서 변환 중 실수 바로 발견 가능
• CSS 변수 형식으로 바로 내보내기 가능 → 코드에 그냥 붙여넣으면 됨
• 로그인/회원가입 없음. 그냥 쓰면 됨.

한계:

• 색상 이름(name) 기반 변환은 안 됨 — dodgerblue 같은 CSS 색상 이름은 HEX로 먼저 바꿔야 함
• Sass/Less 변수 파일 형식으로 직접 내보내기는 아직 없음
• 색상 100개 이상 되면 살짝 느릴 수 있음 (50개 이하는 즉시 됨)

활용 팁

이런 식으로 쓰면 더 편함:

• 피그마에서 색상 토큰 추출 → 플러그인으로 HEX 값 내보내기 → 이 도구에 붙여넣기 → CSS 변수로 변환 → tokens.css에 붙여넣기
• Tailwind 색상 팔레트 만들기 → 브랜드 컬러 HEX들 입력 → RGB 형식으로 변환 → tailwind.config.js에 RGB 값 넣으면 opacity 조절 편함
• 다크모드 색상 파생 → 라이트 모드 색상 HSL로 변환 → Lightness 값만 조정해서 다크 모드 색상 만들기
• 브랜드 가이드 작성 → 주요 색상들 HEX/RGB/CMYK 세 형식 동시에 변환 → 가이드 문서에 일괄 붙여넣기

사용법

1. 색상 코드 여러 개를 입력창에 붙여넣기 (한 줄에 하나씩, 또는 쉼표로 구분)
2. 변환할 대상 형식 선택 (RGB / HSL / CMYK 등)
3. 실시간으로 변환 결과 확인 — 색상 스와치로 맞는지 눈으로도 체크
4. 전체 복사 버튼 → 클립보드에 복사
5. CSS 변수 형식 필요하면 "CSS 변수로 내보내기" 클릭
6. 코드에 붙여넣기. 끝.

피그마 색상 20개 → CSS 변수 파일 → 2분 이내.

써보기

👉 여러 색상 일괄 변환 바로 가기

디자인 시스템 정리하거나 색상 토큰 작업 중이라면 한 번 써봐. 하나씩 변환하던 시간이 얼마나 날아가는지 체감됨 ㅋㅋ

#색상변환 #디자인시스템 #HEX #RGB #HSL #CSS색상 #색상코드 #일괄변환 #프론트엔드