CSS에서 #FFF와 #FFFFFF는 같은 흰색입니다. 3자리 HEX는 각 글자를 두 번씩 펼쳐 읽기 때문입니다. F·F·F는 FF·FF·FF가 됩니다. 색을 덜 정확하게 표시한 것이 아니라, 정해진 조건에서 같은 값을 짧게 적은 것입니다.

여섯 자리는 세 쌍으로 읽습니다

HEX 색상은 빨강, 초록, 파랑의 성분을 16진수로 적는 방식입니다. 6자리에서는 앞의 두 자리가 빨강, 가운데 두 자리가 초록, 마지막 두 자리가 파랑입니다. 각 쌍은 00부터 FF까지, 십진수로는 0부터 255까지의 값을 나타냅니다.

#FFFFFF는 세 성분이 모두 255이고, #000000은 모두 0입니다. #FF0000은 빨강 성분이 255, 나머지가 0인 값입니다. 이 표기는 sRGB 색 공간의 값이며, 실제로 보이는 색은 화면의 특성과 설정에 따라 달라질 수 있습니다.

3자리 표기는 이 세 쌍을 한 글자씩으로 줄입니다. 다만 뒤를 0으로 채우는 방식이 아닙니다. #3A7은 #30A070이 아니라 #33AA77입니다. 읽는 순서보다 ‘각 자리를 복제한다’는 규칙을 기억하는 편이 쉽습니다.

#3A7을 숫자로 풀어보면

16진수의 A는 십진수 10입니다. 따라서 33은 3 × 16 + 3으로 51, AA는 10 × 16 + 10으로 170, 77은 7 × 16 + 7로 119입니다. 따라서 #3A7과 #33AA77은 모두 RGB 51, 170, 119를 나타냅니다.

대문자와 소문자도 색을 바꾸지 않습니다. #3A7, #3a7, #33AA77, #33aa77은 같은 색을 가리킵니다. 파일에서 코드의 모양이 다르게 보여도, 대소문자나 축약 표기만 달라진 것일 수 있습니다.

반대로 #345678을 #357로 줄이면 다른 색이 됩니다. #357을 펼친 값은 #335577이기 때문입니다. 빨강·초록·파랑의 각 쌍에서 두 글자가 서로 같을 때만 값을 유지한 채 3자리로 줄일 수 있습니다.

축약 전후에 실제로 같은 값인지 확인
짧은 표기펼친 표기RGB
#FFF#FFFFFF255, 255, 255
#3A7#33AA7751, 170, 119
#357#33557751, 85, 119

모든 색을 짧게 쓸 수는 없습니다

3자리 HEX에서 각 성분은 0부터 F까지 16가지 중 하나입니다. 조합은 16 × 16 × 16으로 4,096가지입니다. 6자리 HEX의 256 × 256 × 256, 즉 16,777,216가지보다 선택할 수 있는 값이 적습니다.

그렇다고 #FFF가 #FFFFFF보다 품질이 낮다는 뜻은 아닙니다. 3자리로 줄일 수 있는 색이라면 두 표기의 값은 완전히 같습니다. 차이는 색 하나의 품질이 아니라, 그 표기법으로 고를 수 있는 색의 가짓수입니다.

정확한 브랜드 색이나 전달받은 디자인 값이 #345678이라면 여섯 자리를 유지하세요. 코드 세 글자를 줄이려고 비슷한 색으로 바꾸는 것은 표기 정리가 아니라 색상 변경입니다.

네 자리 색은 오타가 아닐 수 있습니다

CSS에는 #RGBA와 #RRGGBBAA 표기도 있습니다. 마지막 성분은 알파, 즉 불투명도를 나타냅니다. #0000은 검정에 알파 0을 준 완전 투명 값이고, #000F는 알파가 최대인 불투명한 검정입니다. 한 글자 차이로 의미가 크게 달라집니다.

색상 코드의 알파와 요소 전체의 opacity도 구분해야 합니다. 배경색의 알파만 낮추면 배경의 투명도를 조절하지만, 요소의 opacity를 낮추면 그 안의 글자와 자식 요소까지 함께 투명해집니다. 배경만 옅게 만들려다가 글자까지 흐려졌다면 확인할 부분입니다.

입력창이 4자리 코드를 거절한다고 해서 CSS에서 틀린 색이라는 뜻은 아닙니다. 변환기마다 지원 형식이 다르기 때문입니다. 아래 도구는 3자리와 6자리 HEX를 RGB·HSL로 바꾸는 용도이므로 투명도는 별도로 다뤄야 합니다.

내 숫자로 확인해 보기

HEX 입력란에 #3A7을 넣어 RGB 51, 170, 119를 확인한 뒤 #33AA77과 비교해 보세요. 이 도구는 투명도 없는 3자리·6자리 HEX를 지원하며 4자리·8자리 알파 값은 지원하지 않습니다.

HEX·RGB 색상 변환기 열기
출처와 계산 조건

3자리 확장과 색의 가짓수는 W3C CSS Color 명세, 대소문자·알파 표기는 MDN HEX 문서, 요소 전체 투명도는 MDN opacity 문서를 참고했습니다. 표의 RGB 값은 직접 변환한 예시입니다.

작성 과정과 자동화 도구 사용은 편집 원칙에 공개합니다. 잘못된 내용은 문의로 알려 주세요.

색상 코드를 줄일 때는 각 쌍이 같은 문자인지 먼저 확인해 보세요.