Colorpicker with customized palette possible?

[Larsen (Locke)]

Is it possible to use a customized color palette within the colorpicker with option “palette”? My widget looks like this but I would like to use some other colors.

I think the oh-colorpicker is derived from the f7 colorpicker. In the docs it’s described that it’s possible to define a user defined palette with an array of hex-colors.
Unfortunately I was not able to use it in a widget definition.
Did anybody succeed or is it just not possible?

[JustinG]

The color picker palette parameter takes an array (rows) of arrays (color cells in the row) which gets a little awkward in the yaml syntax, but is doable.

    - component: oh-colorpicker
      config:
        item: colorItem
        modules:
          - 'palette'
        defaultColor: [0,0,0]
        palette:
          -
            - "#000000"
            - "#888888"
            - "#ffffff"
          -
            - "#ff0000"
            - "#ff8888"
            - "#ffeeee"

Will make two rows of three colors:

[Larsen (Locke)]

thank you so much. That was what I was desperately looking for. Tried countless combinations but not with those empty lines with “-”.
Happy new Year!

[Larsen (Locke)]

Here is my current colorpicker with a reduced number of colors for my LED-lamps.

The widget code is:

Code here

uid: SlColor2
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Color
      label: Color
      name: color
      required: false
      type: TEXT
    - context: item
      description: on-off
      label: state
      name: state
      required: false
      type: TEXT
    - context: item
      description: Brightness
      label: brightness
      name: brightness
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 2, 2024, 9:49:16 AM
component: f7-card
config:
  title: =props.title
  style:
    background: rgb(40,40,40)
    padding: 6px
    padding-top: 0px
slots:
  default:
    - component: oh-grid-row
      config: {}
      slots:
        default:
          - component: oh-grid-col
            config:
              width: "30"
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-toggle
                        config:
                          item: =props.state
                          style:
                            margin-top: 20px
          - component: oh-grid-col
            config:
              width: "70"
            slots:
              default:
                - component: oh-slider
                  config:
                    item: =props.brightness
                    style:
                      margin-top: 20px
    - component: oh-colorpicker
      config:
        style:
          margin-top: 20px
        item: =props.color
        noBorder: true
        noShadow: true
        defaultColor:
          - 0
          - 0
          - 0
        modules:
          - palette
          - initial-current-colors
        palette:
          - - "#B71C1C"
            - "#4A148C"
            - "#1A237E"
            - "#004D40"
            - "#F57C00"
            - "#FDD835"
          - - "#D32F2F"
            - "#7B1FA2"
            - "#303F9F"
            - "#00796B"
            - "#FF9800"
            - "#FFEB3B"
          - - "#F44336"
            - "#9C27B0"
            - "#3F51B5"
            - "#009688"
            - "#FFB74D"
            - "#FFF59D"
          - - "#E57373"
            - "#BA68C8"
            - "#7986CB"
            - "#4DB6AC"
            - "#FFE0B2"
            - "#FFFFFF"