Skip to content

Color ​

A swatch with the color as hex text. A click opens a color picker.

Formats ​

The default format is a hex string (#rrggbb). Other values need a format:

FormatValue
colorHex()'#ff8800' (default)
colorHex('rgba')'#ff880080'
colorCss() / colorCss('hsl')'rgb(255 136 0)' / 'hsl(32 100% 50%)'
colorNumber()0xff8800
colorNumber('abgr')a packed color, little endian
colorArray('rgb')[1, 0.53, 0]
colorArray('rgba', { range: 255 })[255, 136, 0, 255]
colorObject('xyz'){ x: 1, y: 0.53, z: 0 }
colorObject('rgb', { range: 255 }){ r: 255, g: 136, b: 0 }
  • The swizzle (rgb, rgba, bgra, argb, ...) sets the channel order. The first channel is written first.
  • Arrays and objects use the range 0..1. Set range: 255 for bytes.
  • colorObject maps its keys to red, green, blue and alpha, in this order.
  • A custom format is an object with toControl, fromControl and alpha.
  • Set linear if the value is in linear encoding. The control shows it in sRGB.
  • The builder changes arrays and objects in place.