2048を作る過程で色変換について試行錯誤したので、メモです。
Power Appsで色を指定する方法
Power Appsで色を指定する方法には、RGBA、カラーコード、Color列挙体の三通りがあります。
RGBAでの指定
最も一般的で分かりやすい色指定方法です。
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/83bcc92232fa506978ad6115c1f4f1a8.jpg)
赤、緑、青の量を0~255の範囲で、透明度を表すアルファチャンネルの値を0~1(0%~100%)の範囲で指定することで色を表現します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/9b16e18f2bccc744f8f13cd87592016e.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/9666aafa4ac16d3835d437be7e33fdde.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/aee71f83707a4c1cf5ab777791545f25.png)
カラーコード(16進数6桁または8桁)での指定
CSSなどでも使われる、色を16進数で表現する方法です。
ColorValue関数に16進数を入力することで対応する色が出力されます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/280001420d5bfe080c2d82c263b120c5.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/c116cde19afc27d81d46f978a38000e7.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/2ff8c3b1c437952e2ffc2b2b728a5742.png)
8桁の16進数を入力することで、アルファチャンネルによる透明度を表現できます。
Color列挙体
Color.色でEnum値として組み込まれている色を取り出すことができます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/e181689e1a533a9492d0bf0260f78ab6.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/d3a5226a65758d3d48b98d6cf77006fe.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/afbd098ae1c509d96ecc341398ce4f13.png)
その他の色→Color 列挙体と ColorFade、ColorValue、RGBA 関数 - Power Platform | Microsoft Learn
色変換
RGBAから16進数
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/43ea5b544d52e1cf46ec59e0920041de.png)
最近追加されたDec2Hex関数でかなり簡単に変換できるようになりました。
RGB値をそれぞれ16進数に変換し必要に応じて0埋めを行い、アルファチャンネルは空白の場合にFF(非透過)、それ以外の場合は入力される0~100の値を2.55倍(255/100)したものを16進数に変換します。
"#" &
If(Len(Dec2Hex(TextInput1.Text)) = 1, 0 & Dec2Hex(TextInput1.Text), Dec2Hex(TextInput1.Text)) &
If(Len(Dec2Hex(TextInput1_1.Text)) = 1, 0 & Dec2Hex(TextInput1_1.Text), Dec2Hex(TextInput1_1.Text)) &
If(Len(Dec2Hex(TextInput1_2.Text)) = 1, 0 & Dec2Hex(TextInput1_2.Text), Dec2Hex(TextInput1_2.Text)) &
If(IsBlank(TextInput1_3.Text), "FF", Len(Dec2Hex(TextInput1_3.Text * 2.55)) = 1, 0 & Dec2Hex(TextInput1_3.Text * 2.55), Dec2Hex(TextInput1_3.Text * 2.55))
16進数からRGBA
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/6bbeddcad313ec68ed294f0d7edd50c7.png)
RGBAから16進数の逆の処理をHex2Dex関数で行います。
Match関数で正規表現を用いて2文字ずつ抜き出し、それをHex2Dec関数で10進数に変換しています。
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/a5f03c853fff265525b3b7be9b29f827.png)
アルファチャンネルは2.55で割る必要があります。
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/a4ddc07006759fbc01cd0546c3dc4d63.png)
色反転
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/3bf0df78338940dfedb4fe3cccfe4778.png)
255 - R, G, Bを計算をすることで色を反転させることができます。
モノクロ
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/4bfe222d1dc1325534af465d0109e8ee.png)
R + G + B / 3の値(平均値)をRGBとすることで変換元の色をモノクロにした色を取得できます。
背景色に応じた文字色変更
背景色の色反転後、モノクロにする際に計算した平均値が127.5を超えていれば文字色を白、超えていなければ黒にすることで読みやすい文字色を調べることができます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/09dd4f8d98df5af24525b8d4330bbd29.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/97964bd107f14291a259caeb545cb589.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/01/78e3327ef6035049079169e8593aac6b.png)
If(
((255 - TextInput1.Text + 255 - TextInput1_1.Text + 255 - TextInput1_2.Text) / 3) > 127.5,
Color.White, Color.Black
)
コメント