CSS 압축기의 색상 코드 축약 규칙

가이드 · 2026.08.20 최종 확인

CSS 압축기를 쓰다 보면 #ffffff가 #fff로 줄어드는 걸 보고 "왜 어떤 색상은 줄어들고 어떤 색상은 그대로일까"라는 의문이 생깁니다. 이 축약은 눈대중이 아니라 정규식 하나로 판정되는 명확한 조건을 갖고 있습니다. 이 가이드는 그 조건이 정확히 무엇인지, 그리고 헥스 코드가 아닌 다른 색상 표기법(rgb, hsl)은 왜 같은 방식으로 줄어들지 않는지를 구조적으로 설명합니다.

1. 6자리 헥스가 3자리로 줄어드는 진짜 조건

CSS 명세상 3자리 헥스 코드 #rgb는 6자리 #rrggbb의 각 자리를 두 번 반복해 쓴 것과 완전히 동일하게 해석됩니다. 즉 #0f0은 브라우저 내부에서 #00ff00과 똑같이 처리됩니다. 이 성질을 거꾸로 이용하면, 6자리 코드의 R·G·B 각 자리쌍이 우연히 같은 문자 두 개로 이루어져 있을 때만 안전하게 3자리로 되돌릴 수 있습니다. R쌍이 "ff", G쌍이 "00", B쌍이 "00"처럼 각 쌍의 두 문자가 동일해야 하고, 세 쌍 모두 이 조건을 만족해야 축약이 성립합니다. 하나의 쌍이라도 두 문자가 다르면 그 정보를 3자리로 옮길 방법이 없으므로 축약 자체가 불가능합니다.

2. 정규식으로 본 실제 판정 로직

CSS 압축기가 실제로 쓰는 정규식은 다음과 같은 형태입니다.

이 구조 때문에 판정은 사람이 눈으로 보는 것보다 훨씬 엄격합니다. 자리쌍 하나라도 어긋나면 정규식이 아예 매치하지 않고, 원본 6자리 코드가 손대지 않은 채 그대로 출력됩니다.

3. 축약되는 색상과 되지 않는 색상 비교

위 표의 #a1b2c3·#3b82f6이 대표적인 "축약 불가" 사례입니다. R쌍의 두 문자가 서로 다르면 정규식의 역참조 조건(\1)을 만족하지 못하고, G·B쌍도 마찬가지라 전체가 매치되지 않습니다. 실무에서 브랜드 컬러나 디자인 시스템의 색상값은 대부분 이런 임의 조합이라, 실제로는 6자리 그대로 남는 경우가 훨씬 많습니다. 참고로 CSS 압축기 페이지 자체의 FAQ 문구 중 "#ff9933은 축약되지 않는다"는 설명이 있는데, 실제 정규식으로 검증하면 #ff9933은 각 자리쌍(ff·99·33)이 모두 두 문자 동일이라 #f93으로 축약되는 값입니다 — 코드 동작과 문서 예시가 어긋난 경우이므로, 축약 여부를 판단할 때는 이 가이드의 판정 로직(정규식 자체)을 기준으로 삼는 것이 정확합니다.

4. rgb()·hsl()은 왜 같은 방식으로 축약되지 않는가

CSS 압축기의 색상 축약 규칙은 #로 시작하는 헥스 표기법에만 적용되는 정규식입니다. rgb(255,255,255)나 hsl(0,0%,100%) 같은 함수형 표기법은 애초에 이 정규식의 매치 대상이 아니므로, 압축기를 거쳐도 함수명·괄호·쉼표 주변 공백만 정리될 뿐 rgb()가 #fff처럼 더 짧은 헥스 표기법으로 자동 변환되지는 않습니다. 이는 이 도구가 순수 정규식 치환 방식이라 값의 의미(색상 자체)를 해석하지 않고 문자 패턴만 다루기 때문입니다 — 실제로 최소 바이트 표기를 원한다면 rgb(255,255,255)를 직접 #fff로 바꿔 입력하는 편이 압축률이 더 높습니다. RGB→HEX 변환기나 HEX→RGB 변환기로 표기법 간 변환은 가능하지만, 이는 별도 도구의 역할이며 압축기 자체의 색상 축약 규칙과는 무관합니다.

5. 실전 활용: 배포 전 체크리스트

• 디자인 토큰(--primary-color 등)에 넣는 헥스값을 처음부터 축약 가능한 형태(각 자리쌍이 중복되는 값)로 통일하면 압축률이 자연히 올라갑니다.
• 축약 가능 여부를 미리 알고 싶다면 6자리 값을 세 쌍으로 나눠 각 쌍의 두 문자가 같은지만 확인하면 됩니다 (앞의 판정 로직과 동일).
• 더 큰 폭의 압축이 필요하면 CSS 정리기로 먼저 포맷을 통일한 뒤 압축을 적용하는 순서를 권장합니다.

자주 묻는 질문