색상환

색상환을 사용하면 모든 프로젝트에서 매력적이고 일관성 있는 색상 팔레트를 간단하고 효과적으로 만들 수 있습니다. 그 방법은 다음과 같습니다.

1단계: 기본 색상 선택하기.

색상 선택 도구로 색상환에서 원색을 선택합니다. 이 색상은 색상 팔레트의 기본이 되어 디자인의 톤과 분위기를 정하고 추가 색상 선택에 영향을 줍니다.

2단계: 색 구성표 선택하기.

색 구성표를 선택합니다. 각 색 구성표는 서로 다른 시각적 효과를 갖습니다.

• 보색은 서로 반대되는 색상을 사용하여 대비를 극대화합니다.
• 삼색은 삼각형 모양으로 색상을 사용하여 생동감 있으면서도 균형 잡힌 분위기를 연출합니다.
• 유사색은 서로 인접한 색상과 조화로운 효과를 만들어냅니다.
• 분할 보색은 기본 색상과 인접한 두 가지 색상을 보색으로 사용하여 긴장감을 낮추면서 대비가 높은 분위기를 연출합니다.
• 사색은 색상환 주변의 네 가지 색상을 고르게 배치하여 다양성을 강화합니다.
• 단색은 밝기(색조)와 어두움(음영)을 활용하여 기본 색상에 따라 미세한 변화와 눈에 띄는 대비를 만들어냅니다.

3단계: 디자인에 적용하기.

프로젝트에 가장 적합한 색상 팔레트를 찾았다면, 디자인에 적용하여 원하는 시각적 효과를 얻으세요.

색채 이론으로 디자이너는 완벽한 색 구성표를 만들고, 진한 보라색과 금색을 사용한 고급스러움 또는 부드러운 파란색과 녹색을 사용한 차분함 등 원하는 인상을 전달할 수 있는 체계를 구성할 수 있습니다. 고대비 조합으로 시선을 사로잡든 조화로운 분위기를 연출하든, 색채 이론을 이해하는 것이 중요합니다. 아래에서 몇 가지 주요 개념에 대해 간략하게 살펴보세요.

원색(RYB)이란?

원색(RYB) 모델의 기본 색상은 빨간색, 노란색, 파란색입니다. 이 세 가지 색은 색상환의 기본으로 다양한 비율로 혼합하여 다양한 모든 색상을 만들 수 있습니다.

보조색이란?

보조색은 색상환에서 원색 사이의 공간을 차지하며 두 가지 원색을 혼합하여 형성됩니다. 예를 들어 빨간색과 파란색을 혼합하면 보라색이, 빨간색과 노란색을 혼합하면 주황색이 만들어집니다. 녹색이 어떻게 만들어지는지 알고 싶다면 인접한 원색을 살펴보세요. 정답은 노란색과 파란색 입니다.

삼차색이란?

색상환의 나머지 부분을 삼차색 또는 중간색이 채웁니다. 삼차색은 원색과 보조색을 혼합하여 얻습니다. 일례로 빨간색과 주황색을 혼합하면 다홍색이 되며, 이 색은 두 색상 사이의 빈 공간을 채웁니다. 스크롤 가능한 색상환을 사용하면 위치에 따라 원하는대로 다홍색의 음영을 조정할 수 있습니다. 청록색, 청보라색, 다홍색, 자주색, 연한 주황색, 황녹색을 혼합하여 독특한 삼차색을 만들 수도 있습니다. 이렇게 세분화된 색상 선택 기능으로 제품 디자이너는 제품의 정확한 음영과 강조 색상을 찾을 수 있습니다.

7가지 색 구성표란?

색 구성표는 시각적 균형을 이루는 데 도움이 되는 전략적 색상 조합입니다. 이러한 배색은 색채 이론의 원리를 사용하여 미적으로 만족스러운 디자인을 만듭니다. 색 구성표에는 7가지 일반적인 유형이 있습니다.

보색

보색은 색상환에서 반대편에 있는 색과 짝지어 선명한 대비를 만듭니다. 색상을 선택한 다음 색상환을 180° 돌리면 보색을 찾을 수 있습니다. 빨간색과 녹색처럼 유명하고 인기 있는 보색 구성도 있습니다. 디자인에 따뜻한 색과 차가운 색을 모두 사용하려는 경우 이러한 색 구성표가 효과적일 수 있습니다.

분할 보색

분할 보색은 보색의 양쪽에 있는 두 가지 색상과 원색을 결합하여 얻을 수 있습니다. 이렇게 하면 세 가지 색상으로 구성된 팔레트를 만들 수 있으며 보다 은은한 색상 팔레트가 완성됩니다.

단색

단색은 원색의 더 밝고 어두운 버전으로 가장 쉽게 이해할 수 있습니다. 단색 색 구성표는 여러 가지 대비되는 색을 사용해야 하는 복잡한 의사 결정 과정을 없애 일반적으로 디자이너는 색상을 섬세하고 효과적으로 사용할 수 있습니다. 단색 색상 팔레트를 만들려면 원색에서 밝은 버전과 어두운 버전의 배율을 동일하게 조정합니다.

유사색

유사색은 색상환에서 인접한 세 가지 색상 그룹으로 보다 부드럽고 자연스러운 색상 팔레트를 만듭니다. 실제로 자연에는 서로 밀접하게 관련 있는 색조가 많습니다. 나무의 나뭇잎이나 바다 색깔의 미묘한 차이를 생각해보세요. 유사한 색 구성표는 매우 조화로우며 디자인에서 서로 다른 요소를 하나로 묶는 데 도움이 될 수 있습니다.

삼색

삼색 구성표는 세 가지 색이 똑같이 대비됩니다. 세 가지 색상은 색상환에서 동일한 거리만큼 떨어져 정삼각형을 형성합니다. 삼색으로 디자인할 때는 하나의 원색을 선택하고 나머지 두 가지 색을 악센트로 사용하는 것이 가장 좋습니다. 삼색 배색은 더 대담하고 유쾌한 경향이 있습니다.

사색(이중 보색)

Google과 Microsoft의 공통점은 무엇일까요? 두 기업 모두 로고에 사색 팔레트를 사용합니다. 사색은 네 개의 그룹을 의미하기 때문에 색상환에서도 직사각형을 형성하는 네 가지 색상을 선택합니다. 사색에는 보색 두 세트가 포함되어 생동감 있고 활기찬 팔레트를 형성합니다. 사색 배색은 '이중 보색' 배색이라고도 합니다.

정사각색

정사각색 구성표는 사색과 유사하게 네 가지 색을 사용합니다. 하지만 정사각색에서 색상은 색상환에서 동일한 거리만큼 떨어져 정사각형을 형성합니다. 이런 구성은 대비가 높은 사색 구성표에 비해 더 균형 잡힌 형태를 이룹니다. 사색 구성표와 마찬가지로 하나의 주요 색상을 선택하고 다른 색상은 악센트로 사용하는 것이 가장 좋습니다.

난색 vs 한색

색상환을 난색(따뜻한 색)과 한색(차가운 색)으로 나눌 수도 있습니다. 난색은 빨간색, 주황색, 노란색처럼 강렬합니다. 보라색, 파란색, 녹색과 같은 한색은 평온함과 휴식의 느낌을 불러일으킵니다. 명상 앱 Calm이 파란색을 주로 사용하는 것을 눈치채셨나요? 평온한 느낌을 불러일으키기 위해 의도적으로 선택한 색상입니다.

색상 모델은 숫자 값을 사용하여 색상을 표현하는 시스템입니다. 이 페이지에 사용된 네 가지 색상 모델은 다음과 같습니다

1. 빨강, 초록, 파랑(RGB)
2. 시안, 마젠타, 노랑, 검정(CMYK)
3. 색조, 채도, 명도(HSL)
4. 헥스 코드

빨강, 초록, 파랑(RGB)

빨강, 초록, 파랑(RGB) 색상 모델은 화면에 표시되는 모든 디자인의 기초입니다. 이 색상 모델은 색에 대한 인간의 인식과 눈이 빛과 상호작용하는 방식에 기반합니다. 이러한 '가색'은 우리가 매일 화면에서 접하는 다양한 색상 배열과 혼합될 수 있습니다.

시안, 마젠타, 노랑, 검정(CMYK)

반면에 CMYK 모델은 모든 인쇄 디자인의 기초입니다. 이러한 ‘감법 혼색’은 빛의 파장을 흡수하여 현실에서 볼 수 있는 색소와 더 확실하게 일치합니다.

• 시안(C): 시안은 청록색입니다. 시안 잉크를 표면에 적용하면 붉은 빛을 흡수하여 육안으로는 청록색으로 보입니다.
• 마젠타(M): 마젠타는 자홍색입니다. 녹색 빛을 흡수하여 자홍색으로 인식됩니다.
• 노랑(Y): 노란색은 청색광을 흡수하여 인쇄 시 노란빛을 띱니다.
• 키(K) 또는 검정: CMYK의 “K”는 “키”를 의미하며 검은색 요소를 나타냅니다. 검정 잉크는 이미지와 텍스트의 깊이 및 대비를 강화하는데 사용됩니다. 또한 검정 잉크를 사용하면 색상을 조합하여 검은색을 만들 때 발생할 수 있는 색상 혼탁을 방지하는 데 도움이 됩니다.

색조, 채도, 명도

색조는 색상환에서 보이는 색상을 나타냅니다. 360도 원 안의 스펙트럼이라고 생각하면 됩니다. 이 원 안을 탐색하면서 다양한 색조를 마주하게 됩니다.

• 색조: 색조의 정의는 다소 복잡합니다. 핵심은 색상환에 표시되는 색상을 의미한다는 것입니다. 색상환은 360도 원으로, 원 안을 이동하면서 다양한 색조를 발견할 수 있습니다.
• 채도: 채도는 색조의 선명함이나 강도로 알려졌으며 농도 또는 순도를 나타냅니다. 색상환의 바깥쪽에서 최대 채도의 색조를 볼 수 있습니다. 원의 중앙으로 갈수록 색조의 강도가 낮아집니다. 강도를 낮추려면 색조에 검은색 또는 흰색을 혼합합니다(예: 회색). 이렇게 하면 색조가 덜 강하게 나타납니다.
• 명도: 명도는 색상에 검은색 또는 흰색을 얼마나 섞을지를 결정합니다. 흰색을 더 많이 섞으면 파스텔 색상의 팔레트를, 검은색을 더 많이 섞으면 더 깊고 어두운 팔레트를 얻을 수 있습니다.

헥스 코드

16진수 코드 또는 헥스 코드는 화면의 픽셀 색상에 빨간색, 녹색, 파란색을 얼마나 혼합할지 컴퓨터에 알려줍니다.

화면의 각 픽셀은 실제로 빨간색, 녹색, 파란색 빛을 만드는 세 가지 색상 요소로 구성됩니다. 서브픽셀이라고도 하는 이러한 색상 요소는 매우 작아서 육안으로는 단일 색상처럼 보입니다.

각 픽셀마다 서로 다른 양의 빨간색, 녹색, 파란색 빛을 혼합하면 사람의 눈으로 볼 수 있는 범위를 넘어서는 최대 1,600만 가지 색상을 표시할 수 있습니다.

각 픽셀은 256개의 빨간색 값, 256개의 녹색 값, 256개의 파란색 값을 혼합하여 1,600만 가지 색상을 생성할 수 있습니다(256 x 256 x 256은 1600만 개 이상). 컴퓨터는 1과 0으로 구성된 언어인 이진 코드를 사용하여 색상 값을 각 픽셀에 전송합니다. 예를 들어, 빨간색 값 200은 이진 코드 11001000로 표현됩니다. 이진 코드는 인간이 이해할 수 없기 때문에 16진수 체계가 가독성을 위한 대안으로 사용됩니다.

헥스 코드가 작동하는 법

헥스 코드는 빨강, 초록, 파랑 세 가지 값을 가지며, 각각 두 자리 숫자로 표시됩니다. 예를 들어 #F234A2는 다음과 같이 구성됩니다.

• 빨강: F2
• 초록: 34
• 파랑: A2

글자는 무엇을 의미할까요? 일반적인 10진수 체계와 달리 헥스 코드는 16진수를 사용합니다. 0에서 9까지 숫자를 사용하고, A부터 F까지 사용해 10에서 15까지의 숫자를 표현합니다.

헥스 코드와 RGB 간 변환 방법

헥스 코드와 HSL 값은 RGB 색상 모델을 표현하는 서로 다른 방식일 뿐이므로 두 가지는 서로 변환될 수 있습니다. 직접 손으로 계산하여 헥스 코드를 RGB 값으로 변환할 일은 드물지만, 빠르고 쉽게 할 수 있는 몇 가지 계산 방법이 있습니다. 각각의 세 가지 값을 다음과 같이 계산합니다.

• 첫 번째 숫자(또는 글자)에 16을 곱합니다.
• 두 번째 숫자(또는 글자)를 더합니다.

#E234A2의 경우 첫 번째 값은 E2입니다. 이는 숫자 226(14 * 16 + 2)을 나타냅니다. 이 숫자는 빨간색의 RGB 값입니다. 그리고 #E234A2의 RGB 값은 다음과 같습니다.

• 빨강: 226
• 초록: 49
• 파랑: 152

(헥스 코드 또는 RGB 값을 HSL 값으로 변환할 수도 있지만 그럼 계산이 조금 더 복잡해집니다!)

디지털 디자인의 색상 프로파일: sRGB 및 P3

다양한 기기, 모니터, 브라우저 및 애플리케이션은 여러 기술을 사용하여 색상을 렌더링하므로 기기 전반에서 시각적인 차이가 발생할 수 있습니다. 디지털 플랫폼용으로 디자인할 때는 색상 프로파일을 고려하는 것이 중요합니다. 일관된 표준을 설정하여 특정 화면에 따라 색상을 정의하고 렌더링하기 때문입니다.

디지털 디자인의 색상 프로파일인 sRGB와 P3는 여러 디바이스에서 일관된 색상 렌더링을 보장합니다. sRGB는 수십 년 동안 웹 표준으로 사용되어 왔습니다. 콘텐츠 제작자와 웹 디자이너는 sRGB 표준을 사용하여 이미지, 동영상, 그래픽이 대부분의 전자제품에서 일관적으로 보이도록 합니다. 흔히 P3로 약칭되는 Display P3는 생동감 넘치는 색상 스펙트럼을 렌더링할 수 있으며 sRGB보다 49% 더 뚜렷하게 차이나는 색상을 표현할 수 있습니다. 그러나 스마트폰이나 노트북과 같이 sRGB용으로 설계된 기기에서 P3를 사용하면 확장된 색상 범위를 렌더링하기 위해 기기에서 더 많은 작업을 수행해야 하므로 과도한 에너지 소비가 발생할 수 있습니다. iOS 또는 고해상도/망막 화면과 같은 플랫폼용으로 디자인하는 경우 Display P3가 최선의 선택이지만 모든 애플리케이션과 소프트웨어가 DCI-P3의 더 넓은 색상 범위를 처리하도록 완전히 최적화된 것은 아닙니다.

Figma가 P3 색상 프로파일 지원하는 방법 알아보기.

WCAG 및 색상 접근성

1999년, W3C(World Wide Web Consortium)는 모든 사용자의 웹 콘텐츠 접근 가능을 목표로 하는 기술 문서 WCAG(웹 콘텐츠 접근성 가이드라인)의 첫 번째 버전을 발표했습니다. 웹 접근성의 글로벌 표준으로 인정받고 있는 W3C의 권장 사항은 웹 개발 및 디지털 디자인 커뮤니티에서 상당한 영향력을 발휘하고 있습니다. W3C는 기술 발전과 새로운 접근성 요구 사항을 반영하기 위해 지속적으로 업데이트를 발표하고 있습니다.

현재 문서인 WCAG 2.1은 포용성이 더 뛰어난 웹 경험을 제공하기 위해 인지 장애와 모바일 기기 사용 장애 등의 장애 범주를 보다 광범위하게 다루며 웹 접근성 지침을 확장했습니다. 이 가이드라인에서 다루는 중요한 측면 중 하나는 시각적 접근성, 특히 색상 디자인에서 대비의 중요성입니다. 적절한 대비는 색맹이나 낮은 시력 등의 시각 장애가 있는 사람에게 필수적으로, 배경색과 대비하여 텍스트와 인터랙티브 요소가 눈에 잘 띄도록 합니다.

WCAG 권장 사항은 시력과 상관없이 모든 사용자가 정보에 액세스할 수 있도록 글자 및 이미지 글자의 최소 대비 비율을 지정했습니다. 일례로 일반적인 글자의 경우 최소 대비 비율은 4.5:1이 권장됩니다. 큰 글자는 최소 3:1의 비율을 유지해야 합니다.

WCAG 3.0은 현재 개발 중이며 훨씬 더 포괄적인 기능을 제공할 예정입니다. 색상 대비에 관한 보다 세밀한 가이드라인 도입 등 여러 가지 개선 사항이 추가될 예정입니다.

WCAG 2.1 더 알아보기