1. 오늘의 아티클
규칙적인 계층의 컬러 팔레트 시스템 제작 (1)
오늘의 아티클▶️
2. 아티클 요약
색상은 UXUI의 핵심 구성요소다. 글자는 물론이고 버튼의 배경, 테두리, 아이콘 색상 등 사이트에 보이는 UI는 대부분 기본 팔레트 시스템 기반으로 작동한다.
🌈 색상 모델
어떤 색상 모델 규칙을 기준으로 하면 균일한 팔레트를 설정할 수 있을까?
- RGB : 빛의 삼원색으로, 빨간색(Red),초록색(Green),파란색(Blue) 세 가지의 가산 혼합으로 표현한다. 색상은 0~255 사이의 값으로 설정할 수 있다.
RGB 모델로 명도를 계산해서 그레이스케일을 구성하는 팔레트는 1번~5번까지의 색상은 쉽지만 6번을 봤을땐 어떤색상인지 바로 떠올릴 수 없다.1번 R : 0 / G : 0 / B : 0 = 검정색
2번 R : 255 / G : 0 / B : 0 = 빨간색
3번 R : 0 / G : 255 / B : 0 = 초록색
4번 R : 0 / G : 0 / B : 255 = 파란색
5번 R : 255 / G : 255 / B : 255 = 흰색
6번 R : 26 / G : 186 / B : 230
다양하게 가산된 수치만 보고 색조, 채도, 명도를 파악하기 어려움이 있다.
-
Hex code
RGB를 16진수 형태로 변환한 값이다. #000000과 같은 식으로 표현 할 수 있다.0~9 : 10진법과 동일
10~15 : A~F
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F로 표현
R(26) = 26을 16으로 나눔 -> 몫:1, 나머지:10 = 1A
G(186) = 186을 16으로 나눔 -> 몫 : 11, 나머지 : 10 = BA
B(230) = 230을 16으로 나눔 -> 몫 : 14, 나머지 : 6 = E6
RGB(26,186,230) = #1ABAE6 -
HSB
Hue(색조) : 색상의 종류로 0~360도 값으로 표현된다.
Saturation(채도) : 색의 강도, 채도가 낮으면 회색이 되고, 채도가 높으면 순수한 색상으로 표현된다.
Brightness(명도) : 색상의 밝기, 명도가 높으면 색이 밝아지고, 명도가 낮으면 어두워진다. -
HSL
HSB에서 Brightness 대신 Lightness로 표현하는 모델이다.
Lightness(밝기) : HSB의 Brightness와는 달리 빛의 밝기라고 할 수 있다. 0은 검정, 50%는 순수한 채도, 100은 흰색이 된다.
Brightness는 아무리 높여도 명도가 밝아지지 않는다,조절해서 명도가 높은 색상을 만들 수 없다. Lightness는 최대로 줄이면 어두워지고, 높이면 흰색이 된다.
HSL는 하나의 기준으로 관리를 할 수 있다. 뿐만 아니라 이 색상이 어떤 색상인지 바로 떠올릴 수 없어도 Lightness를 비교하여 밝고 어두움을 직관적으로 이해 가능하다.
🌈 색상 분류 및 네이밍
색상은 크게 Brand, Basic, Static 3가지 그룹으로 분류된다.
- Brand : 브랜드의 정체성과 가치를 전달하는 색. Primary, Secondary, tertiary 색상 포함
- Basic : red,blue,green,yellow등과 같은 기본적인 비주얼 색상. 성공, 경고, 주의와 같은 일반적인 의미와 감정을 전달하여 의사소통 체계를 구축 가능
- Static : 테마 변경을 고려하여 어떤 테마에서든 변경되지 않은 색으로 사용하기 위해서 추가
✅ 단계
시각적 위계를 표현하기 위해 팔레트 형식의 구성을 한다. 일반적으로 색상뒤에 숫자를 붙여 색상간의 차이를 표현. Lightness를 10단위로 시각적 계층을 나눠서 구성한다.
✅ 최종 색상 네이밍
그룹과, 색상 이름 단계에 따라 최종 네이밍을 정한다.
f.color.{Group}.{colorName}.{hierarchy}
f.color.{그룹}.{색상 명}.{계층}
🌈 색상 토큰 추가하기
피그마의 토큰 스튜디오 플러그인으로 관리를 한다. 토큰 스튜디오를 사용하면 디자이너, 개발자가 같은 스타일 정보를 유지하며 프로덕트를 관리 핤 있어서 용이하다.
색의 혼합
- 가산혼합 : RGB 색광혼합, 플러스혼합, 가법혼합
컬러 TV, 조명등에 활용
혼합할수록 밝아진다
Red + Green + Blue = White- 감산혼합 : CMY 색료혼합
혼합할수록 어두워짐
Cyan + Magenta + Yellow = Black- 중간혼합 : 두 가지 색 이상을 병치시킬 때 혼합된 것처럼 보이는 것
혼합된 후 평균 명도로 나타냄
- 회전혼합 : 하나의 면에 있는 두 개 이상의 색이 빠르게 회전되면서 하나의 색으로 인식되는 현생(색팽이 혼합)
- 병치혼합 : 선이나 점이 조밀하게 교차.나열되었을 때 마치 인접한 색과 혼합된 것처럼 보이는 현상
3. 인사이트
피그마 활용강의를 듣고 색상에 대해 좀 더 자세히 알고 싶어져서 이번 아티클을 요약하게 되었다. 어려웠던 개념들이 요약을 하고 보니 이해가 쉬워졌다.
