いくつかの詳細:
Framer で小さなプロトタイプを作成しています。これは、ある種の壁紙アプリです。私はvivid.jsを使って画像から自動的に色を選び、インターフェースに少し色合いを加えます。2 つの鮮やかなカラー プロファイルを使用します。「DarkMuted」 - 背景用、「Vibrant」 - アクティブ コントロール/アクセントなど用です。
残念ながら、色の組み合わせは鈍く、彩度が低い場合があり、アクティブな要素が思い通りに目立たないことがあります。だから私の最初の決断は
色をやみくもに編集します。
それらを変換してhsl明示的に設定sし、l値を設定します。
s: .2, l: .2 # DarkMuted
s: .6, l: .8 # Vibrant
これにより、2 つの間に十分なコントラストが作成されますが、欠点もあります。(入力と比較して)色が少し過飽和で歪んで見えることがあります。
このリンクでは、スクリーンショットのペアを見つけて、「vibrant.js」によって返された「元の」色のペアと、s および l の値が調整された色の違いを示すことができます。
いくつかの色範囲の知覚バイアスを正規化するために、色に自動調整を適用することが可能かどうか、別のフォーラムで既に尋ねました。答えは「ほぼ不可能」でした。
主観的に許容できるカラー率は ~ 65% ですが、結果はあまりにも予測不可能です。それは自動解決策なので、あまり頼りにすることはできません。
そこで、別の方法でアプローチすることにしました。
多数の色を生成し、1 つをフィルター処理する
ここでの問題は次のとおりです。
Vivid.js を使用してプロファイルごとに複数の色を生成する方法が見つかりませんでした
また、color-thief.jsライブラリを使用して支配的な色のパレットを生成し、「鮮やかな」色と呼ばれるものをフィルター処理してみました。
# Threshold values I used
thr = {minL: .4, maxL: .8, minS: .6, maxS: .8}
しかし、ここで別の問題が発生します。すべての画像が私のしきい値を下回る色のセットを持っているわけではありません。一部の画像にはパステル ガンマまたは白黒があり、何も返されません。
そう、
プロファイルごとに 1 色というvivid.js の制限を克服して、多数の「鮮やかな」色を用意し、要件に合った色を選択することはできますか?
または、おそらく、それを行うための別の/より良い解決策がありますか?