javascript - 16 進コードの違い

Question

2 つの 16 進コードの差を計算することは可能ですか? 私は何時間も探していましたが、それは不可能だと思い始めています。

例: 色 #1:#c60f13 色 #2:#970b0e 違い:25% Darker

そうそう、Javascript 電卓を見つけたのですが、うまくいきませんでした。

みんなありがとう！

Answer 1

HEX 数値と HEX RGB カラーは等しくありません。ただし、どちらも数値であり、RGB 値の HEX 表現には、赤、緑、青の 3 つの独立したコンポーネントが含まれ、#RRGGBB のように 3x8 ビット コンポーネントとしてパックされます。このようにして、それらを単一の整数として格納できます。

まず、個々のコンポーネントを次のように解凍する必要があります。

r = (HEX >> 16) & 0xFF
g = (HEX >> 8)  & 0xFF
b =  HEX        & 0xFF

これで、計算を実行できます

_r = abs(r1 - r2)
_g = abs(g1 - g2)
_b = abs(b1 - b2)

次に、それらを再梱包します。

HEX = _r<<16 | _g<<8 | _b

Answer 2

差の結果の色の値が必要だと思います。また、これにlessタグを付けたので、 less css preprocessorを使用していると仮定します。もしそうなら、すでに this: の機能がありますdifference()。だからそれはちょうどこれです：

difference(#c60f13, #970b0e);

これが生成されます：

#2f0405

Answer 3

それらを16進数値として直接減算することができます。

  0xc60f13
- 0x970b0e
----------
= 0x2F0405

最初にそれらをグループに分割すると、同じ結果が得られます。

  c6   0f   13
 -97  -0b  -0e
 -------------
 =2F  =04  =05

したがって、最初にこれを行う必要はありません。

JavaScript では、次のように計算できます。

var val1 = 0xc60f13;
var val2 = 0x970b0e;
var diff = (val1 - val2) & 0xffffff;

console.log(diff.toString(16));

結果：

2f0405