Google의 '500'색상 견본은 정확히 무엇입니까?


36

Google의 머티리얼 디자인을 읽고, Style을 읽고있을 때, 기본 500 색 (50에서 거의 흰색, 900까지의 다른 숫자)을 계속 언급하지만 이거는?

내 자신의 "재료 영감을 얻은"색상 견본을 만드는 데 손을 대고 싶지만 색상의 이름이 혼동되므로 어디서부터 시작해야할지 잘 모르겠습니다. 나는 답을 찾기 위해 인터넷 검색을 시도했지만 (어쨌든 약간 역설적 인 느낌), 지금까지 많은 결정적인 답변을 찾지 못했습니다. 내가 추측해야한다면, 그것은 색상의 파장과 관련이있는 것 같습니다?

A100 ~ A700 색상에 대한 언급도 있습니다 ...


8
그래픽 디자이너가 알아낼 수없는 색상 시스템은 Google에서만 가능합니다.
Simon White

답변:


21

나는 그것을 스스로 궁금해했다.

첫째, "500"은 몇 가지 색상이 아니라 사용하는 이상한 번호 체계를 나타내는 것 같습니다. 500은 기본이고 400은 기본보다 밝고 600은 더 어둡습니다. 그것은 폰트 웨이트의 번호가 매겨지는 방법 ( info ) 과 매우 유사 하므로 아마도 그것과 관련이 있습니다.

500 미만의 숫자 중 일부는 흰색 (Photoshop에서는 "스크린"혼합 모드) 또는 검은 색 ( "곱하기")으로 희미 해져서 발견됩니다.

  • 900 : 59 % (닫기)
  • 600 : 10 % (거의 정확한)
  • 500 :베이스
  • 400 : 15 % (정확한)
  • 300 : 30 % (정확한)
  • 200 : 50 % (정확한)
  • 100 : 70 % (닫기)
  • 50 : 88 % (정확한)

여기에 패턴이 보이지 않습니다. 그리고 아마도 없을 수도 있습니다. 아니면 내가 간과하고있는 것이 분명 할 수도 있습니다. 나는 색상 구성에 꽤 나쁘다.


1
흠, 나는 그것이 더 구체적인 것을 의미하기를 바랐습니다. 그러나 Google의 색상 이름 지정 방식 만 생각합니다. 적어도 답변 감사합니다!
Cleverbird

1
이 색상 번호는 사실상 업계 표준입니까?
영재

2
@Youngjae no. 전혀.
DA01

11

주제에 대한 새로운 정보이므로 여기에 남겨 두겠습니다.

https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4

2015 년 5 월 28 일 게시

당신의 색 이론에 약간의 녹슨? 소재 디자인은 색상을 쉽게 만듭니다. 색상 및 재료 디자인에 대한 자세한 내용은 www.google.com/design을 참조하십시오 .

ETA : 기본 색상 (500)은 Google이 디자인의 기본이되는 "주 색상"(또는 색상)으로 선택한 색상입니다. 1 차 500부터 시작하여 밝음에서 어둡기로 확장합니다. 이 색상은 UI의 다른 요소에 적용됩니다.

500은 제품의 주요 테마를 설명합니다 (툴바에 적합). 상태 표시 줄의 경우 최대 700 대, 보조 정보의 경우 최대 300 대까지 축소됩니다. A 색상은 강조되는 강조된 상호 작용을 강조하는 강조 색상입니다. 기본 동작 버튼, 표준 버튼, 스위치 및 슬라이더를 강조 표시하는 데 적합합니다.

흥미로운 점은이 동영상의 정보가 위에서 언급 한 팔레트 페이지 ( http://www.google.com/design/spec/style/color) 에서 Google이 제공하는 정보와 모순되거나 적어도 일관성이없는 것으로 보입니다 . .html # color-color-palette ).

팔레트 페이지에서 "Google은 앱에서 기본 색상으로 500 색을 사용하고 다른 색상을 악센트 색상 으로 사용하는 것이 좋습니다 "비디오에서 "A 색상은 악센트 색상입니다 ..."라고 말합니다.

물론 미묘한 차이가 있지만 Google이 스타일 가이드를 개발하려는 경우 " accent " 라는 단어의 사용과 일치해야합니다 .


5

아마도이 리소스를 이미 찾았을 수도 있지만 Google은 개발자와 디자이너가 새로운 머티리얼 분위기와 동기화하는 데 도움이되는 매우 편리한 안내서를 만들었습니다.

전체 가이드는 http://www.google.com/design/spec/material-design/introduction.html#에서 확인할 수 있습니다 .

특히이 페이지에서는 좋아하는 모든 색상을 다운로드 할 수 있습니다-http: //www.google.com/design/spec/style/color.html#color-color-palette


3
정확히 'Primary 500 colors'라는 용어를 찾았지만 알아 내려고하는 것은이 숫자가 나타내는 것입니다.
Cleverbird

4

귀하의 질문에 대한 답변은 다음과 같습니다.이 비디오를 확인하십시오

500S는 기본 색상입니다 제품에 지배적 인 주제를 설명하는 완벽한 도구 모음을 위해 중대하다.

700 은 상태 표시 줄에 사용됩니다.

300S는 보조 정보에 사용되는

따라서 기본적으로이 숫자는 디자인의 특정 섹션 / 부분에 대해 사전 정의 된 음영과 기본 색상의 색조를 나타냅니다.


0

내 생각에, 명명 규칙은 웹 글꼴 가중치 명명 규칙을 기반으로합니다.

  • 500 : 기본
  • <500 : 더 얇고 가벼움
  • > 500 : 더 두껍게 / 어둡게

기준선과 변형으로 무언가를 명명하는 매우 유용하고 논리적 인 방법입니다.

Inter 글꼴의 GitHub 페이지 스크린 샷

참조 링크 : Inter 글꼴의 GitHub 페이지에 연결

예를 들어, 여기에 이러한 글꼴 가중치 이름을 사용하는 Mozilla의 "Inter"글꼴의 스크린 샷이 있지만 그 경우 정규 / 기본 가중치는 400으로 번호가 매겨져 있습니다. 많은 글꼴이 실제로 "정규"가중치로 400을 사용하지만 이것은 다음과 같습니다. 다른 주제.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.