보색, 유사색, 삼각 배색
화면 색상환에서 240도 파랑의 보색은 60도 노랑인데, 화가의 색상환에서는 파랑 맞은편에 주황이 있습니다.
끌어서 돌리고, 휠이나 두 손가락으로 확대하세요.
배색은 각도입니다
디자인 교재는 균형 있어 보이는 배색 몇 가지를 소개합니다. 색을 색상환 위에 놓고 나면 배색은 출발 색상에서 잰 각도의 묶음일 뿐입니다. 보색은 정반대편, 180도 떨어진 색입니다. 유사색은 서로 이웃한 색이고, 모형에서는 양쪽으로 30도씩을 씁니다. 삼각 배색은 120도씩 고르게 떨어진 색 셋으로 정삼각형을 이룹니다. 분할 보색은 보색 대신 그 양옆의 두 색을 쓰는데, 여기서는 출발 색상에서 150도와 210도입니다.
LibreTexts의 드로잉 과정은 배색마다 성격을 이렇게 설명합니다. 보색 쌍은 대비가 강해서 눈길을 끌기 때문에, 디자이너는 눈에 띄어야 하는 곳에 보색을 씁니다. 유사색 배색은 차분하고 통일감이 있으며, 초원의 초록, 노랑, 주황처럼 자연에서 흔히 보입니다. 삼각 배색은 생기 있으면서도 균형이 잡혀 있습니다. 분할 보색은 보색 쌍의 대비를 상당히 유지하면서도 덜 부담스럽습니다. 델라웨어 대학 도서관의 안내서는 색을 얼마만큼 쓸지에 대한 실용적인 경험칙도 덧붙입니다. 주된 색 약 60%, 보조 색 30%, 강조 색 10%입니다.
어느 색상환일까
여기에 함정이 하나 있습니다. 색상환은 하나가 아닙니다. 이 과정의 HSL 색상환은 빛으로 만든 것이고 원색이 빨강, 초록, 파랑입니다. 여기서는 0도 빨강의 맞은편이 180도 청록이고, 초록의 맞은편은 자홍, 파랑의 맞은편은 노랑입니다. 미술 수업에서는 빨강, 노랑, 파랑 물감을 바탕으로 한 화가의 색상환을 많이 씁니다. 그 색상환에서는 빨강 맞은편에 초록, 노랑 맞은편에 보라, 파랑 맞은편에 주황이 있고, LibreTexts 과정에 나오는 보색 쌍도 이것입니다. 어느 쪽도 틀리지 않았습니다. 서로 다른 질문에 답할 뿐입니다. 빛의 색상환은 어떤 두 빛을 더하면 흰색이 되는지 알려 주고, 화가의 색상환은 물감을 섞는 오랜 전통입니다. 화면용 팔레트를 만들 때는 코드가 쓰는 HSL 각도를 기준으로 삼고, 참고하는 글이 어느 색상환을 말하는지 확인하세요.
배색이 정하는 것은 색상이지 명도가 아닙니다. 채도 100%, 명도 50%인 삼각 배색 세 색은 요란합니다. 실제로 디자이너는 각도는 그대로 두고 채도와 명도를 바꿉니다. 한 색은 진하게, 나머지는 옅거나 어둡게 하는 식입니다. 모형에서 삼각 배색을 고른 뒤 채도를 낮춰 보면 삼각형이 모양은 그대로 둔 채 회색 축 쪽으로 줄어듭니다.
교재에 흔히 나오는 배색이 두 가지 더 있습니다. 단색 배색은 한 색상을 더 밝게, 더 어둡게 바꾼 여러 색으로 이루어지는데, RMIT 색 이론 교재는 이것을 틴트와 셰이드라고 부릅니다. HSL로 말하면 색상은 그대로 두고 명도와 채도만 움직이므로, 모형에서는 세로 단면 위의 수직선이 됩니다. 4색 배색은 색상환 위에서 직사각형을 이루는 네 색상으로, 보색 쌍 두 개를 함께 쓰는 셈입니다. 네 색이 90도씩 고르게 떨어지면 정사각형이 됩니다. 네 색은 균형을 맞추기 어려워서, 대부분의 안내서는 한 색이 앞장서고 나머지는 조금씩만 쓰라고 권합니다.
| 보색 | +180° |
| 유사색 | −30°와 +30°(이웃한 색) |
| 삼각 배색 | +120°와 +240° |
| 분할 보색 | +150°와 +210° |
| 빛의 색상환에서 파랑의 보색 | 노랑(240° + 180° = 60°) |
- 보색은 180도, 유사색은 이웃, 삼각 배색은 120도 간격, 분할 보색은 150도와 210도입니다.
- 빛(HSL)의 색상환에서는 파랑 맞은편이 노랑이고, 화가의 색상환에서는 주황입니다.
- 배색은 색상만 정하고, 채도와 명도는 따로 고릅니다.
- 흔히 쓰는 경험칙은 주된 색 60%, 보조 색 30%, 강조 색 10%입니다.
- HSL 색상환에서 30°의 보색은 몇 도입니까?
- 300°의 보색은 몇 도입니까?
- 0°에서 출발한 삼각 배색의 나머지 두 색상은?
- 120°와 240°
- 90°와 180°
- 30°와 330°
- 180°만
- 삼각 배색은 색상환 위에서 어떤 도형을 이룹니까?
- 정삼각형
- 직선
- 정사각형
- 직각삼각형
- 유사색 쌍은?
- 30°와 60°
- 30°와 210°
- 0°와 120°
- 60°와 240°
- HSL(빛) 색상환에서 파랑의 맞은편은?
- 노랑
- 주황
- 빨강
- 초록
- 전통적인 화가의 색상환에서 파랑의 맞은편은?
- 주황
- 노랑
- 청록
- 자홍
- 보색 대신 그 양옆의 두 색을 쓰는 배색은?
- 분할 보색
- 유사색
- 삼각 배색
- 단색
- 60/30/10 팔레트에서 강조 색은 몇 %입니까?
- 모형에서 삼각 배색의 채도를 낮추면 삼각형은?
- 회색 축 쪽으로 줄어든다
- 회전한다
- 직선이 된다
- 아무 변화가 없다
이 과정의 출처 (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