8

私はすでに自分のウェブサイトでカラーテーマを使用しています。たとえば、リンク状態の標準/ホバー/アクティブに標準の 16 進数の色を使用しています。

今、私はLESSのように色操作を使いたいcolor:darken(@base_color, x%);

だから私の質問は：

「暗くする」操作後のベースカラーと出力カラーがわかっている場合、

出力カラーを生成するための暗くする操作の割合を知るにはどうすればよいですか?

例: #952262 -> #681744 から行く場合、% は何になりますか?

これらの変換を行うサイトがあるかもしれません。

うまくいけば、答えは「試行錯誤」ではありません。

4

3 に答える 3

19

いくつかの課題と注意事項があります

通常、人々はdarken()最終的に行きたいことがわかっている色を取得するような関数を使用しません (彼らは、自分が欲しいとわかっている色の値を入力するだけです)。ただし、この質問の背後にはそれ以上のものがあると思います。

darken()機能_

darken()LESSのhsl機能は、設定 (色相、彩度、明度)の観点から考慮された、色の「明度」または「明度」の部分に影響を与えます。そのビューから考慮された2つの色は次のとおりです（このサイトに基づいて、サイト間でいくつかの違いがあることに気付きました-いくつかはおそらく他のものより正確です）：

#952262 = hsl(327, 63%, 36%)
#681744 = hsl(327, 64%, 25%)

したがって、あなたが求める暗さの値は、そのサイトから減算するだけで手動で計算できます36% - 25% = 11%。それを関数にプラグインします：

darken(@base_color, 11%);

収量

#671844 /* not 681744! */

おい！それは私の目標と一致しませんでした!

s上記の (彩度) 値は、ベースからターゲットまでの差が示されていることに注意して1%ください。これは、技術的には、関数だけではベース カラーからターゲット カラーに到達できないことを意味しますdarken()。代わりに、別の関数を使用してs値を微調整するか、ターゲットを次のようにわずかに調整する必要があります (これは を維持sします63%)。

#681844 = hsl(327, 63%, 25%)

しかし、その数 ( #681844) はまだ LESS 出力 ( ) と一致しません#671844。Web サイトでは、LESS 出力が次のように表示されますhsl(327, 62%, 25%)(飽和値が に低下していることに注意して62%ください)。これが意味することは、Web サイトの計算と LESS 関数の計算の丸め計算の違いだと思います。1%これが、使用したプログラムがウェブサイトとは異なる方法で丸められたとしても、元の数値が飽和状態でオフになった理由である可能性があります. 目標値に近づくため、これはおそらく大きな問題ではありません。

LESS を使用して計算する

ここで、実際に何をしているかに応じて、lightness()関数を使用して手動で計算する代わりに、LESS を使用してそのパーセンテージを計算できます。#681844ウェブサイトに基づいてターゲットを調整したとします。次に、これは必要なパーセンテージを取得する例です (計算を表示するために偽のプロパティを使用しますcolor-calc:

@base_color: #952262;  /* Base #952262 = hsl(327, 63%, 36%) */
@real_target_color: #681844; /* Real Target #681844 = hsl(327, 63%, 25%) */
@color_calc: (lightness(@base_color) - lightness(@real_target_color));

.test {
  color-calc: @color_calc;
  color: darken(@base_color, 11%);
}

出力:

.test {
  color-calc: 11%;
  color: #671844;
}

11%暗さの違いを計算したことに注意してください。また、丸めの問題により、ターゲットとはわずかに異なる値になることに注意してください。LESS が生成する最終値 ( #671844) を差し込むと、ターゲットは依然として に対して同じ11%値を生成しますdarken()。

于 2013-05-01T14:15:09.137 に答える
8

LESS にはlightness()、hsl 空間で色の明度チャネルを返す関数 があります。

だから、明らかに

lightness(hsl(90, 100%, 50%))

戻るだろう

50%

ただし、ミックスインのように、2 つの色の明度の差を計算する、より洗練された処理を行うこともできます。

@nice-blue: #5B83AD;
@lighter-blue: #6F92B7;

.test(@color1, @color2) {
  @lightdif: (lightness(@color1) - lightness(@color2));
  color1: @color1;
  color2: @color2;
  lightness-dif:  @lightdif;
}

.test {
   .test(@lighter-blue, @nice-blue);
   output-color: lighten(@nice-blue, @lightdif);
}

これは次を返します:

.test {
  color1: #6f92b7;
  color2: #5b83ad;
  lightness-dif: 6%;
  output-color: #6f92b7;
}

あなたの場合 (#952262 -> #681744) はlightness-dif11% になります。

これで少し遊ぶことができます。たとえば、ガードを使用して、どの色が暗い/明るいかを定義し、絶対的な違いを使用できます。これは、正確に何に使用したいかによって異なります。

より多くの色操作については、「関数リファレンス」->「色関数」の下にあるlesscss.orgを読むことができます。

また、less の JavaScript 実装を使用している場合は、JavaScript 補間 (バックティックを使用) と LESS 内の JavaScript 関数を使用して、さらに多くのことができます。

于 2013-05-01T13:50:12.040 に答える
7

これは日常的に私を悩ませているので、色の機能を提案するツールを作成しました。ある色から別の色に変換されるほとんどの LESS 関数がリストされているため、色を使用するかどうかに集中することができdarken、softlightデザインの観点からより理にかなっています。

カラー機能の遷移を提案

于 2015-11-26T08:39:21.733 に答える