edubun
한국어
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
홈›색·디자인›색 이론

RGB와 16진수 색 코드

빨강, 초록, 파랑을 각각 256단계로 나누면 화면은 256 × 256 × 256 = 16,777,216가지 색을 낼 수 있고, 그 하나하나가 정육면체 안의 한 점입니다.

3D 모형을 불러오는 중

끌어서 돌리고, 휠이나 두 손가락으로 확대하세요.

끌어서 입체를 돌립니다. RGB 보기에서는 작은 정육면체를, HSL 보기에서는 색 원판이나 세로 단면을 누르면 그 색이 골라집니다. 모형 아래 칸에 16진수 코드, HSL 값, 배색, 고른 배경과의 대비율이 나옵니다.

숫자 세 개, 축 세 개

웹에서 쓰는 sRGB 색 공간에서는 색을 빨강, 초록, 파랑 세 채널의 값으로 씁니다. 보통 코드에서는 채널마다 0부터 255까지의 정수를 쓰는데, 8비트에 들어가는 범위입니다. 채널 값 0은 그 빛을 끈 것이고, 255는 끝까지 켠 것입니다. 그래서 rgb(255 0 0)은 화면이 낼 수 있는 가장 센 빨강이고, rgb(0 0 0)은 검정, rgb(255 255 255)는 흰색입니다.

각각 범위가 있는 숫자 세 개는 상자 하나를 만듭니다. 한 모서리에 빨강, 다른 모서리에 초록, 세 번째 모서리에 파랑을 놓으면 모든 색이 정육면체 안에 자리를 잡습니다. 위 모형은 모서리마다 8단계씩, 작은 블록 512개로 이 정육면체를 그립니다. 한 꼭짓점에는 검정이, 맞은편 꼭짓점에는 흰색이 있습니다. 검정 바로 옆 세 꼭짓점은 순수한 빨강, 초록, 파랑입니다. 흰색 바로 옆 세 꼭짓점은 청록(시안), 자홍(마젠타), 노랑이고, 각각 두 채널이 최대인 색입니다. 이름표를 켜고 검정에서 흰색까지 모서리를 따라가 보면 어느 길이든 원색 하나와 2차색 하나를 지납니다.

검정에서 흰색까지 이어진 점선은 회색 축입니다. 이 선 위의 점은 rgb(128 128 128)처럼 빨강, 초록, 파랑 값이 모두 같습니다. 이 선에서 멀리 떨어진 색은 선명하고, 가까운 색은 회색빛이 돕니다. 다음 단원의 HSL 모형에 담긴 생각이 여기서 처음 보입니다. 회색 축에서 얼마나 떨어졌는지가 바로 색이 얼마나 짙은지를 나타냅니다.

16진수 코드 읽기

CSS에서는 같은 세 숫자를 # 기호 뒤에 16진수로 쓸 수도 있습니다. 16진수는 0부터 9까지의 숫자와 a부터 f까지의 글자로 16씩 셉니다. a는 10, f는 15입니다. 16진수 두 자리는 16 × 16 = 256가지 값을 담으니 정확히 채널 하나입니다. 그래서 여섯 자리 코드는 빨강, 초록, 파랑 순서로 두 자리씩 세 쌍입니다. CSS Color 4는 글자의 대소문자를 가리지 않는다고 적으므로 #00ff00과 #00FF00은 같은 색입니다.

#2273c3을 채널 셋으로 나눈 모습입니다. 쌍의 앞자리는 16의 개수, 뒷자리는 1의 개수입니다.

쌍 하나를 읽으려면 앞자리에 16을 곱하고 뒷자리를 더합니다. c3이면 12 × 16 + 3 = 195입니다. ff는 15 × 16 + 15 = 255로 최댓값입니다. 80은 8 × 16 = 128로 거의 정확히 절반입니다. #f80처럼 세 자리로 쓴 코드는 줄임말이라서 숫자마다 두 번 겹쳐 읽습니다. #f80은 #ff8800입니다. 모형 아래 Hex 칸에 코드를 넣으면 표시점이 정육면체의 그 자리로 옮겨 갑니다.

배경세 장의 필터 사진으로 어떤 색이든 만든다는 생각은 1861년에 사람들 앞에서 처음 선보였습니다. 런던 왕립연구소 강연에서 제임스 클러크 맥스웰은 격자무늬 리본 사진을 보여 주었습니다. 사진가 토머스 서튼이 빨강, 초록, 파랑 필터를 차례로 끼우고 세 번 찍은 것입니다. 사진마다 찍을 때와 같은 필터를 끼워 영사하고, 세 영상을 화면 위에 겹쳤습니다. 결과는 완벽과 거리가 멀었지만, 필터를 거친 채널 세 개로 색을 만드는 방법은 지금의 디지털카메라와 화면도 그대로 씁니다.
색rgb()16진수
검정rgb(0 0 0)#000000
흰색rgb(255 255 255)#ffffff
빨강rgb(255 0 0)#ff0000
노랑rgb(255 255 0)#ffff00
청록rgb(0 255 255)#00ffff
중간 회색rgb(128 128 128)#808080
#ff0000빨강, rgb(255 0 0)
#00ffff청록, rgb(0 255 255)
#ff00ff자홍, rgb(255 0 255)
#ffff00노랑, rgb(255 255 0)
#808080중간 회색, rgb(128 128 128)
#000검정, #000000의 줄임
핵심 정리
  • sRGB 색은 채널 세 개이고, 채널마다 0부터 255까지입니다.
  • RGB 정육면체는 마주 보는 꼭짓점에 검정과 흰색이 있고, 그 사이에 회색 축이 있습니다.
  • 16진수 코드는 빨강, 초록, 파랑 순서의 16진수 두 자리 세 쌍입니다.
  • 256³ = 16,777,216가지 색입니다.
  1. 8비트 채널 하나가 가질 수 있는 값은 몇 가지입니까?
  2. 8비트 RGB로 나타낼 수 있는 색은 몇 가지입니까?
  3. 16진수 c3은 10진수로 얼마입니까?
  4. #a8581b의 빨강 채널은 10진수로 얼마입니까?
  5. 흰색을 여섯 자리 16진수 코드로 쓰세요.
  6. #00ffff는 어떤 색입니까?
    • 청록
    • 노랑
    • 자홍
    • 파랑
  7. 줄인 코드 #f80은 무슨 뜻입니까?
    • #ff8800
    • #f80000
    • #0f0800
    • #f8f8f8
  8. RGB 정육면체에서 검정과 마주 보는 꼭짓점은?
    • 흰색
    • 빨강
    • 파랑
    • 회색
  9. 정육면체의 회색 축 위에 있는 색은?
    • rgb(90 90 90)
    • rgb(90 0 90)
    • rgb(255 90 90)
    • rgb(0 0 90)
  10. CSS에서 #00ff00과 #00FF00은 같은 색입니까?
    • 같다
    • 다르다
    • 일부 브라우저에서만 같다
    • 인쇄할 때만 같다
  11. 맥스웰이 세 필터로 만든 컬러 사진을 보여 준 해는?
이 과정의 출처 (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

확인한 날: 2026-10-17