ベースカラーからメインカラーを算出

[ryo-i]

カラーピッカーのベースカラーを変更した時に行いたい処理
#6 でやったメインカラーからベースカラーの算出の逆算パターン

[ryo-i]

逆算の参考になる記事
https://zky-jukesan.com/gyakusan-guidance/7554

□が2つになる場合の方法
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11231166926

[ryo-i]

途中経過。□が1つならシンプルだが□が2つだと難しく感じる。
しかし、理系だった弟にこれを見せたら「これは逆算というより方程式だね。xyzとか。同じ値xが2箇所の方程式は割と簡単だと思う」とのこと。協力を仰いでいる。

[ryo-i]

昨日、理系出身の弟にいろいろレクチャーしてもらった内容

＜基本的な考え方＞

• 複数のxを一つに束ねるようにする
• 「*1」など普段は省略されてる書式も揃える
• x以外の式を右辺に持っていく（等式の性質で）
• 左辺には最後にxが1つだけが残る

---

参考（弟の計算）

1. (100 - x) * 0.75 + x = 86.25
2. 100 * 0.75 - 0.75 * X + 1 * X = 86.25
3. 100 * 0.75 + (-0.75 + 1) * X = 86.25
   →100 * 0.75 - 100 * 0.75 + (-0.75 + 1) * X = 86.25 - 100 * 0.75
4. (-0.75 + 1) * X = 86.25 - 100 * 0.75
   →((-0.75+1) * X) / (-0.75 + 1) = (86.25 - 100 * 0.75) / (-0.75 + 1)
5. X = (86.25 - 100 * 0.75) / (-0.75 + 1)

---

【等式の性質】
１，等式の両辺に同じ数を足しても、等式は成り立つ
２，等式の両辺から同じ数を引いても、等式は成り立つ
３，等式の両辺に同じ数をかけても、等式は成り立つ
４，等式の両辺を同じ数で割っても、等式は成り立つ

※参考：https://alpha-katekyo.jp/tips/tips025/

[ryo-i]

できた！「45」が求めたかった数値！

1. (100 - X) * 0.75 + X = 86.25
2. (100 * 0.75) - (X * 0.75) + (X * 1) = 86.25
   →(100 * 0.75) - (0.75 * X) + (1 * X) = 86.25
3. (100 * 0.75) + (-0.75 + 1) * X = 86.25
   → (100 * 0.75) - (100 * 0.75) + (-0.75 + 1) * X = 86.25 - (100 * 0.75)
4. (-0.75 + 1) * X = 86.25 - (100 * 0.75)
   →(-0.75 + 1) / (-0.75 + 1) * X = (86.25 - 100 * 0.75) / (-0.75 + 1)
5. X = (86.25 - 100 * 0.75) / (-0.75 + 1)
   →X = (86.25 - 75) / 0.25
   →X = 11.25 / 0.25
   →X = 45

[ryo-i]

0.75→ 0.9、86.25→94.5の場合でも同じ「45」が算出できた！

1. (100 - X) * 0.9 + X = 94.5
2. (100 * 0.9) - (X * 0.9) + (X * 1) = 94.5
   →(100 * 0.9) - (0.9 * X) + (1 * X) = 94.5
3. (100 * 0.9) + (-0.9 + 1) * X = 94.5
   → (100 * 0.9) - (100 * 0.9) + (-0.9 + 1) * X = 94.5 - (100 * 0.75)
4. (-0.9 + 1) * X = 94.5 - (100 * 0.9)
   →(-0.9 + 1) / (-0.9 + 1) * X = (94.5 - 100 * 0.9) / (-0.9 + 1)
5. X = (94.5 - 100 * 0.9) / (-0.9 + 1)
   →X = (94.5 - 90) / 0.1
   →X = 4.5 / 0.1
   →X = 45

[ryo-i]

このままだとS値が0-100に治らずマイナスになったりするっぽい

[ryo-i]

昨夜、弟が検討してくれた計算式

---

＜前提＞
X=メインカラー彩度（0～100）
Y=ベースカラーコントラスト比率（-100～+100）
Z=ベースカラー彩度（0～100）

1.X（メインカラー彩度）からYを基にZを導き出すパターン
(1)Y=0
Z=X
(2)Y<0
Z=X*(1+Y/100)
(3)0<Y
Z=X+(100-X)*Y/100

2.Z（ベースカラー彩度）からYを基にXを導き出すパターン
(1)Y=0
X=Z
(2)Y<0
X=Z/(1+Y/100)
(3)0<Y
X=Z-(100-X)*Y/100

[ryo-i]

#22 で変更した計算式を踏まえて、範囲-100〜100%におけるベースカラー側からメインカラー側のS、Bの算出をしたい

[ryo-i]

ベースカラー彩度からコントラストを基にメインカラー彩度を算出

X=メインカラー彩度（0～100）
Y=ベースカラーコントラスト比率（-100～+100）
Z=ベースカラー彩度（0～100）

＜-100〜-1%＞

(2)Y<0
X=Z/(1+Y/100)

→ベースカラー彩度をS、コントラストをCとする
S / (1 + (C / 100))

→S=65、C=-50%
65 / (1 + (-50 / 100))
= 65 / (1 + (-0.5))
= 65 / 0.5
= 130

→S=65、C=-75%
65 / (1 + (-75 / 100))
= 65 / (1 + (-0.75)
= 65 / 0.25
= 260

※100を超えてしまう？

＜1〜100%＞

(3)0<Y
X=Z-(100-X)*Y/100

※式の中のXはZ？（Xはまだ算出されてないため）
X=Z-(100-Z)*Y/100

→ベースカラー彩度をS、コントラストをCとする
S - (100 - S) * C / 100

→B=65、C=75%
65 - (100 - 65) * 75 / 100
= 65 - 35 * 0.75
= 65 - 26.25
= 38.75

→B=65、C=90%
65 - (100 - 65) * 90 / 100
= 65 - 35 * 0.9
= 65 - 31.5
= 33.5

[ryo-i]

メインカラー←→ベースカラーの彩度(S)の算出

昨日、弟に相談し、突き止めてくれた方法

メインカラー→ベースカラー

• C=0(ゼロ)
  BS = MS
• C<0(マイナス)
  BS = MS * (1 + C / 100)
• 0<C(プラス)
  BS = MS + (100 - MS) * (C / 100)

ベースカラー→メインカラー

• C=0(ゼロ)
  MS = BS
• C<0(マイナス)
  MS = BS / (1 + C / 100)
  ※法則：｜BS｜＋｜C｜＜＝１００
• 0<C(プラス)
  MS = (BS - C) / (1 - C / 100)
  ※法則：C＜＝BS

---

下記の制限内であれば想定通りの動きをする

1. Cがマイナスのとき、Cの絶対値とBSの絶対値の合計が100以下であること。
   →例：Cが-50%でBSが65だとMSは130（100を超える）
2. Cがプラスのとき、C<=BSであること。
   →例：Cが50%でBSが40だとMSは-20（0を超える）

※絶対値＝正負を除いた数値、-5の絶対値は5、など。

→カラーピッカーは全色から選べるようになっているので、ベースカラーの色をカラーピッカーで変更する場合、コントラストを変更する必要がある？

→ベースカラーはもともと、カラーピッカーの正方形の中で左上の真っ白と右下の真っ黒に向かっていくライン上の動きだった（ #6 ）。そのため、ベースカラーのカラーピッカーがそのラインから外れるとメインカラーの数値が0〜100を超えてしまう。

→ベースカラーのカラーピッカーを開く人はベースカラーのコントラストのツマミ以外の範囲以外の色にしたいはずなので、コントラストの方の値を変えてしまうのでいいと思う。

→Cの上限計算メモ（弟より）

• Cがマイナス：C=-1*(100-B)
• Cがプラス：C=B

[ryo-i]

メインカラー←→ベースカラーの明度(B)の算出

オーバーフロー（マイナスや101以上）はいったん気にしない

メインカラー→ベースカラー

• C=0(ゼロ)
  BB = MB
• C<0(マイナス)
  BB = (100 - MB) * (-1 * (C / 100)) + MB
• 0<C(プラス)
  BB = MB * (1 - (C / 100))

参考
#22 (comment)

ベースカラー→メインカラー

• C=0(ゼロ)
  BB = MB
  MB = BB

• C<0(マイナス)
  BB = (100 - MB) * (-1 * (C / 100)) + MB
  (100 - MB) * (-1 * (C / 100)) + MB = BB
  (100 * (-1 * (C / 100))) - (MB * (-1 * (C / 100))) + MB = BB
  (MB * (-1 * (C / 100))) + MB = 100 * (-1 * (C / 100)) - BB
  (MB * (-1 * (C / 100))) + (MB * 1) = 100 * (-1 * (C / 100)) - BB
  MB * (-1 * (C / 100)) + 1) = 100 * (-1 * (C / 100)) - BB
  MB = (100 * (-1 * (C / 100)) - BB) / (-1 * (C / 100)) + 1)

• 0<C(プラス)
  BB = MB * (1 - (C / 100))
  MB * (1 - (C / 100)) = BB
  MB = BB / (1 - (C / 100))

C<0(マイナス)の式がなんだか長ったらしくなってて、改善の余地がありそうなら手直ししたいと思っている

[ryo-i]

試しに計算してみる。

C<0(マイナス)

MBが65、Cが-30%とする

• BB = (100 - MB) * (-1 * (C / 100)) + MB
  BB = (100 - 65) * (-1 * (-30 / 100)) + 65
  BB = 35 * (-1 * -0.3) + 65
  BB = 35 * 0.3 + 65
  BB = 10.5 + 65
  BB = 75.5

上記の式で算出された75.5をBBに入れる

• MB = (100 * (-1 * (C / 100)) - BB) / (-1 * (C / 100)) + 1)
  MB = (100 * (-1 * (-30 / 100)) - 75.5) / (-1 * (-30 / 100)) + 1)
  MB = (100 * (-1 * -0.3) - 75.5) / (-1 * -0.3) + 1)
  MB = (100 * 0.3 - 75.5) / (0.3 + 1)
  MB = (30 - 75.5) / 1.3
  MB = -45.5 / 1.3
  MB = -35

あれ、「C<0(マイナス)」の計算が合わない？

0<C(プラス)

MBが65、Cが+50%とする

• BB = MB * (1 - (C / 100))
  BB = 65 * (1 - (50 / 100))
  BB = 65 * (1 - 0.5)
  BB = 65 * 0.5
  BB = 32.5

上記の式で算出された32.5をBBに入れる

• MB = BB / (1 - (C / 100))
  MB = 32.5 / (1 - (50 / 100))
  MB = 32.5 / (1 - 0.5)
  MB = 32.5 / 0.5
  MB = 65

こっちは想定通り

[ryo-i]

メインカラー←→ベースカラーの明度(B)の算出 ※修正版

#21 (comment) の修正版
弟に確認してもらって修正したバージョン
オーバーフロー（マイナスや101以上）はまだ詳細を詰める必要があるので度外視
 
 

メインカラー→ベースカラー

• C = 0 (ゼロ)
  BB = MB

• C < 0 (マイナス)
  BB = (100 - MB) * (-1 * (C / 100)) + MB
  BB = MB + ( 100 - MB ) * ( -1 * ( C / 100 ) )
  BB = MB + ( 1* ( 100 - MB ) ) * ( -1 * ( C / 100 ) )
  BB = MB - ( 100 - MB ) * ( C / 100 )
  ⇒よりシンプルな計算式に変更

• 0 < C (プラス)
  BB = MB * ( 1 - ( C / 100 ) )
   

ベースカラー→メインカラー

 

• C = 0 (ゼロ)
  MB = BB
   
• C < 0 (マイナス)
  BB = MB - ( 100 - MB ) * ( C / 100 )
  ⇒一旦、「 ( C / 100 ) 」を「R」とし、後で戻す作戦。（置換）
  BB = MB - ( 100 - MB ) * R
  BB = MB - 100 * R + MB * R
  MB - 100 * R + MB * R = BB
  MB * 1 + MB * R = BB + 100 * R
  MB * ( 1 + R ) = BB + 100 * R
  MB = ( BB + 100 * R ) / ( 1 + R )
  ⇒「R」を「 ( C / 100 ) 」に戻す。
  MB = ( BB + 100 * ( C / 100 ) ) / ( 1 + ( C / 100 ) )
  MB = ( BB + C ) / ( 1 + ( C / 100 ) )
  ※法則：ＢＢ＞＝｜Ｃ｜
    
• 0<C(プラス)
  BB = MB * (1 - (C / 100))
  MB * (1 - (C / 100)) = BB
  MB = BB / (1 - (C / 100))
  ※法則：｜ＢＢ｜＜＝１００－｜Ｃ｜

[ryo-i]

メインカラー←→ベースカラーの明度(B)の計算

実際に計算してみる→逆算が成立！（オーバーフローは無視）

C < 0 (マイナス)

メインカラー→ベースカラーの明度

BB = MB - ( 100 - MB ) * ( C / 100 )
MBを50、Cを-30とする

BB = 50 - ( 100 - 50 ) * ( -30 / 100 )
BB = 50 - 50 * -0.3
BB = 50 - (-15)
BB = 65

ベースカラー→メインカラーの明度

MB = ( BB + C ) / ( 1 + ( C / 100 ) )
BBを65、Cを-30とする

MB = ( 65 + (-30) ) / ( 1 + ( -30 / 100 ) )
MB = ( 65 -30 ) / ( 1 + ( -0.3) )
MB = 35 / 1 -0.3
MB = 35 / 0.7
MB = 50

0 < C (プラス)

メインカラー→ベースカラーの明度

BB = MB * ( 1 - ( C / 100 ) )
MBを50、Cを30とする

BB = 50 * ( 1 - ( 30 / 100 ) )
BB = 50 * ( 1 - 0.3 )
BB = 50 * 0.7
BB = 35

ベースカラー→メインカラーの明度

MB = BB / (1 - (C / 100))
BBを35、Cを30とする

MB = 35 / (1 - (30 / 100))
MB = 35 / (1 - 0.3)
MB = 35 / 0.7
MB = 50

[ryo-i]

計算式をコードに落とし込んで、オーバーフローしない範囲内であれば想定通りの動きになった。いったんクローズ。
オーバーフロー対策はまた別のイシューを立てて検討する。