Power Appsで色選択ツール

## 完成形
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/b3355be4-4df5-4958-3368-7170a651c22c.png)
ドロップダウンでカラーセットを選択してスライダーで透過率調整、クリックするとコンテキスト変数にR,G,B,Aの各値が格納される。
いろんな[NPO法人](https://cudo.jp/)があるんですね。

## カラーセット
一つずつ頑張って抽出。ChatGPTさんの手も借りながら。
<details><summary>コードはこちら</summary>

```diff_java
ClearCollect(ColorCollection,
    {Crow: 1, Ccol: 1, R: 255, G: 255, B: 255, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 1, R: 242, G: 242, B: 242, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 1, R: 216, G: 216, B: 216, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 1, R: 191, G: 191, B: 191, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 1, R: 165, G: 165, B: 165, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 1, R: 127, G: 127, B: 127, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 2, R: 0, G: 0, B: 0, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 2, R: 127, G: 127, B: 127, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 2, R: 89, G: 89, B: 89, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 2, R: 63, G: 63, B: 63, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 2, R: 38, G: 38, B: 38, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 2, R: 13, G: 13, B: 13, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 3, R: 238, G: 236, B: 225, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 3, R: 221, G: 217, B: 195, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 3, R: 196, G: 189, B: 151, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 3, R: 147, G: 137, B: 83, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 3, R: 73, G: 68, B: 41, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 3, R: 29, G: 27, B: 16, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 4, R: 31, G: 73, B: 125, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 4, R: 198, G: 217, B: 240, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 4, R: 141, G: 179, B: 226, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 4, R: 84, G: 141, B: 212, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 4, R: 23, G: 54, B: 93, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 4, R: 15, G: 36, B: 62, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 5, R: 79, G: 129, B: 189, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 5, R: 219, G: 229, B: 241, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 5, R: 184, G: 204, B: 228, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 5, R: 149, G: 179, B: 215, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 5, R: 54, G: 96, B: 146, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 5, R: 36, G: 64, B: 97, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 6, R: 192, G: 80, B: 77, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 6, R: 242, G: 220, B: 219, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 6, R: 229, G: 185, B: 183, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 6, R: 217, G: 150, B: 148, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 6, R: 149, G: 55, B: 52, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 6, R: 99, G: 36, B: 35, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 7, R: 155, G: 187, B: 89, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 7, R: 235, G: 241, B: 221, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 7, R: 215, G: 227, B: 188, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 7, R: 195, G: 214, B: 155, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 7, R: 118, G: 146, B: 60, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 7, R: 79, G: 97, B: 40, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 8, R: 128, G: 100, B: 162, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 8, R: 229, G: 224, B: 236, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 8, R: 204, G: 193, B: 217, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 8, R: 178, G: 161, B: 199, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 8, R: 95, G: 73, B: 122, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 8, R: 63, G: 49, B: 81, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 9, R: 75, G: 172, B: 198, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 9, R: 219, G: 238, B: 243, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 9, R: 183, G: 221, B: 232, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 9, R: 146, G: 205, B: 220, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 9, R: 49, G: 133, B: 155, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 9, R: 32, G: 88, B: 103, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 10, R: 247, G: 150, B: 70, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 10, R: 253, G: 234, B: 218, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 10, R: 251, G: 213, B: 181, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 10, R: 250, G: 192, B: 143, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 10, R: 227, G: 108, B: 9, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 10, R: 151, G: 72, B: 6, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 1, R: 255, G: 75, B: 0, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 2, R: 255, G: 241, B: 0, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 3, R: 3, G: 175, B: 122, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 4, R: 0, G: 90, B: 255, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 5, R: 77, G: 196, B: 255, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 6, R: 255, G: 128, B: 130, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 7, R: 246, G: 170, B: 0, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 8, R: 153, G: 0, B: 153, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 9, R: 128, G: 64, B: 0, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 1, R: 255, G: 202, B: 191, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 2, R: 255, G: 255, B: 128, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 3, R: 216, G: 242, B: 85, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 4, R: 191, G: 228, B: 255, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 5, R: 255, G: 202, B: 128, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 6, R: 119, G: 217, B: 168, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 7, R: 201, G: 172, B: 230, ColorSet: "CUDO"},
    {Crow: 3, Ccol: 1, R: 255, G: 255, B: 255, ColorSet: "CUDO"},
    {Crow: 3, Ccol: 2, R: 200, G: 200, B: 203, ColorSet: "CUDO"},
    {Crow: 3, Ccol: 3, R: 132, G: 145, B: 158, ColorSet: "CUDO"},
    {Crow: 3, Ccol: 4, R: 0, G: 0, B: 0, ColorSet: "CUDO"}
)
```

</details>

## コピペ用コード

```diff_java
- ContainerColorPicker:
    Control: GroupContainer
    Variant: manualLayoutContainer
    Properties:
      DropShadow: =DropShadow.Bold
      Fill: =Color.Snow
      Height: =262
      Width: =308
      X: =55
      Y: =45
    Children:
    - GalleryColorPicker:
        Control: Gallery
        Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
        Properties:
          Items: =Sequence(6,1,1)
          BorderStyle: =BorderStyle.None
          DelayItemLoading: =true
          Height: =195
          Layout: =Layout.Vertical
          LoadingSpinner: =LoadingSpinner.Data
          TemplatePadding: =0
          TemplateSize: =Self.Height/Self.AllItemsCount
          Width: =290
          X: =10
          Y: =57
        Children:
        - LabelRow:
            Control: Label
            Properties:
              Text: =ThisItem.Value
              Height: =32.5
              Visible: =false
        - GalleryColorRecord:
            Control: Gallery
            Variant: BrowseLayout_Horizontal_TwoTextOneImageVariant_ver5.0
            Properties:
              Items: =Sequence(10,1,1)
              DelayItemLoading: =true
              Height: =Parent.TemplateHeight
              LoadingSpinner: =LoadingSpinner.Data
              TemplatePadding: =0
              TemplateSize: =Self.Width/Self.AllItemsCount
              Width: =Parent.TemplateWidth
            Children:
            - ButtonColor:
                Control: Classic/Button
                Properties:
                  OnSelect: |-
                    =With(
                        {rec:LookUp(ColorCollection,Crow=Value(LabelRow.Text)&&Ccol=ThisItem.Value&&ColorSet=DropdownColorSet.Selected.Value)},
                        UpdateContext({_pickR:rec.R,_pickG:rec.G,_pickB:rec.B,_pickAlpha:SliderAlpha.Value/100})
                    )
                  Text: =
                  BorderThickness: =1
                  Fill: |-
                    =With(
                        {rec:LookUp(ColorCollection,Crow=Value(LabelRow.Text)&&Ccol=ThisItem.Value&&ColorSet=DropdownColorSet.Selected.Value)},
                        RGBA(rec.R,rec.G,rec.B,SliderAlpha.Value/100)
                    )
                  Height: =Parent.TemplateHeight-6
                  HoverFill: =ColorFade(Self.Fill, 10%)
                  PressedFill: =ColorFade(Self.Fill,-10%)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  Visible: =!IsBlank(LookUp(ColorCollection,Crow=Value(LabelRow.Text)&&Ccol=ThisItem.Value&&ColorSet=DropdownColorSet.Selected.Value))
                  Width: =Parent.TemplateWidth-6
                  X: =3
                  Y: =3
    - SliderAlpha:
        Control: Classic/Slider
        Properties:
          Default: =100
          BorderStyle: =BorderStyle.None
          HandleSize: =18
          Height: =32
          Width: =104
          X: =193
          Y: =10
    - DropdownColorSet:
        Control: Classic/DropDown
        Properties:
          Items: =Distinct(ColorCollection,ColorSet)
          Height: =32
          Size: =12
          Width: =172
          X: =10
          Y: =10

```