Android Material Design Style-Color

1. Color palette 선택

2. UI color application

 - 선택한 Color palette 에서

 2가지(주요, 두번째  주요) Color를 선택한다

주요 Color : 500, 100, 500, 700

두번째  주요 Color(강조를위해)  : 200, Fallback, 100,400 

를 고른다.

3. Use opacity for text, icons, and dividers

   글자나 아이콘, 분류영역의 불투명도

- 밝은배경일 때

  기본칼라(검정 : #000) : 100%

  주요글자 : 87%

  두번째 주요글자 또는 아이콘 : 54%

  비활성 또는 힌트글자 : 38%

  분류영역 : 12%

  주요색상 : 100%

  두번째 주요색상 : 100%

- 어두운배경일 때

  기본칼라(휜색 : #FFF) : 100%

  주요글자 : 100%

  그다음주요글자 또는 아이콘 : 70%

  비활성 또는  힌트글자 : 30%

  분류영력 : 12%

  주요색상 : 100%

  그다음주요색상 : 100%

- 밝은배경에서 어두운글자 색상(검정의 짙은정도)

  글자색상 : 검정 (#000000)

  주요글자 : 87%의 투명도

  두번째 주요글자 :54%

  힌트 또는 비활성글자 또는 아이콘 : 38%

- 힌트 또는 비활성 된 내용

 - 밝은 배경의 검정글씨일 때 26%의 투명도

 - 어두운배경의 흰색글씨일 때 30%의 투명도

- 다른 요소들은 동일

   주요글자 : 100%

   두번째 주요글자 : 70%

   힌트 또는 비활성글자 또는 아이콘 : 30%

4. 툴바, 상태바

 - 툴바 : 주Color 테이블의 500에 해당하는 색상으로 한다.

 - 상태바 : 주Color 테이블의 700dp 해당하는 색상으로 한다.

 Bold는 넓은영역을 강조하려면 Bold를 쓴다.

  

5. 강조를 위한 색상

 주요 액션버튼이나 스위치, 슬라이드 같은 것에 두번째 주요색상을 사용한다.

Do : 두번째 주요칼라를 body text에 사용할 때에는 링크부분에만 적용한다.

Don't : 액션버튼은 배경색과 같은색은 사용하지 않는다.

6. Fallback 강조 색상

 두번째 주요색상이 배경색상에 비해 너무 밝거나 너무 어두우면 그것보다 한단계 낮은 색삭을 사용한다.

해당 색상이 없어서 만들어야 하는경우에는

주요색상에 500일 때 휜색은 100%, 검정색은 54%에 해당하는 색상을 고른다.

-. 밝은 테마

 - 상태바 : Gray 300 : #E0E0E0

 - 어플바 : Gray 100 : #F5F5F5

 - 배경(background) : Gray 50 : #FAFAFA

 - 화면 또는 다이얼로그 : White : #FFFFFF

- 어두운 테마

 - 상태바 : Black100% : #FFFFFF

 - 어플바 : Gray 900 : #212121

 - 배경(background) :  : #303030

 - 화면 또는 다이얼로그 : Gray 800 : #424242