2色間の一連の色の生成

15

開始色と終了色が与えられた場合、それらの間の色の範囲をアルゴリズムで生成することは可能ですか？たとえば、下の画像の始めと終わりに青とグレーの明るい影と暗い影がある場合、中間の影をどのように生成できますか？

私が考えている解決策の1つは、2つの色からグラデーションを作成し、そのグラデーションに沿って等距離のポイントで色をサンプリングすることです。それが最良のアプローチである可能性が高いですか？

color color-theory

— ベン・パッカード
ソース

2

これを見てください：graphicdesign.stackexchange.com/questions/75417/…それから、それはまねるでしょうか？

— ラファエル

トピックに関する別の良い記事：vis4.net/blog/posts/avoid-equidistant-hsv-colors

— thorn

これは非常に近いの複製であることにある。このスタックオーバーフローの問題

— ダウードはモニカ回復言う

13

これは色補間と呼ばれます。フードの下でグラデーションが行うことです。さまざまな手段と方法を使用してこれを行うことができ、結果の正確な補間方法は方法によって異なります。

この音楽ビジュアライザーのように、色を動的に変更できるように、JavaScriptを使用するWebプロジェクトで一般的にこれを行います。上記の例から引き出された、RGBを使用した線形補間の非常に簡単な方法を持つJavaScript実装は次のとおりです。

ライブデモ

// Returns a single rgb color interpolation between given rgb color
// based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
};
// My function to interpolate between two colors completely, returning an array
function interpolateColors(color1, color2, steps) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return interpolatedColorArray;
}

これは次のように使用され、補間された色の配列を返します。

var colorArray = interpolateColors("rgb(94, 79, 162)", "rgb(247, 148, 89)", 5);

また、色補間を行うためのPhotoShop（およびおそらく他のプログラム）拡張機能を見つけることができます。ただし、任意の関数を使用して補間を行うことができるため、補間の方法が希望するものと同じであることを確認する必要があります。

— ザック・ソーシエ
ソース

2

ザック...あなたはとてもオタクです...音楽ビジュアライザーはとてもクールです！

— ラファエル

@ラファエル私もあなたが好きかもしれない他のカップルを作りました :)

— ザック

ありがとう。Color Interpolation必要なものでした。私はここにいくつかのスウィフトの実装を発見した- stackoverflow.com/questions/22868182/uico...

— ベン・パッカード

2

上記のリンクが壊れているが、ポストは、将来の読者のためにここで見つけることができます：UIColorトランジション進行値に基づいて

— ザックSaucier

23

この答えを見てください。特定の色を少し暗くしたり明るくしたりするにはどうすればよいですか？

各RGBコンポーネントの分離された値を単純に取得し、値を分割します。

しかし、問題が1つあります。色を変化させる方法は1つだけではありません。

最初のアプローチは最短ルート（1）を提供しますが、おそらくそのルートは必要なものではありません。

これは、カラーモデルまたはロジックの影響も受けます。たとえば、Lab *カラーモデルでは、赤と緑は補色なので、そのモデルの短いルートはニュートラルグレーを通過します（3）。

色の濃淡だけが必要な場合は、他の答えが適切です。

— ラファエル
ソース

5

I補間の異なる方法を示すグラフのように

— ザックSaucier

これは、パス戦略を体系化する方法が必要であることを意味すると思います。

— バオティエンNgoの

10

IllustratorでRGBまたはCMYKのいずれかのブレンドを使用します。

それぞれ開始色と終了色で2つの形状を作成します（この例では灰色と黒が1つですが、必要なものを選択してください）
に行き、必要なObject → Blend → Blend Options数Specified stepsを入力します（以下の私の例では20）
2つのオブジェクトを選択してを選択しますObject → Blend → Make。これによりブレンドが生成され、を介して個々のオブジェクトに変換できますObject → Expand。次に、各中間オブジェクトに独自のカラーコードが表示されます。

— ルシアン
ソース

5

これは、他の回答への追加です。

sRGBで色を補間する場合、RGB値は光の強度では線形ではなく、人間が知覚する光の強度では線形であると考慮する必要があります。これにより、値の保存が簡単になりますが、さまざまな色操作では線形色空間に移動する必要があります。

光の強さの人間の認識はべき乗則に従うため、

linear = sRGB^2.2
sRGB = linear^(1/2.2)

2つの間の変換に使用できます。これは、sRGBの値である2.2のガンマ値を使用します。詳細については、このウィキペディアの記事を参照してください。

ここでこの問題の詳細な分析と間違った実装の例を見つけることができます。その1つは、線形補間とsRGB補間を使用したカラーグラデーションです。

— ヘンジェ
ソース

これは、sRGB値を補間する方法の一つですが、どのような人が、必要があるやっていることは、彼らが望む効果に依存

— ザックSaucier

その通りですが、線形空間での補間は、実際の生活の中で光で起こることです。そのため、そうするのが最も自然です。

— ヘンジェ

1

@ZachSaucier人々が特定の意図からsRGBを補間またはブレンドした回数は、人々が無知または怠iness（RGBでそれをしていると考えているか、または違いは重要ではないと考えます（正しいかどうか）。

— ホッブズ

1

Photoshopのグラデーション（またはAiの同等の「ブレンド」）は、開始色と終了色の間の線形の色遷移を取得する方法として既に提示されています。スクリプトコードをプログラミングせずに、非線形（曲線遷移パス）を得るにはどうすればよいですか？

1つの解決策は、レイヤーを調整するか、モードをブレンドするか、その両方を行うことにより、グラデーション遷移パスを変更することです。これにより、修正レイヤーに連続したレイヤーマスクがあり、開始時と終了時に愛情=ゼロになる場合、開始色から終了色への連続的な変換が実際に生成されます。

これは非常に複雑なひねりです。レイヤー「Target alone」にはグラデーションがあり、レイヤー「Modifier」はブレンドモード「Color」により連続的なカラーシフトを生成します。

コントラストを追加する調整レイヤー「曲線」によって、より多くのねじれが生成されます。モディファイヤと同じレイヤーマスクがありますが、必須ではありません。マスクが連続的で、開始時と終了時が黒であれば、マスクは問題ありません。

突然のジャンプを引き起こす不連続モードと曲線がいくつか存在します。それらの1つは「Hue」です。効果を損なう可能性のあるもう1つの可能性は、「変化なし」、すべてゼロまたはすべて255にクリッピングすることによって引き起こされる目に見える一定のカラー領域です。画面上にまだ24ビット/ピクセルしかないので、まったくないかもしれません。

— user287001
ソース