[보기 좋은 프로덕트의 비밀] 컬러

컬러

• 명도 : 밝음과 어두움
• 채도 : 선명함과 탁함
• 색상 : 고유한 색 종류

 

 

RGB

: 빛의 3원색인 Red, Green, Blue

RGB는 혼합하면 할수록 더욱 밝아지는(명도가 높아지는) 특징을 가지고 있다.

 

 

HEX

: 00~FF까지의 16진수

#000000

 

 

 

HSB(Hue-Saturation-Brightness)

 

: 대부분의 그래픽 툴에서는 HSB를 기반으로 해서 표현이 되어 있다.

H - 색상

S - 채도

B - 명도

 

 

 

UI 디자인 특징

1. 보통 브랜드의 컬러를 설정 후(primary color) UI디자인이 시작된다.

 

• 네이버 - 초록색

 

 

• 지그재그 - 핑크

 

 

 

2. 그다음 위계 컬러 설정

secondary 컬러, white>gray>black 순

 

• 에어비앤비 - 예약하기가 가장 중요 (primary color)

 

 

 

3. 위계에 맞게 정했다면 이제 이 컬러들을 어느 정도의 비율로 써야하는지 정해야 한다.

 

• 색의 비율

6:3:1

 

60%는 배경 / 30% 보조배경 / 10% 자극이 센 정말 필요할 때만 쓰는 컬러

 

 

 

4. 사용자에게 정보를 전달하는 색(의미가 있는 색)이 필요함

ex) 빨강 - 위험 / 노란 - 경고 / 초록-안전 / 파랑-정보

 

 

• 로그인 화면 -> 아이디 형식이 맞지 않을 때 빨간색으로 표시

 

 

색 조합

ex) 그래프 요소 구분

• 유사색 : 비슷한 중요 요소를 구분할 때
• 보색 : 비슷하게 중요하지만 기능이 다른 요소 구분

 

 

색 대비

보통은 노란색으로 가까워질수록 밝아지고 파란색으로 갈수록 어두워진다.