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

색상, 채도, 명도

HSL에서는 노랑과 파랑의 명도가 똑같이 50%인데, WCAG 휘도 공식으로 재면 노랑이 파랑보다 빛을 거의 13배 더 냅니다.

3D 모형을 불러오는 중

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

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

정육면체를 원기둥으로 바꾸기

RGB 숫자는 화면에게는 쉽지만 사람에게는 어렵습니다. "같은 파랑인데 조금 더 밝게"를 원하면 세 채널을 한꺼번에, 그것도 서로 다른 양만큼 바꿔야 합니다. HSL은 같은 sRGB 색을 다시 배열해서 사람이 색을 말하는 방식에 맞춥니다. CSS Color 4는 이것을 원기둥 모형이라고 설명합니다. 바깥을 도는 색상 각도, 검정부터 흰색까지 명도를 나타내는 가운데 축, 그리고 중성 회색에서 얼마나 떨어졌는지를 나타내는 반지름인 채도입니다.

RGB 정육면체를 검정 꼭짓점으로 세우고 흰색이 바로 위에 오게 한다고 생각해 보세요. 회색 축이 수직이 됩니다. 위에서 내려다보면 선명한 여섯 꼭짓점, 빨강, 노랑, 초록, 청록, 파랑, 자홍이 축 둘레에 고리를 이룹니다. HSL은 이 고리를 둥글게 펴고 입체 전체를 원기둥으로 늘입니다. 위 모형이 그 결과입니다. 고른 명도 높이의 가로 원판과, 고른 색상과 그 반대 색상을 지나는 세로 단면이 보입니다. 두 면 어디든 누르면 그 색이 골라집니다.

색상(H)

색상은 도 단위의 각도입니다. CSS Color 4는 출발점을 정해 둡니다. 0deg는 sRGB 빨강, 120deg는 초록, 240deg는 파랑이고, 360deg에서 다시 빨강으로 돌아옵니다. 원색 사이 한가운데에는 2차색이 있습니다. 60deg는 노랑, 180deg는 청록, 300deg는 자홍입니다. 색상은 각도라서 한 바퀴를 돌면 되돌아옵니다. 390deg는 30deg와 같고, 어떤 색상에 180deg를 더하면 원의 정반대편 색에 닿습니다.

채도(S)와 명도(L)

채도는 백분율입니다. 100%이면 색이 원기둥 바깥면에 있고, 그 명도에서 sRGB가 낼 수 있는 가장 선명한 색입니다. 0%이면 가운데 축 위의 회색입니다. CSS Color 4는 이때 색상 값이 아무 영향을 주지 않는다고 적으므로 hsl(0deg 0% 50%)과 hsl(180deg 0% 50%)은 같은 회색입니다. 명도도 백분율입니다. 0%는 어떤 색상이든 검정, 100%는 어떤 색상이든 흰색이고, 50%에서 그 색상이 가장 선명합니다. 그래서 hsl(0deg 100% 50%)은 #ff0000과 같은 빨강이고, hsl(120deg 100% 25%)은 rgb(0 128 0)인 짙은 초록입니다.

HSL 명도는 같지만 밝기는 아주 다릅니다. Y는 WCAG 상대 휘도로, 검정이 0, 흰색이 1입니다.

HSL이 헷갈리게 하는 곳

HSL은 편리하지만 CSS 명세는 그 한계를 숨기지 않습니다. HSL의 명도는 눈이 느끼는 밝기와 다릅니다. 노랑 hsl(60deg 100% 50%)과 파랑 hsl(240deg 100% 50%)은 L이 똑같이 50%인데 노랑이 훨씬 밝아 보입니다. WCAG 휘도 공식으로 계산하면 이 노랑은 0.9278, 이 파랑은 0.0722로 거의 13배 차이입니다. 색상 각도도 고르지 않습니다. 명세는 파랑 근처의 30도 차이는 작아 보이지만 노랑과 초록 사이의 같은 30도는 크게 보인다고 적습니다. oklch() 같은 새 CSS 색 공간은 이 문제를 고치려고 만든 것입니다. 글자가 읽히는지 확인할 때는 HSL 명도를 믿지 말고, 6단원에서 계산할 대비율을 쓰세요.

0deg 빨강, 60deg 노랑, 120deg 초록, 180deg 청록, 240deg 파랑, 300deg 자홍.

핵심 정리
  • HSL은 원기둥입니다. 색상은 각도, 채도는 반지름, 명도는 높이입니다.
  • 0deg 빨강, 120deg 초록, 240deg 파랑입니다.
  • 채도 0%이면 색상 값은 아무 영향이 없고, 명도 0%는 검정, 100%는 흰색입니다.
  • HSL 명도는 눈이 느끼는 밝기와 맞지 않습니다.
  1. HSL에서 순수한 sRGB 초록의 색상 각도는?
  2. 자홍의 색상 각도는?
  3. hsl(0deg 100% 50%)은 무슨 색입니까?
    • #ff0000
    • #000000
    • #ffffff
    • #800000
  4. hsl(200deg 60% 100%)은 무슨 색입니까?
    • 흰색
    • 연한 파랑
    • 검정
    • 회색
  5. hsl(0deg 0% 50%)과 hsl(180deg 0% 50%)은...
    • 같은 회색
    • 빨강과 청록
    • 검정과 흰색
    • 서로 다른 회색
  6. HSL 원기둥에서 가운데 축과의 거리는 무엇을 나타냅니까?
    • 채도
    • 색상
    • 명도
    • 휘도
  7. 390deg는 0과 360 사이의 어떤 색상과 같습니까?
  8. 순수한 노랑 #ffff00의 WCAG 상대 휘도는? 소수 넷째 자리까지 쓰세요.
  9. 노랑과 파랑의 HSL 명도가 둘 다 50%입니다. 어느 쪽이 더 밝아 보입니까?
    • 노랑
    • 파랑
    • 똑같아 보인다
    • 색상 각도에 달렸다
  10. hsl(120deg 100% 25%)은 무슨 색입니까?
    • rgb(0 128 0)
    • rgb(0 255 0)
    • rgb(128 255 128)
    • rgb(64 64 64)
이 과정의 출처 (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