2

#645591青の 3 つのトーン ( 、#6B90CAおよび#7BC8EF) と、ユーザーが選択した 1 つの色が最初の青の値 (ベース) を置き換え、余分な 2 つの色を置き換えるために 2 つのトーンを生成する基本イメージを使用しています。

非常に効率的で便利なこの回答を見つけましたが、問題は、ある色と他の色の違いを計算する方法です。その違いをまったく別の色で再利用できますか?

最初に、RGB の違いを取得して、それを新しい色に追加するだけでよいと考えましたが、これは私にとって非常に単純なことでした。

次に、いくつかの調査の結果、HSL が適しているように思われるので、基本の青 (最初の値) と次の 2 つの値の差を計算しました。そうすれば、別の値を選択して差を追加することができます。 ? まあ...そうではないことがわかりました：

次の現在の試行は、色相の値をそのままにして、彩度と明度の値に元の差を追加することです。結果はかなり良いですが、異なる色で機能するかどうかはわかりません.

  • 色が変わっても色調を維持する方法はありますか?
  • HSLは進むべき道ですか？
  • グレースケールに変換してそこから色付けしたいという気持ちはありますが、そうですか？

これがコードです。概念をテストするために CSS で作成しましたが、ツールは PHP+GD です。

<style>
span{
  display: inline-block;
  width: 100px;
  height: 400px;
  float: left;
}
.c1{
  background: #645591;
  /* hsl(255, 26%, 45%) */
}
.c2{
  background: #6B90CA;
  /* hsl(217, 47%, 61%) */
}
.c3{
  background: #7BC8EF;
  /* hsl(200, 78%, 71%) */
}
.r1{
  background: hsl(50, 35%, 24%);
}
.r2{
  background: hsl(12, 56%, 40%);
}
.r3{
  background: hsl(355, 87%, 50%);
}
/* Preserving the Hue values turns out to be pretty good */
.z1{
  background: hsl(355, 35%, 24%);
}
.z2{
  background: hsl(355, 56%, 40%);
}
.z3{
  background: hsl(355, 87%, 50%);
}
</style>
<span class="c3"></span>
<span class="c2"></span>
<span class="c1"></span>
<span style="width: 50px;"></span>
<span class="r3"></span>
<span class="r2"></span>
<span class="r1"></span>
<span style="width: 50px;"></span>
<span class="z3"></span>
<span class="z2"></span>
<span class="z1"></span>
4

1 に答える 1

1

色1、2、3の違いをその場で計算することに本当に意味がありますか？私があなたのオリジナルを見ると、あなたは次のことをしている：ベースカラー、ベースカラーは少し飽和度が低く、かなり暗く、そして少し飽和度も低く、またかなり暗い。

各変換に同じ式を使用して、ユーザーが特定のパレットからベースカラーを選択できるようにしないのはなぜですか

次に、独自のテスト用にたとえば32の基本色を選択し、それぞれに3色のセットを生成して、それがどの程度うまく機能するかを確認できます。

それがうまくいかない場合は、「色の知覚」などについてグーグルで検索することをお勧めします。私たちは、すべての色について同じように暗闇の変化を知覚するわけではありません（私が正しく覚えていれば、他の性質の中でも）。

また、すべてのCSS、CSS + PHP、LessCss、またはCSS+Javascriptを検討することもできます。

于 2012-12-12T06:12:34.057 に答える