NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


16,777,216

본문 건너 뛰기

오늘은 “제목만 봐도 내용을 알 수 있어야 한다”는 제 글쓰기 철학에 반하는 제목을 한 번 달아 봤습니다. 16,777,216 이라는 숫자에는 어떤 의미가 있을까요? 오늘 회사에서 인센티브가 나온다는데 저 정도 나와 주면 참 좋겠네요. 이 숫자가 낯이 익다면 아마도 당신은 뼛속까지 개발자이거나 또는 웹 디자이너가 아닐까 생각합니다.

CSS로 표현할 수 있는 색의 수는?

10년 넘게 웹 디자이너와 프론트 엔드 개발에 종사했지만 궁금하게 생각해 본 적도 없고 몰라도 먹고 사는데 지장이 없었습니다. 사실 몰라도 된다고 생각해요. 지구와 태양의 거리를 몰라도 사는데 지장 없는 것처럼. 그런데 오늘은 퇴근하면서 그냥 궁금해 지더라고요. 주머니에서 아이폰을 꺼내 계산기를 두드려 봤습니다.

256 * 256 * 256 = ?

네 맞습니다. 오늘 포스팅의 제목은 “CSS로 표현할 수 있는 색의 수” 였습니다. 못 믿으시겠으면 계산기 꺼내서 두드려 보세요.

CSS에서 색을 표현하는 방법.

CSS에서는 hex(hexadecimal) 또는 rgb(red, green, blue) 또는 rgba(red, green, blue, alpha) 값을 이용하여 색상을 표현합니다. 아래 예제 처럼요. 형식은 다르지만 모두 red + green + blue 형식이예요.

  • [color name] = [#+red+green+blue] = [rgb(0~255, 0~255, 0~255)] = [rgba(0~255, 0~255, 0~255, 0~1)]
  • black = #000000 = rgb(0, 0, 0) = rgba(0, 0, 0, 1)
  • white = #FFFFFF = rgb(255, 255, 255) = rgba(255, 255, 255, 1)
  • red = #FF0000 = rgb(255, 0, 0) = rgba(255, 0, 0, 1)
  • blue = #0000FF = rgb(0, 0, 255) = rgba(0, 0, 0, 1)

색상 이름으로 직접 색을 표현할 수도 있어요. 하지만 사람이 기억하는 색의 이름은 불과 수 십가지를 넘지 못하죠. CSS에서 색상 이름으로 색을 표현하도록 했다면 저는 아마 “빨주노초파남보” 정도의 색상만 사용했을 거예요. CSS 에서 16진수로 색을 표현하게 된 계기는 아마도 자연에 존재하는 수천만 색상을 최대한 유사하게 표현하려는 노력이었을 거예요.

6자리 코드만으로 16,777,216 개의 값을 표현.

만약 CSS에서 6개의 숫자(예: 000000, 999999)만 가지고 십진수로 색을 표현하려고 했다면 표현할 수 있는 색의 수는 r(99+1) * g(99+1) * b(99+1) = 1,000,000(백만) 정도 입니다. 99에 1을 더한 이유는 컴퓨터는 숫자를 0부터 세기 때문에 99는 곧 100가지 색상을 의미합니다. 이 정도면 실제 자연의 색을 표현하기에 충분하지 않냐고요? 음… 인공위성에서 촬영한 지구 사진을 보면 아름답죠. 만약 그 장면을 실제로 봤다고 생각해 보세요. 아마도 느낌이 많이 다를거예요.

어쨌거나 다시 본론으로 돌아와서 16진수를 사용하면 십진수보다 대략 17배 정도 더 많은 색상 표현이 가능해요.

  • r(16*16) * g(16*16) * b(16*16) = 16,777,216(천육백칠십칠만칠천이백십육)

이렇게나 많은 색을 표현할 수 있습니다. 그런데 CSS에서는 이것을 고작 6자리 문자 코드로 최대한 짧게 표현하려고 했어요. 10진수를 사용하면 100*100*100 정도의 색상만 표현할 수 있으나 16진수를 사용하면 256*256*256 개의 색을 표현할 수 있어요.

16진수를 6자리 수의 rrggbb 포멧으로 표현하려면 10, 11, 12, 13, 14, 15와 같은 두 자리 숫자를 한 자리 코드로 표현할 수 있는 문자가 필요해요. 맞아요. 알파벳을 이용해서 할 수 있어요. 예를 들면 10=A, 11=B, 12=C, 13=D, 14=E, 15=F 이렇게 말이죠. 16은 왜 없냐고요? 컴퓨터는 숫자를 0 부터 세기 시작하기 때문에 코드 F는 16번째 숫자(16단계의 색상)가 됩니다.

16진수는 숫자와 알파벳을 이용해서 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 이렇게 한 자리 코드로 16단계의 색을 표현할 수 있는데 이런 형식의 코드를 hex(hexadecimal, 16진수) 값이라고 불러요. 코드 F는 숫자 15이지만 0부터 셈을 하면 16번째 단계이므로 #FF0000 코드는 곧 r(15*15), g(0*0), b(0*0) 와 같고 rgb 형식으로 변환하면 rgb(255, 0, 0) 이 됩니다. 표현할 수 있는 빨간색의 가지 수는 16*16 = 256 이지만 코드 값이 0부터 시작하기 때문에 rgb 형식의 최댓값은 255(0을 포함하면 256단계)가 됩니다. #FF0000 코드는 빨강 값이 255 으로 최대치이기 때문에 다른 색이 섞이지 않은 완전 빨간 색이 나오겠죠. 자 이제 아래 표현 방식을 다시 한번 살펴 보세요.

  • black = #000000 = rgb(0, 0, 0) = rgba(0, 0, 0, 1)
  • white = #FFFFFF = rgb(255, 255, 255) = rgba(255, 255, 255, 1)
  • red = #FF0000 = rgb(255, 0, 0) = rgba(255, 0, 0, 1)
  • blue = #0000FF = rgb(0, 0, 255) = rgba(0, 0, 0, 1)

16진수를 이용하면 단 6자리의 코드만 가지고 16,777,216개의 색상을 모두 표현할 수 있다는 사실이 놀랍지 않나요?

원하는 색상을 코드로 표현하기.

참 컴퓨터 모니터는 빛을 이용해서 색상을 표현하기 때문에 RGB 원색을 모두 섞으면 흰 색이 되고 RGB 값이 모두 0이면 검정이 돼요. 숫자가 낮으면 어둡고 높을수록 밝은 색을 표현한다는 사실. 퀴즈 하나 내 볼까요? 흰색과 검정을 정확하게 반씩 섞은 색상은 hex 또는 rgb 코드로 어떻게 표현할 수 있을까요? 빨강 50%, 초록 50%, 파랑 50%을 섞으면 답을 구할 수 있지 않을까요?

관련 글.

분류: CSS,웹 표준 | 2015년 2월 13일, 3:29 | 정찬명 | 댓글: 3개 |
트랙백URI - http://naradesign.net/wp/2015/02/13/2111/trackback/