컬러 팔레트 프레임워크 구축
브랜드의 컬러 팔레트를 작성하고, 컬러 프레임 워크를 정의하는 방법
(출처 : [Building a Color Palette Framework]의 기사를 번역 및 가공한 콘텐츠입니다.)
색상은 브랜드나 제품의 디자인 시스템에서 가장 중요한 요소 중 하나입니다.
우리의 두뇌는 지나친 정보를 거부하도록 프로그램되어 있으므로, 유저들의 뇌를 고려하여 시각적으로 흥미를 이끌 수 있고 정리가 잘 된 색상 팔레트를 만드는 것이 중요합니다.
저는 무언가를 디자인 하기 시작할 때 규칙이 정리된 시스템을 만드는 것이 중요하다고 생각합니다.
색상은 브랜드의 중요한 디자인 시스템 중 한 요소이지만, 많은 디자이너들이 색상의 쓰임새에 대해 규칙을 잘 정의하지 못합니다.
이 기사에서는 컬러 베리에이션을 위한 규칙들을 정의하고, 향후 모든 브랜드 팔레트에 적용할 수 있는 몇 가지 테크닉에 대해 설명합니다. 이 테크닉 중 하나를 선택하거나 섞어서 사용한다면 자신만의 컬러 팔레트를 만들 수 있습니다.
시작해봅시다
색상 변형을 만들 수 있는 몇 가지 색상 특성 목록은 다음과 같습니다.
Hue: 색상 (파란색, 녹색, 빨간색 등)입니다.
Chroma: 색상의 순도 (높은 chroma는 검은색, 흰색 또는 회색이 추가되지 않음)입니다.
Saturation: 주어진 색상(Hue)이 얼마나 많이 존재하는지를 나타냅니다 (낮은 Saturation은 적은 색상(Hue)을 가지고 하얀색에 가까움).
Brightness/Value: 밝거나 어두운 색상(어두운 색은 낮은 밝기/ 값을 가짐)을 나타냅니다.
Opacity: 색상이 투명하거나 불투명 한 정도(불투명도가 낮을수록 높은 투명도를 가짐)를 나타냅니다.
Tones: 색상에 회색을 추가하여 원래 색상보다 더 어둡습니다.
Shades : 색상에 검은색을 추가하여 원래 색상보다 어둡게 만듭니다.
Tints: 색상에 흰색을 추가하여 원래 색보다 밝습니다.
색상 특성 요약, 이러한 속성을 조합하여 색상 변형을 생성합니다. 
색상 특성의 이해를 위한 10*10 규모의 프레임 워크 그리드프레임 워크 그리드
위의 그래프는 특정 색상(Hue)의 Brightness, Opacity, Tints, Tones, Shades와 Chroma 간의 관계를 보여줍니다.
이 그래프는 10단계의 척도로 작성되었습니다. 즉, 색상의 불투명도가 X 축에서 10%씩, Y 축에서 밝기가 10%씩 차이가 납니다.
위 그래프의 단순화된 버전인 5*5 규모의 프레임 워크를 사용하여 기본 프레임 워크 그리드를 작성해봅시다.
우리는 인기 있는 HSB Color 시스템을 사용하여, 이 격자 프레임 워크 그리드를 통해 여러 색상을 생성할 수 있습니다.
아래 이미지를 참고하면서 천천히 따라 하세요.
1단계. 기본이 될 Hue를 선택하세요. 이 색조로 50 x 50 픽셀 크기의 사각형을 만듭니다. 예를 들어, 저는 푸른색(H 212, S 67, B 89)을 선택했습니다.
2 단계. 10 x 10 픽셀의 흰색 사각형 타일 (H 0, S 0, B 100)을 만듭니다.
3 단계. 10 x 10 픽셀의 흰색 사각형 타일을 복제하여 1단계의 전체 사각형을 덮습니다.
4 단계. 흰색 타일의 각 열의 Opacity를 왼쪽에서 오른쪽으로 25%씩 줄입니다.
5 단계. 흰색 타일의 각 행의 Brightness를 위에서 아래로 25%씩 줄입니다.
이제 기본 프레임 워크 그리드가 생겼습니다.
이 프레임 워크 표를 사용하여 새로운 색상을 생성하는 몇 가지 방법을 같이 실험해 봅시다.
색상 변화를 보다 잘 시각화하기 위해 예제로 아래 이미지의 3 가지 기본 색상을 사용했지만 자신 만의 색이 있다면 그 색으로도 만들 수 있습니다.
1. Tint-Tone-Shade 방법
이 방법은 단순하기 때문에 가장 일반적으로 사용됩니다.
위에서 만든 기본 프레임 워크 그리드 또한 이 방법을 사용하여 만들어졌습니다.
이 프레임워크를 구성하는 흰색 타일의 Opacity 및 Brightness는 각각 100 % 에서 0 % (왼쪽에서 오른쪽) 및 0 % 에서 100 % (아래에서 위로)로 분포되어 있습니다.
오른쪽의 컬러들은 위에서 언급한 3 가지 기본 색조를 사용하고 왼쪽의 가운데 열(아래 회색 화살표로 표시된 열)의 Opacity 및 Brightness로 만들어졌습니다.
2. Overlay 혼합 방법
이 방법에서는 동일한 기본 프레임 워크를 사용하고 흰색 타일의 혼합 모드를 Overlay로 변경합니다.
밝은 색상은 더욱 밝게 하고 어두운 색상은 더욱 어둡게 처리하는 Overlay 모드가 그리드 전체에서 아름다운 색조 차이를 만듭니다.
3. Soft Light 혼합 방법
2번의 Overlay블렌딩 방법과 마찬가지로 흰색 타일의 혼합 모드를 Soft-Light로 변경합니다.
회색은 투명하게, 밝은 색은 더 밝게, 어두운 색은 더 어둡게 처리하는 Soft-Light모드를 통해 그리드 전체에 아름다운 채도가 생성됩니다.
그런 다음 모든 흰색 타일을 선택하고 두 번 복제합니다. 이렇게 하면 채도가 더 강 해지고 색상 선명도가 향상됩니다.
4. 시원한 계통의 컬러 Overlay 혼합 방법
이 방법은 2번의 Overlay 블렌딩 방법에서 사용한 프레임 워크 그리드를 사용합니다.
그다음 아무 시원해 보이는 색상(예를 들면 파란색)을 선택합니다.
이 색상의 사각형을 만들어 전체 격자에 배치한 뒤, 혼합 모드를 Overlay로 변경하면 색상이 생생해 보이는 효과가 있습니다.
5. 따뜻한 계통의 컬러 Overlay 혼합 방법
이 방법은 4번의 시원한 계통의 컬러 Overlay 혼합 방법과 매우 유사하지만 여기서는 대신 따뜻한 색(예를 들면 주황색)을 선택합니다.
이 색상의 사각형을 만들어 전체 격자에 배치한 뒤, 혼합 모드를 Overlay로 변경하면 색상이 드라마틱하게 따뜻해 보이는 효과가 있습니다.
6. Brightness 조정 방법
이 방법은 위에서 언급한 방법보다 더 쉽습니다.
흰색 타일 대신 기본 색상의 타일을 만들고 (위의 이미지 참조) Brightness값을 각각 높이거나 낮추어 다양한 밝기 및 어두운 색상을 만듭니다.
오른쪽의 3가지 기본 색상(Hue)을 사용하여 간단히 밝기 값을 늘리거나 줄여 밝음 및 어두움을 각각 만들었습니다.
7. Brightness + Saturation 조정 방법
이 방법은 6번의 Brightness 조정 방법과 동일한 격자를 사용합니다.
여기에서는 Saturation을 Brightness값과 함께 조정합니다. Brightness값을 높이거나 낮추거나, Saturation값을 동시에 낮추거나 낮 추거 나하여 밝고 어두운 색상 범위를 만듭니다.
규칙 1 : 밝은 색상 변화 = 낮은 Saturation + 높은 Brightness.
규칙 2 : 어두운 색상 변화 = 높은 Saturation + 낮은 Brightness.
예제
다음은 아름다운 색상 팔레트를 생성하는 1번, 3번, 4번 및 5번 방법을 결합한 하이브리드 예제입니다.
A SIMPLE TRICK FOR CREATING COLOR PALETTES QUICKLY 기사를 보고 영감을 받아서 컬러 시스템을 구축해 본 것입니다.
결론
해당 컬러 시스템을 만들기 위해서는 디자인 툴을 사용해서 디자인 요소의 기본 사항들을 활용하는 것이 전부였습니다.
또한 색상 테마를 생성하는 방법은 해당 방법 외에 더 많은 방법이 있습니다.
제대로 된 컬러 시스템을 구축하기 위해선 기본 프레임 워크 그리드를 만드는 것이 가장 중요했고, 여러 방법을 결합하여 기본 색조에서 완전히 새로운 색상 세트를 만들 수 있습니다. (Justin Mezzell의 Adjustment Layers Method를 사용하여 빈티지 색상 세트를 만들 수도 있습니다.)
읽어주셔서 감사합니다!
