[CSS] #fff와 #ffffff는 무슨 차이인가요?

css에서 #fff처럼 색상 값에 세 자리만 쓰는 경우가 여럿 있길래 3자리 색상 값과 6자리 색상 값은 무슨 차이가 있는지 찾아봤다.

w3schools에서는 “The 3-digit hex code is a shorthand for some 6-digit hex codes.” 라고 언급하고 있다.

즉, 3자리 16진수 코드는 6자리 16진수 코드의 축약 표현인 것!

16진수 색상 값(#RRGGBB)의 각 자리 수는 red 값 2개, green 값 2개, blue 값 2개로 이루어져 있는데, 모든 색상 값 쌍이 서로 동일(R===R && G===G && B===B)하다면 16진수 2개로 표현할 필요 없이 하나만 써도 된다는 것이다.

즉, #ff00cc라면 R 값이 f로 동일 && G 값이 0으로 동일 && B 값이 cc로 동일하기 때문에 #f0c라는 세 자리 값으로 줄여쓰는 것이 가능하다.

다음 코드에 적힌 색상 값은 주석 색상 값과 동일한 값이다.

body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}

결론적으로 제목의 #fff와 #ffffff는 동일한 값이 되겠습니다!