Frequently Referenced Types

Color

~~Colors~~The ~~are~~component supports many color strings ~~which~~formats ~~are~~including ~~formatted~~hex, inrgb, ~~one~~rgba, ofhsl, ~~the~~sla, ~~following~~css ~~ways.~~color, and Ignition theme colors.

Input Type	Description	Examples	Sample Color
Color Picker	All color properties may use the ignition designer color picker to select colors. The value is translated from rgb and hsl to hex as the user edits the color picker values.	See hex code input type.	N/A
Hex code	Colors may be entered as a six-digit hexadecimal RGB code. Each pair of values represents red, blue, and green, in that order.	`#FFFFFF` `#FF0000` `#00FF00` `#FFC0CB`	white red green pink
RGB	Colors may be entered as RGB values, with three values for red, blue, and green, in that order.	`rgb(255, 255, 255)` `rgb(255, 0, 0)` `rgb(0, 255, 0)` `rgb(255, 192, 203)`	white red green pink
RGBA	Colors may be entered as RGBA values, with three values for red, blue, and green, in that order, in addition to an alpha value that controls transparency.	`rgba(255, 255, 255, 1)` `rgba(255, 0, 0, 1)` `rgba(0, 255, 0, 1)` `rgba(255, 192, 203, 1)`	white red green pink
HSL	Colors may be entered as HSL values, specifying hue, saturation, and lightness.	`hsl(0, 100, 100)` `hsl(0, 100, 50)` `hsl(120, 100, 50)` `hsl(350, 100, 88)`	white red green pink
HSLA	Colors may be entered as HSLA values, specifying hue, saturation, and lightness, in addition to an alpha value that controls transparency.	`hsla(0, 100, 100, 1)` `hsla(0, 100, 50, 1)` `hsla(120, 100, 50, 1)` `hsla(350, 100, 88, 1)`	white red green pink
CSS Color String	A supported color may be written as a simple ~~String.~~string. See Color Strings for examples of all supported colors.	`white` `red` `green` `pink`	white red green pink
Ignition ~~Color~~Theme ~~String~~Colors	Ignition provides a set of themed colors that may be referenced as a string. These colors will change depending on the selected theme. See the Ignition User Manual for an exhaustive list.	`--neutral-10` `--seq-1` `--neutral-100` `--seq-6`	N/A

Sample Color Strings

Color	String	Hex Code	RGB	HSL
	`white`	`#FFFFFF`	`rgb(255, 255, 255)`	`hsl(0, 0, 100)`
	`red`	`#FF0000`	`rgb(255, 0, 0)`	`hsl(0, 100, 50)`
	`green`	`#00FF00`	`rgb(0, 255, 0)`	`hsl(120, 100, 50)`
	`pink`	`#FFC0CB`	`rgb(255, 192, 203)`	`hsl(350, 100, 88)`

Color names and hex values are not case-sensitive.