Power Appstips関数関数解説

【Power Apps】Power Appsでの色、Power Fxを用いた色変換

Power Apps

2048を作る過程で色変換について試行錯誤したので、メモです。

上記のリンクからダウンロードして遊べます

Power Appsで色を指定する方法

Power Appsで色を指定する方法には、RGBA、カラーコード、Color列挙体の三通りがあります。

RGBAでの指定

最も一般的で分かりやすい色指定方法です。

https://ja.wikipedia.org/wiki/RGB

赤、緑、青の量を0~255の範囲で、透明度を表すアルファチャンネルの値を0~1(0%~100%)の範囲で指定することで色を表現します。

透けグレー(ポップアップなどでよく使う)

カラーコード(16進数6桁または8桁)での指定

CSSなどでも使われる、色を16進数で表現する方法です。

ColorValue関数に16進数を入力することで対応する色が出力されます。

透けグレー(ポップアップなどでよく使う)

8桁の16進数を入力することで、アルファチャンネルによる透明度を表現できます。

Color列挙体

Color.色でEnum値として組み込まれている色を取り出すことができます。

透明

その他の色→Color 列挙体と ColorFade、ColorValue、RGBA 関数 - Power Platform | Microsoft Learn

色変換

RGBAから16進数

最近追加された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

RGBAから16進数の逆の処理をHex2Dex関数で行います。

Match関数で正規表現を用いて2文字ずつ抜き出し、それをHex2Dec関数で10進数に変換しています。

Hex2Dec(Match(TextInput2.Text, "#(?<R>[0-9a-zA-Z]{2})(?<G>[0-9a-zA-Z]{2})(?<B>[0-9a-zA-Z]{2})(?<A>[0-9a-zA-Z]{2})").R)

アルファチャンネルは2.55で割る必要があります。

色反転

255 - R, G, Bを計算をすることで色を反転させることができます。

モノクロ

R + G + B / 3の値(平均値)をRGBとすることで変換元の色をモノクロにした色を取得できます。

背景色に応じた文字色変更

背景色の色反転後、モノクロにする際に計算した平均値が127.5を超えていれば文字色を白、超えていなければ黒にすることで読みやすい文字色を調べることができます。

色反転
モノクロ
完成
If(
    ((255 - TextInput1.Text + 255 - TextInput1_1.Text + 255 - TextInput1_2.Text) / 3) > 127.5,
    Color.White, Color.Black
)

参考→CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する

コメント

タイトルとURLをコピーしました