#FFF와 #FFFFFF는 같은 색일까요? 맞습니다. HEX 색상 코드에는 단축 표기법이 있습니다. 3자리와 6자리의 차이를 알면 코드를 더 효율적으로 작성할 수 있습니다.
단축 표기법의 원리
6자리 HEX 코드에서 각 쌍이 같은 문자면 3자리로 줄일 수 있습니다. #AABBCC는 #ABC, #FF0000은 #F00이 됩니다. 브라우저가 자동으로 확장합니다.
사용할 수 없는 경우
#1A2B3C처럼 쌍이 다른 경우는 단축할 수 없습니다. 또한 8자리 HEX(투명도 포함)는 4자리로 단축합니다. #FF000080은 단축 불가능하지만 #FF000088은 #F008이 됩니다.
어떤 것을 사용할까
가독성을 위해 6자리를 선호하는 팀도 있고, 코드 압축을 위해 3자리를 권장하는 팀도 있습니다. 색상 변환기에서 색상을 확인하고 팀 컨벤션에 맞게 선택하세요. 일관성이 중요합니다.
브라우저 지원 현황
4자리 단축 표기도 가능합니다. #F00A는 #FF0000AA와 같습니다. 모던 브라우저는 모두 지원하지만, 팀 컨벤션에 따라 가독성을 위해 8자리로 통일할 수 있습니다. 색상 변환기에서 투명도 계산을 확인하세요.
투명도 변환 팁
50% 투명도는 80(HEX)입니다. 80(16진수) = 128(10진수). 128/255 ≈ 0.5. 자주 쓰는 투명도: 90%=E6, 80%=CC, 70%=B3, 60%=99, 50%=80, 40%=66, 30%=4D, 20%=33, 10%=1A. 이 값들을 알아두면 계산기 없이 바로 쓸 수 있습니다.
Sass/SCSS에서 활용
Sass 함수로 lighten($color, 10%), darken($color, 10%), saturate(), desaturate() 등을 사용하면 한 색상에서 변형을 쉽게 만들 수 있습니다. 단, 컴파일 타임에 결정되므로 런타임 변경은 불가능합니다.
지속적인 학습
색상 이론은 깊이가 있는 분야입니다. 기본적인 변환 방법을 익힌 후 점점 더 깊은 내용을 학습하세요. 색상 변환기를 활용하면서 실습하면 이해가 빨라집니다.