Google 머티리얼 디자인의 팔레트와 유사한 팔레트를 어떻게 생성합니까?


62

Google의 머티리얼 디자인 사양에는 컬러 팔레트 세트가 있습니다 .

여기에 이미지 설명을 입력하십시오

기본 기본 색상 인 "500"으로 시작하여 약 10 가지 색상의 범위를 만들기 위해 밝고 어두워지는 점차 증가하는 음영 단계가 있습니다. 가장 밝게는 "50"으로 지정되고 흰색에 가깝고 가장 어둡게 "900"은 검은 색에 가깝지만 둘 다 기본 색상을 유지합니다.

증분이 어떻게 계산되는지 알 수 없습니다. 이 온라인 견본 생성기를 시도했지만 범위 내에서 전화를 걸 수없는 것 같습니다.

기본 "500"색상에서 위 / 아래로 광도를 조정하는 문제 일 뿐이라고 생각합니다. "0"값은 순수한 흰색이고 "1000"은 순수한 검은 색일 것입니다.하지만 Google의 범위는 팔레트는 단순한 광도 범위보다 채도가 더 높은 것 같습니다.

누구든지 기본 색상을 취하고 Google 팔레트와 일치하는 팔레트를 생성하는 데 사용할 수있는 알고리즘이나 프로세스를 알고 있습니까?


그것들은 숫자가 올라가거나 내려감에 따라 채도와 값이 각각 반대로 증가하거나 감소하는 기본 색상 인 것처럼 보입니다
Supuhstar

1
실제로, 화면에서 한 걸음 물러
서면

팔레트를 생성하는 솔루션을 찾았습니까?
MrBrightside

@MrBrightside Howdy! 선택한 답변을 사용하여 팔레트를 생성 할 수 있습니다. mcg.mbitson.com- 정확한 팔레트를 가져 오거나 사용자 정의 색상으로 밀접한 표현을 생성 할 수 있지만 색상은 재질 디자인 팔레트와 정확히 동일하지 않습니다. : 그들은 여기에 정확한 색상을하지 않은 이유에 대한 자세한 stackoverflow.com/questions/32942503/...
미켈 Bitson

1
재료는 50-500 범위에서만 단색입니다. 더 어둡고 강조된 색상 은 codepen.io/sebilasse/pen/GQYKJd?editors=1010 참조 …
sebilasse

답변:


41

이 작은 CSS3 / AngularJS 도구를 만들어 프로젝트에서 재료 색상 팔레트를 생성했습니다. 500 16 진수 색상을 입력하고 ColorZilla와 같은 외부 도구를 사용하여 색상 값을 얻을 수 있습니다. 또한 더 밝은 것은 Google이 사용한 것과 동일하지만 더 어두운 것은 조금 벗어납니다.

mcg.mbitson.com


팔레트 생성기는 실제로 잘 작동하며 내가 볼 수있는 한 Google 머티리얼 디자인 표준에 가깝습니다. 한 가지 : 페이지의 텍스트와 대비를 더 높이고 싶을 수도 있습니다. 어두운 회색 배경의 검은 색 텍스트는 읽기가 매우 어렵습니다.
Questioner

2
얘들 아! 업데이트 된 버전의 도구를 사용하는 개발자입니다. 최근에 색상 생성을 처리하는 방식이 바뀌 었습니다. 이 도구에 대한 직접적인 피드백이있는 사람은 색상 생성 기술이나 원하는 추가 기능이 있으면 알려주세요. 나는 여가 시간에 여전히 향상을 개발 중이며 여전히 도움이 되더라도 색상 생성이 해제 될 수 있습니다. 계속 조사하겠습니다.
Mikel Bitson

1
@MikelBitson 팔레트 생성기는 실제로 꺼져 있습니다 (재료 디자인 표준에서 500 색상을 입력하고 비교해보십시오). 그러나 그럼에도 불구하고 다른 많은 기본 색상과 환상적으로 작동합니다. 앞으로도 힘써주세요!
Chris Bornhoft

1
@MikelBitson 환상적인 설명 감사합니다. 원래 의견을 게시하기 전에도 이와 같은 내용이라고 생각했습니다. Google의 "공식 색상 선택기"가 얼마나 많은지 궁금합니다. 제목 :)
Chris Bornhoft

1
새 버전을 찾고 당신의 사람들을 위해 업데이트 링크 : mcg.mbitson.com/#
미켈 Bitson

18

Google 팔레트는 단색 입니다. 동일한 RGB 비율로 밝기와 채도를 위나 아래로 이동시킵니다. 이렇게하려면 RGB 값을 HSL 표현 (색조, 채도, 명도)으로 변환하고 명도 및 채도를 변경 한 다음 필요한 경우 다시 변환해야합니다. 계산하는 동안 RGB 공간에 유지할 수는 있지만 수학이 너무 혼란 스럽습니다 (나를 이해하거나 설명하기가 어렵습니다). HSL은 전통적인 색상 혼합을 위해 만들어졌습니다 (더 쉽게 생각할 수 있음).

CSS 팔레트를 만드는 것이 목적이라면을 사용하여 색상을 HSL로 유지할 수 있습니다 background-color: hsl(0,100%, 50%);.

색상 선택기를 사용하여 Photoshop에서 수동으로이 작업을 수행 할 수 있습니다. HSB는 색조 채도 밝기 (HSL과 동의어)와 동일합니다. 원하는 색조를 선택하고 채도 및 밝기를 일관된 값으로 변경하십시오. S = 54, B = 77 아래 그림에서, 5 %의 사용에 의해 이동 54 + 54 * 0.05하고 77 + 77 * 0.05. 또는 아래로 이동S - S * 0.05

포토샵 컬러 피커

16 진수와 RGB를 명확히하기위한 참고 사항. 6 자리 HEX # FFEB3B는 실제로 RGB를 나타내는 3 개의 개별 숫자입니다.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3B10 진수로 16 진수 값을 변환하는 당신을 제공합니다 red:255 green:235 blue:59 OR rgb(255,235,59).

Wikipedia 에서 RGB를 HSL로 변환하는 알고리즘이 있지만 가장 간단한 방법은 색상 라이브러리를 사용하는 것입니다. 이 예제에서는 please.js 를 사용하여 단색 팔레트 를 만들고 보완 팔레트 또는 유쾌한 팔레트를 작성하기위한 다른 알고리즘도 있습니다. kuler.adobe와 유사하며 바위도 있습니다.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

4
Google의 자체 팔레트에는 HSV / HSB에서 꾸준한 강모 기울기가 표시되지 않습니다. 내가 말하고있는 것을 볼 수 있도록 그림을 만들었습니다 . 이를 바탕으로 다른 색상 모델 중 하나를 사용하는 것이 좋습니다. 또한, 그들은 약간의 색상의 어두운 색조에 대해 색조를 약간 조정하여 더러워 지지 않도록합니다.
Tess

여기에 @Tess의 응답을 몇 초간 추가하고 싶습니다. MCG 생성기의 향상된 버전을 개발했으며 그 과정에서 몇 가지 사항을 발견했습니다. 각 Google 팔레트는 다른 색상 진행을 따르며 단색이 아닙니다. 각 팔레트의 공식이 완전히 다른 것처럼 색상을 정확하게 모방하는 공식이나 방법은 없습니다. 자세한 내용 및이의 예는 여기에서 찾을 수 있습니다 : github.com/mbitson/mcg/issues/19을
미켈 Bitson을

@MikelBitson하지만 '내가 사용할 수있는 알고리즘 또는 프로세스'나는 단색 또는 그것의 버전에 대한 투표를 할 질문에 대답 en.wikipedia.org/wiki/Monochromatic_color 그러나 당신과 테스, 그들은에서 엄격 모노 벗어나지 권리입니다 색조.
Lex

1
@Lex-동의합니다. 단색을 사용하여 팔레트를 추정합니다. 귀하의 답변에 "Google 팔레트는 단색입니다."라고 표시되어 있기 때문에 Tess의 답변은 두 번째입니다. 최근에이 색상으로 고생하는 데 많은 시간을 보냈습니다. :)
Mikel Bitson

1
HSB / HSV는 HSL과 다릅니다. en.wikipedia.org/wiki/HSL_and_HSV
Kevin Thibedeau

1

Adobe의 Color Wheel을 사용해 보셨습니까? 사용중인 SlayerOffice 도구보다 약간 유연하다고 생각합니다.

https://color.adobe.com/

정확한 경우를 위해 "음영"을 선택하고 거기에서 장난을 시도하십시오. 견본과 같은 머티리얼 디자인을 생성하지는 않지만 시작입니다.


0

Google에서 사이트에 대한 링크를 제공하는 팔레트를 다운로드 할 수 있습니까? 그것은 당신에게 모든 색상을 제공하기 때문에?

Google 색상 견본 Zip


12
OP가 자신의 색으로 시작하고 비슷한 견본을 만드는 방법을 알고 싶었다고 생각합니다
Supuhstar

0

주어진 색상에서 색상 그라디언트 / 팔레트를 생성하려면 기본적으로 다음 알고리즘을 사용할 수 있습니다.

  1. 팔레트에서 원하는 최소 및 최대 음영 결정
  2. 동일한 색상으로이 색상들 사이에 '색 공간'을 나눕니다 (아래 참조).
  3. 이 단계의 출력 색상

색상 공간을 나누려면 먼저 HEX 색상을 RGB로 변환하십시오. 각 채널에서 값을 선택하십시오. color1 (r1, g1, b1) 및 color2 (r2, g2, b2) 가 있다고 가정 합니다. color1color2 사이에 3 가지 색상을 원하면 다음과 같이 할 수 있습니다

all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
    r1 += rdelta
        g1 += gdelta
        b1 += bdelta
all_colors.append((r1, g1, b1)) 

RGB 값을 (0에서 1) 사이로 변환해야합니다.

귀하의 경우에는, 당신은 기본 색상을 취할 수 사이에 색 공간을 분할 white to basecolor하고 basecolor to black. 필요에 따라 단계를 조정할 수 있습니다.

마지막으로, 색상 표 생성에 관한이 질문과 관련이 있기 때문에 내가 만든 파이썬 라이브러리에 대한 뻔뻔한 홍보를 할 것입니다. 그것을 SecretColors 라고 합니다. 고유 한 색상 표, 그라디언트를 생성하거나 IBM, Material Design, ColorBrewer 또는 Clarity와 같은 표준 색상 표를 사용할 수 있습니다.

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