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

색 이론

화면 위의 모든 색은 숫자 세 개입니다. 이 과정에서는 RGB 정육면체와 HSL 원기둥을 3D로 세워 보고, 보색과 삼각 배색이 색상환 어디에 놓이는지 확인하고, 빛과 잉크를 섞어 보고, 글자를 읽을 수 있는지 정하는 WCAG 대비율을 직접 계산합니다.

진도

이 과정에 대하여

1660년대에 아이작 뉴턴은 어두운 방에서 햇빛을 유리 프리즘에 통과시키기 시작했습니다. 그는 흰빛이 여러 색의 띠이고 두 번째 프리즘으로는 그 색들을 더 나눌 수 없음을 보였습니다. 1704년 『광학』에서 그는 그 띠를 원으로 구부려 가장자리를 음계의 비율로 일곱 부분으로 나누고 가운데에 흰색을 두었습니다. 그 그림이 최초의 색상환 중 하나이며, 이 과정의 모든 색상환이 거기서 이어집니다. 화면의 모든 색은 숫자 세 개이고, 망막에는 세 종류뿐인 원뿔세포가 약 600만 개 있습니다.

일곱 단원은 색을 보는 방식으로 시작하고, RGB와 16진수 코드로 이어집니다. 빨강, 초록, 파랑이 각각 256단계이므로 16,777,216가지 색이 나오고 모두 정육면체 안의 한 점입니다. 맥스웰은 1861년 왕립 연구소에서 빨강, 초록, 파랑 필터로 찍은 타탄 리본 사진을 보였고, 세 채널 방식은 지금도 모든 디지털 카메라와 화면이 씁니다. 색상·채도·명도 단원은 HSL에서 노랑과 파랑의 명도가 모두 50%인데도 노랑이 파랑보다 빛을 거의 13배 더 반사한다고 알려 줍니다. 보색, 유사색, 삼각 배색은 색상환 위에 놓입니다. 가산·감산 혼합 단원에는 약 1722년의 야코프 크리스토프 르 블롱의 『Coloritto』가 나오며, 스미스소니언은 이를 두 개념의 첫 기록이라 부릅니다. 대비비 단원은 흰 바탕의 회색 #767676이 4.54:1로 본문 기준을 통과하고 #777777은 4.48:1로 실패한다고 보여 줍니다. 마지막 단원은 남성의 약 8퍼센트가 적록 색각 이상이라고 알려 줍니다. 3D 실험실에서는 RGB 정육면체와 HSL 원기둥을 만듭니다.

시작하기 전에

비슷해 보이는 색도 수치로 비교하면 차이를 확인하는 데 도움이 됩니다. RGB와 16진수 색상 코드부터 익힌 뒤 HSL, 색의 관계, 명도 대비를 살펴봅니다. 화면의 빛을 섞는 일과 잉크를 섞는 일은 같은 색 이름을 써도 결과가 다르다는 점에 주의합니다.

마치고 나면

RGB와 16진수 색상 값을 읽고 색상, 채도, 명도를 조절할 수 있습니다. 보색, 유사색, 삼각 배색을 고르고 빛의 가산 혼합과 잉크의 감산 혼합을 구별합니다. 글자와 배경의 명도 대비를 WCAG 기준으로 확인하고, 입력 오류를 색만으로 표시하면 안 되는 이유도 설명할 수 있습니다.

  1. 1색은 어떻게 보일까망막에는 원뿔세포가 약 600만 개 있는데 종류는 세 가지뿐이고, 우리가 본 모든 색은 이 세 종류가 얼마나 세게 반응했는지의 조합입니다.
  2. 2RGB와 16진수 색 코드빨강, 초록, 파랑을 각각 256단계로 나누면 화면은 256 × 256 × 256 = 16,777,216가지 색을 낼 수 있고, 그 하나하나가 정육면체 안의 한 점입니다.
  3. 3색상, 채도, 명도HSL에서는 노랑과 파랑의 명도가 똑같이 50%인데, WCAG 휘도 공식으로 재면 노랑이 파랑보다 빛을 거의 13배 더 냅니다.
  4. 4보색, 유사색, 삼각 배색화면 색상환에서 240도 파랑의 보색은 60도 노랑인데, 화가의 색상환에서는 파랑 맞은편에 주황이 있습니다.
  5. 5가산 혼합과 감산 혼합흰 종이 위의 청록 잉크는 빨간빛을 흡수하므로, 청록과 자홍을 겹쳐 찍으면 파란빛만 남습니다.
  6. 6대비율과 읽히는 글자흰 바탕 위 회색 #767676은 대비율 4.54:1로 WCAG 본문 기준을 통과하고, 한 단계 밝은 #777777은 4.48:1로 미달입니다.
  7. 7디자인에 색 쓰기남성의 약 8%가 적록 색각 이상이라서, 오류를 빨간색으로만 표시한 입력 양식은 이들에게 수수께끼가 됩니다.

관련 과정

  • 악보 읽기 · 음악 이론
    오선 위의 음을 읽는 법을 처음부터 익힙니다. 높은음자리표와 낮은음자리표, 덧줄, 큰보표, 올림표와 내림표, 나라마다 다른 음이름까지 다룹니다. 단원마다 악보 퀴즈나 직접 칠 수 있는 건반이 있습니다.
  • 피아노 첫걸음 · 악기 체험
    건반 구조를 익히고, 흰 건반 이름을 외우고, 오른손 자리를 잡은 다음 화면 건반으로 첫 곡을 연주합니다. 마우스, 터치, 컴퓨터 자판 모두 쓸 수 있습니다.
  • 오케스트라 · 음악사·감상
    큰 교향악단은 한 무대에 100명이 넘는 연주자를 세웁니다. 3D 무대를 돌아보며 악기를 고르면 합성한 근사 음색과 건반 위 음역이 나오고, 유명한 선율을 악기군별로 하나씩 쌓아 들을 수 있습니다. 일곱 단원에서 역사, 네 가지 악기군, 지휘자와 총보, 감상법을 다룹니다.
  • 원근법 · 드로잉
    원근법으로 그린 그림은 모두 눈과 세상 사이에 놓인 상상의 유리판에 따라 그린 그림입니다. 눈의 위치와 유리 그림 평면이 있는 3D 방을 돌려 보고, 1점·2점·3점 투시를 바꾸며 눈높이를 올리고 내리면 수평선과 소실점이 어떻게 움직이는지 확인합니다.
이 과정의 출처 (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