🌱 The next big step: Kirby 4 Alpha Learn more
Skip to content

Color field

The new color field comes with support for hexrgb and hsl modern CSS notation.

Usage

color:
  type: color
  format: hsl # supports hex (default), rgb, hsl

Pre-defined options

Allows adding a list of pre-defined colors that are shown as one-click options in the Panel.

color:
  type: color
  options:
    - "#f8b195"
    - "#f67280"
    - "#c06c84"
    - "#6c5b7b"
    - "#355c7d"

If you name the colors, their name is shown in the Panel as well.

color:
  type: color
  options:
    "Sunny rays": "#F8B195"
    "First-love blush": "#F67280"
    "Cherry blossom": "#C06C84"
    "Morning gloom": "#6C5B7B"
    "Midnight rain": "#355C7D"

Modes

With the mode option you control which elements of the color field are available. Possible values:

Option Description
picker show everything (default)
input show only the input
options show only options

Alpha

Use the alpha option (default: false) to activate alpha transparency support:

color:
  type: color
  alpha: true