색·디자인

색 입체 하나로 공부하는 일곱 단원

이 분야에는 지금 색 이론 과정 하나가 있고, 일곱 단원으로 되어 있습니다. 첫 단원은 색이 어떻게 보이는지 설명하고, 다음 두 단원은 RGB와 16진수 코드, 그리고 색상, 채도, 명도를 다룹니다. 넷째 단원은 배색을 만들고, 다섯째 단원은 빛의 혼합과 잉크의 혼합을 비교하며, 마지막 두 단원은 대비율과 실제 디자인에 색 쓰기로 넘어갑니다. 대부분의 단원은 마우스로 돌릴 수 있는 모형 하나를 함께 씁니다. 작은 블록 512개로 된 RGB 정육면체이거나, 같은 색을 HSL 원기둥으로 다시 배열한 입체입니다. 한 점을 누르면 아래 칸에 16진수 코드, HSL 값, 배색, 고른 배경과의 대비율이 나옵니다.

원뿔세포, 프리즘, RGB 정육면체

빨간 사과에는 빨강이 들어 있지 않습니다. 햇빛의 짧은 파장과 중간 파장을 흡수하고 긴 파장을 돌려보낼 뿐입니다. 망막에는 세 종류의 원뿔세포가 약 600만 개 있고, 뇌가 이 셋을 비교할 때 색이 생깁니다. 그래서 순수한 노란빛과 빨간빛에 초록빛을 더한 것이 똑같아 보일 수 있습니다. 뉴턴은 1660년대에 프리즘으로 햇빛을 나누었고, 1704년 『광학』에 최초의 색상환 가운데 하나를 그렸습니다. 웹에서는 채널마다 0부터 255까지여서 rgb(0 0 0)은 검정, rgb(255 255 255)는 흰색입니다. 16진수 코드는 16진수 두 자리 세 쌍으로, #2273c3의 c3은 12 × 16 + 3 = 195입니다.

색상환 위의 각도

HSL은 색상을 각도로 놓아 0deg가 빨강, 120deg가 초록, 240deg가 파랑입니다. 채도가 0%이면 색상 값은 아무 영향이 없고, 명도 50%에서 그 색상이 가장 선명합니다. 과정은 한계도 분명히 밝힙니다. 명도가 똑같이 50%인 노랑과 파랑의 휘도는 0.9278과 0.0722입니다. 색을 색상환에 올리면 배색은 각도의 묶음이 됩니다. 보색은 180도 떨어져 있고, 삼각 배색은 120도씩 떨어진 색 셋이며, 분할 보색은 150도와 210도를 씁니다. 빛의 색상환에서는 파랑 맞은편이 노랑이지만 화가의 색상환에서는 주황이라는 점도 짚습니다. 잉크는 빛과 반대로 움직입니다. 청록은 빨강을, 자홍은 초록을, 노랑은 파랑을 빼고, 실제 잉크를 겹치면 탁한 갈색이 되기 때문에 인쇄기는 검정을 더합니다.

읽히는지 정하는 비율

글자가 읽히는지는 눈대중이 아니라 계산으로 정합니다. WCAG 상대 휘도는 선형으로 바꾼 채널에 빨강 0.2126, 초록 0.7152, 파랑 0.0722의 무게를 주고, 대비율은 (L1 + 0.05) / (L2 + 0.05)로 1:1부터 21:1까지입니다. AA 수준은 본문 4.5:1, 큰 글자와 화면 부품 3:1을 요구하고, AAA는 본문 7:1을 요구합니다. 흰 바탕의 회색 #767676은 4.54:1로 통과하고, 빨강 #ff0000은 4.00:1이어서 본문에는 미달입니다. 마지막 단원은 WCAG 1.4.1을 더합니다. 적록 색각 이상이 남성의 약 8%에게 있으므로 색만으로 정보를 전해서는 안 됩니다. 밝기 단계를 먼저, 색상을 나중에 정합니다. 모형의 브랜드 주황과 그 보색인 파랑은 대비율이 1.06:1밖에 되지 않습니다.