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

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

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

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

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

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

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

mcg.mbitson.com

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"]

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

https://color.adobe.com/

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

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

Google 색상 견본 Zip

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

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

색상 공간을 나누려면 먼저 HEX 색상을 RGB로 변환하십시오. 각 채널에서 값을 선택하십시오. color1 (r1, g1, b1) 및 color2 (r2, g2, b2) 가 있다고 가정 합니다. color1 과 color2 사이에 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와 같은 표준 색상 표를 사용할 수 있습니다.