RGB 색상 이론: 디지털 색상이 탄생하는 마법

스마트폰이 어떻게 세 가지 기본 색상만으로 수백만 가지의 색상을 표현할 수 있는지 궁금해하신 적이 있나요? 또는 디지털 아티스트가 RYB 대신 RGB를 사용하는 이유가 무엇일까요? 예술과 과학이 가장 화려한 방식으로 만나는 디지털 색상 이론의 세계로 함께 떠나보시죠.

스크린 뒤의 이야기: 컬러 TV의 대경쟁

1940년대로 돌아가 보세요. 가족들이 매일 저녁 흑백 TV 앞에 모여 화면에서 깜빡이는 거친 이미지에 감탄하던 시절이었습니다. 하지만 무대 뒤에서는 두 거대 기업이 미국 가정에 컬러를 들여오기 위한 경쟁을 벌이고 있었죠.

두 시스템의 이야기

한쪽에는 CBS가 있었습니다. 회전하는 컬러 휠을 가진 - TV 안에 거대한 무지개 색 바람개비가 있다고 상상해보세요! 이 휠이 빠르게 회전하면서 흑백 이미지를 생생한 컬러로 필터링했습니다. 화면은 아름다웠지만, 한 가지 문제가 있었죠: 일반 TV로는 이 컬러 방송을 전혀 볼 수 없었습니다.

다른 한쪽의 RCA는 완전히 다른 것을 연구하고 있었습니다. 그들의 엔지니어들은 영리한 아이디어를 떠올렸죠: TV 화면에 빨강, 초록, 파랑 인광물질의 작은 점들을 입히면 어떨까요? 오늘날 여러분의 휴대폰에 있는 작은 픽셀처럼, 이 점들이 다양한 조합으로 빛나면서 상상할 수 있는 모든 색상을 만들어낼 수 있었습니다.

최초의 RCA 컬러 텔레비전 세트 중 하나. 이미지 출처: 위키피디아

[역사적 섹션 계속…]

자연의 청사진: 우리 눈이 색상을 보는 방법

우리 눈에는 서로 다른 파장의 빛에 반응하는 세 종류의 원뿔세포가 있습니다. 이미지 출처: 위키피디아

우리의 눈에는 세 가지 다른 종류의 “색상 감지기”(원뿔세포)가 있다고 생각해보세요:

• 적색 감지 원뿔세포 (~564-580nm) - 작은 빨간빛 전문가
• 녹색 감지 원뿔세포 (~534-545nm) - 초록색 감지 전문가
• 청색 감지 원뿔세포 (~420-440nm) - 파란빛 전문가

[기술적 섹션과 코드…]

interface Color { red: number; // 0-100 범위 green: number; // 0-100 범위 blue: number; // 0-100 범위 }

function mixColors(colorMixes: ColorMix[]): Color { const mixedColor: Color = { red: 0, blue: 0, green: 0 };

colorMixes.forEach(mix => { mixedColor.red += (mix.color.red * mix.proportion) / 100; mixedColor.green += (mix.color.green * mix.proportion) / 100; mixedColor.blue += (mix.color.blue * mix.proportion) / 100; });

return mixedColor; }

색상의 마법: 원색과 보조색

전통적인 회화에서 빨강, 노랑, 파랑으로 시작하는 것과 달리, 디지털 색상은 다르게 작동합니다:

원색

🔴 빨강 (255, 0, 0) - 순수한 빨간빛 🟢 초록 (0, 255, 0) - 순수한 초록빛 🔵 파랑 (0, 0, 255) - 순수한 파란빛

보조색 (혼합의 마법)

이러한 원색들을 동일한 비율로 혼합하면:

• 🔴 빨강 + 🟢 초록 = 💛 노랑 (255, 255, 0)
• 🟢 초록 + 🔵 파랑 = 💠 시안 (0, 255, 255)
• 🔵 파랑 + 🔴 빨강 = 💜 마젠타 (255, 0, 255)

직접 시도해보세요! 우리의 대화형 색상 믹서에서 이러한 조합들을 실험해보세요.

[실제 응용 섹션…]

우리가 사랑하는 색상 도구들

• 🎨 Adobe Color Wheel - 색상 조화 탐색
• 🌈 Coolors - 색상 팔레트 생성
• 🔍 ColorZilla - 웹페이지에서 색상 추출

참고문헌

1. W3C 색상 표준 문서
2. 색상 과학: 개념과 방법
3. 디지털 색상 관리: 원칙과 전략

---

색상 이론에 대해 더 알아보고 싶으신가요? 우리의 일일 색상 도전에서 새로운 지식을 시험해보세요!