#5 - 디자인 정의 - 컬러

Material Design Color Image 

 

디자인 정의에서 설명하지 못한 컬러에 대한 설명을 진행한다.

 

---

 

컬러 시스템의 이해

웹에서는 RGB를 주로 사용하지만, 상황에 따라 CMYK나 HSB, HBL 등을 사용한다. 자세한 설명은 아래와 같다.

 

항목	내용
RGB	1. Red Green Blue 빛의 혼합 2. 빛의 혼합이기 때문에 많은 색을 혼합할 경우 밝아짐 3. RGB 색상을 웹에서 단순하게 표현하기 위해 만들어진 코드가 HEX code 4. 헥사 코드는 #과 6개의 숫자로 구성되어 있으며, 앞에서 부터 2자리 씩 레드 그린 블루 색상값을 표현함 5. 이때 생상 값은 "0123456789abcdef"순으로 표현하며, 0에 가까울 수록 빛이 어둡고/ F에 가까울 수록 빛이 밝음
CMYK	1. 출판 인쇄에서 많이 사용됨 2. Cyan Magenta Yellow Black을 나타냄 3. 특수한 값이 필요한 때는 팬톤칩과 같은 별색을 이용함 별색의 대표주자 팬톤컬러 사이트 www.pantone.com/
HSB & HSL	1. Hue / Saturation / Lumonance를 뜻함 2. 색상/채도/밝기 또는 색상/채도/명도로 색을 만들어냄

 

 

컬러의 이해

컬러는 각각 상징하는 의미가 있다. 이에 따라 현재 여러 브랜드들도 의도에 맞는 컬러를 사용중이다. 아래 사이트를 참고하여 어떤 컬러가 키워드에 맞는지 생각해보고, 적합한 컬러를 선택하자.

 

#컬러별 상징

www.canva.com/learn/color-meanings-symbolism/

 

 

#브랜드별 사용 컬러

brandcolors.net/

BrandColors - official brand color hex codes

 

 

 

컬러 선택이 어렵다면

아래 링크에서 도움을 받아 컬러를 선택해 보자.

 

#디자인 사이트 추천 - 컬러 편

rosakim90.tistory.com/entry/3-%EC%BB%AC%EB%9F%AC-%ED%8E%B8

#3 - 컬러 편

 

 

 

컬러 설정

Primary 컬러와 Secondary 컬러

메인 컬러인 Primary 컬러와 서브 컬러인 Secondary 컬러를 정한다.

 

Primary 컬러와 Secondary 컬러는 꼭 하나만 사용할 필요는 없으며, 사용되는 면적이나 BG 컬러에 따라 다양하게 사용할 수도 있다. 또한 좌측과 같이 Primary 컬러로만 앱을 디자인할 수도 있고, 우측과 같이 Secondary 컬러와 함께 디자인할 수도 있다. 

 

그 외 컬러 설정

1. background : 완전 밑바닥 컬러

2.surface : background 위, 표면에 올라오는 컬러

3. error : 에러 케이스 컬러 + success / info / warning 컬러를 함께 지정해주면 좋다