Googleのマテリアルデザインのパレットに似たパレットをどのように生成しますか？

Googleのマテリアルデザイン仕様には、カラーパレットのセットがあります。

「500」と指定されている基本の原色から始めて、約10色の範囲を作成するために、さまざまな段階的な明暗の段階があります。最も明るいものは「50」と指定され、白に近く、最も暗い「900」は黒に近いですが、どちらも基本色の一部を保持しています。

増分の計算方法を決定することはできません。このオンライン見本ジェネレーターを試しましたが、範囲内でダイヤルできないようです。

基本の「500」色から明度を上下に調整するだけの問題だと思います。「0」の値は真っ白、「1000」の値は真黒になると推測していますが、Googleの範囲はパレットは、単純な輝度範囲よりも彩度が高いようです。

基本色を取得し、Googleのパレットに合わせてパレットを生成するために使用できるアルゴリズムまたはプロセスを知っている人はいますか？

マテリアルカラーパレットを生成するプロジェクト用に、この小さなCSS3 / AngularJSツールを作成しました。500 hexの色を入力し、ColorZillaなどの外部ツールを使用してそこから色の値を取得できます。また、明るいものはGoogleが使用したものとまったく同じですが、暗いものは少しずれています。

mcg.mbitson.com

Googleパレットは単色です。同じRGB比を維持して、明度と彩度を上下にシフトします。これを行うには、RGB値をHSL表現（色相、彩度、明度）に変換し、明度と彩度を変更してから、必要に応じて元に戻す必要があります。計算中にRGB空間に保持することは可能ですが、数学はわかりにくいです（私が理解したり説明したりするには）。HSLは、従来の色混合用に作成されました（考えやすくなっています）。

CSSパレットを作成することが目的の場合は、を使用してHSLの色を維持できますbackground-color: hsl(0,100%, 50%);。

カラーピッカーを使用して、Photoshopでこれを手動で行うことができます。HSBは、Hue Saturation Brightness（HSLと同義、同じこと）用です。好みの色相を選択し、彩度と明るさを一定の値で変更します。S = 54およびB = 77の下の画像では、54 + 54 * 0.05とを使用して5％シフトアップし77 + 77 * 0.05ます。またはシフトダウンするS - S * 0.05

16進数とRGBを明確にするための補足事項。6桁の16進数＃FFEB3Bは、実際にはRGBを表す3つの個別の数字です。

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3BHEX値を10進数に変換すると、が得られますred:255 green:235 blue:59 OR rgb(255,235,59)。

ウィキペディアで RGBを本当に必要とする場合、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のカラーホイールを使用してみましたか？使用しているSlayerOfficeツールよりも少し柔軟性があると思います。

https://color.adobe.com/

正確な場合、「シェード」を選択し、そこからだましてみてください。スウォッチのようなマテリアルデザインは生成されませんが、開始点です。

Googleがサイトでリンクを提供するパレットをダウンロードできますか？それはあなたにすべての色を与えるので？

Google Color Swatches Zip

特定の色から色のグラデーション/パレットを生成するには、基本的に次のアルゴリズムを使用できます。

1. パレットに必要な最小と最大の色合いを決定します
2. これらの色の間の「色空間」を等しいパーティションに分割します（以下を参照）
3. これらの手順で出力色

色空間を分割するには、まずHEXの色をRGBに変換します。各チャネルの値を選択します。あなたが持っていると言うカラー1（R1、G1、B1）とカラー2（R2、G2、B2）を。そして、あなたは間の3色たいカラー1とカラー2を、あなたは、次のような何かを行うことができます

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。必要に応じてステップを調整できます。

最後に、カラーパレットの生成に関するこの質問に関連しているという理由だけで、作成したpythonライブラリの恥知らずなプロモーションを行います。SecretColorsと呼ばれます。独自のカラーパレット、グラデーションを生成するか、IBM、Material Design、ColorBrewer、Clarityなどの標準のカラーパレットを使用できます。