Frequently Referenced Types

Color

There is no color type in Ignition; colors are simply strings which are formatted in one of the following ways.

Input Type	Description	Examples	Sample Color
Color Picker	Coming soon, this will be filled out when it is added.
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(310, 100, 50)`	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(310, 100, 50, 1)`	White Red Green Pink
Color String	A supported color may be written as a simple String. See Color Strings for examples of all supported colors.	`white` `red` `green` `pink`	White Red Green Pink
Ignition Color String	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`	Very light Very Dark

Sample Color Strings

Color names and hex values are not case-sensitive.

Sample Red Color Strings

Color	String	Hex Code	RGB	HSL
	`red`	`#FF0000`	`rgb(255, 0, 0)`	`hsl(0, 100, 50)`
	`indianRed`	`#CD5C5C`	`rgb(205, 92, 92)`	`hsl(0, 53, 58)`
	`lightCoral`	`#F08080`	`rgb(240, 128, 128)`	`hsl(0,79,72)`
	`salmon`	`#FA8072`	`rgb(250, 128, 114)`	`hsl(6, 93, 71)`
	`darkSalmon`	`#E9967A`	`rgb(233, 150, 122)`	`hsl(15, 72, 70)`
	`lightSalmon`	`#FFA07A`	`rgb(255, 160, 122)`	`hsl(17, 100, 74)`
	`crimson`	`#DC143C`	`rgb(220, 20, 60)`	`hsl(348, 83, 47)`
	`fireBrick`	`#B22222`	`rgb(178, 34, 34)`	`hsl(0, 68, 42)`
	`darkRed`	`#8B0000`	`rgb(139, 0, 0)`	`hsl(0, 100, 27)`

Sample Pink Color Strings

Color	String	Hex Code	RGB	HSL
	`pink`	`#FFC0CB`	`rgb(255, 192, 203)`	`hsl(350, 100, 88)`
	`lightPink`	`#FFB6C1`	`rgb(255, 182, 193)`	`hsl(351, 100, 86)`
	`hotPink`	`#FF69B4`	`rgb(255, 105, 180)`	`hsl(330, 100, 71)`
	`deepPink`	`#FF1493`	`rgb(255, 20, 147)`	`hsl(328, 100, 54)`
	`mediumVioletRed`	`#C71585`	`rgb(199, 21, 133)`	`hsl(322, 81, 43)`
	`paleVioletRed`	`#DB7093`	`rgb(219, 112, 147)`	`hsl(340, 60, 65)`

Sample Orange Color Strings

Color	String	Hex Code	RGB	HSL
	`orange`	`#FFA500`	`rgb(255, 165, 0)`	`hsl(39, 100, 50)`
	`lightSalmon`	`#FFA07A`	`rgb(255, 160, 122)`	`hsl(17, 100, 74)`
	`coral`	`#FF7F50`	`rgb(255, 127, 80)`	`hsl(16, 100, 66)`
	`Tomato`	`#FF6347`	`rgb(255, 99, 71)`	`hsl(9, 100, 64)`
	`orangeRed`	`#FF4500`	`rgb(255, 69, 0)`	`hsl(16, 100, 50)`
	`darkOrange`	`#FF8C00`	`rgb(255, 140, 0)`	`hsl(33, 100, 50)`

Sample Yellow Color Strings

Color	String	Hex Code	RGB	HSL
	`Yellow`	`#FFFF00`	`rgb(255, 255, 0)`	`hsl(60, 100, 50)`
	`Gold`	`#FFD700`	`rgb(255, 215, 0)`	`hsl(51, 100, 50)`
	`lightYellow`	`#FFFFE0`	`rgb(255, 255, 224)`	`hsl(60, 100, 94)`
	`lemonChiffon`	`#FFFACD`	`rgb(255, 250, 205)`	`hsl(54, 100, 90)`
	`lightGoldenrodYellow`	`#FAFAD2`	`rgb(250, 250, 210)`	`hsl(60, 80, 90)`
	`papayaWhip`	`#FFEFD5`	`rgb(255, 239, 213)`	`hsl(37, 100, 92)`
	`moccasin`	`#FFE4B5`	`rgb(255, 228, 181)`	`hsl(38, 100, 85)`
	`peachPuff`	`#FFDAB9`	`rgb(255, 218, 185)`	`hsl(28, 100, 86)`
	`paleGoldenrod`	`#EEE8AA`	`rgb(238, 232, 170)`	`hsl(55, 67, 80)`
	`khaki`	`#F0E68C`	`rgb(240, 230, 140)`	`hsl(54, 77, 75)`
	`darkKahki`	`#BDB76B`	`rgb(189, 183, 107)`	`hsl(56, 38, 58)`

Sample Purple Color Strings

Color	String	Hex Code	RGB	HSL
	`purple`	`#800080`	`rgb(128,0,128)`	`hsl(300, 100, 25)`
	`lavender`	`#E6E6FA`	`rgb(230, 230, 250)`	`hsl(240, 67, 94)`
	`Thistle`	`#D8BFD8`	`rgb(216, 191, 216)`	`hsl(300, 24, 80)`
	`plum`	`#DDA0DD`	`rgb(221, 160, 221)`	`hsl(300, 47, 75)`
	`violet`	`#EE82EE`	`rgb(238, 130, 238)`	`hsl(300, 76, 72)`
	`orchid`	`#DA70D6`	`rgb(218, 112, 214)`	`hsl(302, 59, 65)`
	`fuchsia`	`#FF00FF`	`rgb(255, 0, 255)`	`hsl(300, 100, 50)`
	`magenta`	`#FF00FF`	`rgb(255, 0, 255)`	`hsl(300, 100, 50)`
	`mediumOrchid`	`#BA55D3`	`rgb(186, 85, 211)`	`hsl(288, 59, 58)`
	`mediumPurple`	`#9370DB`	`gb(147, 112, 219)`	`hsl(260, 60, 65)`
	`rebeccaPurple`	`#663399`	`rgb(102, 51, 153)`	`hsl(270, 50, 40)`
	`blueViolet`	`#8A2BE2`	`rgb(138, 43, 226)`	`hsl(271, 76, 53)`
	`darkViolet`	`#9400D3`	`rgb(148, 0, 211)`	`hsl(282, 100, 41)`
	`darkOrchid`	`#9932CC`	`rgb(153, 50, 204)`	`hsl(280, 61, 50)`
	`darkMagenta`	`#8B008B`	`rgb(139, 0, 139)`	`hsl(300, 100, 27)`
	`indigo`	`#4B0082`	`rgb(75, 0, 130)`	`hsl(275, 100, 25)`
	`slateBlue`	`#6A5ACD`	`rgb(106, 90, 205)`	`hsl(248, 53, 58)`
	`darkSlateBlue`	`#483D8B`	`rgb(72, 61, 139)`	`hsl(248, 39, 39)`
	`mediumSlateBlue`	`#7B68EE`	`rgb(123, 104, 238)`	`hsl(249, 80, 67)`

Sample Green Color Strings

Color	String	Hex Code	RGB	HSL
	`green`	`#008000`	`rgb(0, 128, 0)`	`hsl(120, 100, 25)`
	`greenYellow`	`#ADFF2F`	`rgb(173, 255, 47)`	`hsl(84, 100, 59)`
	`chartreuse`	`#7FFF00`	`rgb(127, 255, 0)`	`hsl(90, 100, 50)`
	`lawnGreen`	`#7CFC00`	`rgb(124, 252, 0)`	`hsl(90, 100, 49)`
	`lime`	`#00FF00`	`rgb(0, 255, 0)`	`hsl(120, 100, 50)`
	`limeGreen`	`#32CD32`	`rgb(50, 205, 50)`	`hsl(120, 61, 50)`
	`paleGreen`	`#98FB98`	`rgb(152, 251, 152)`	`hsl(120, 93, 79)`
	`lightGreen`	`#90EE90`	`rgb(144, 238, 144)`	`hsl(120, 73, 75)`
	`mediumSpringGreen`	`#00FA9A`	`rgb(0, 250, 154)`	`hsl(157, 100, 49)`
	`springGreen`	`#00FF7F`	`rgb(0, 255, 127)`	`hsl(150, 100, 50)`
	`mediumSeaGreen`	`#3CB371`	`rgb(60, 179, 113)`	`hsl(147, 50, 47)`
	`seaGreen`	`#2E8B57`	`rgb(46, 139, 87)`	`hsl(146, 50, 36)`
	`forestGreen`	`#228B22`	`rgb(34, 139, 34)`	`hsl(120, 61, 34)`
	`darkGreen`	`#006400`	`rgb(0, 100, 0)`	`hsl(120, 100, 20)`
	`yellowGreen`	`#9ACD32`	`rgb(154, 205, 50)`	`hsl(80, 61, 50)`
	`oliveDrab`	`#6B8E23`	`rgb(107, 142, 35)`	`hsl(80, 60, 35)`
	`olive`	`#808000`	`rgb(128, 128, 0)`	`hsl(60, 100, 25)`
	`darkOliveGreen`	`#556B2F`	`rgb(85, 107, 47)`	`hsl(82, 39, 30)`
	`mediumAquamarine`	`#66CDAA`	`rgb(102, 205, 170)`	`hsl(160, 51, 60)`
	`darkSeaGreen`	`#8FBC8B`	`rgb(143, 188, 139)`	`hsl(115, 27, 64)`
	`lightSeaGreen`	`#20B2AA`	`rgb(32, 178, 170)`	`hsl(177, 70, 41)`
	`darkCyan`	`#008B8B`	`rgb(0, 139, 139)`	`hsl(180, 100, 27)`
	`teal`	`#008080`	`rgb(0, 128, 128)`	`hsl(180, 100, 25)`

Sample Blue Color Strings

Color	String	Hex Code	RGB	HSL
	`blue`	`#0000FF`	`rgb(0, 0, 255)`	`hsl(240, 100, 50)`
	`aqua`	`#00FFFF`	`rgb(0, 255, 255)`	`hsl(180, 100, 50)`
	`cyan`	`#00FFFF`	`rgb(0, 255, 255)`	`hsl(180, 100, 50)`
	`lightCyan`	`#E0FFFF`	`rgb(224, 255, 255)`	`hsl(180, 100, 94)`
	`paleTurquoise`	`#AFEEEE`	`rgb(175, 238, 238)`	`hsl(180, 65, 81)`
	`aquamarine`	`#7FFFD4`	`rgb(127, 255, 212)`	`hsl(160, 100, 75)`
	`turquoise`	`#40E0D0`	`rgb(64, 224, 208)`	`hsl(174, 72, 56)`
	`mediumTurquoise`	`#48D1CC`	`rgb(72, 209, 204)`	`hsl(178, 60, 55)`
	`darkTurquoise`	`#00CED1`	`rgb(0, 206, 209)`	`hsl(181, 100, 41)`
	`cadetBlue`	`#5F9EA0`	`rgb(95, 158, 160)`	`hsl(182, 25, 50)`
	`steelBlue`	`#4682B4`	`rgb(70, 130, 180)`	`hsl(207, 44, 49)`
	`lightSteelBlue`	`#B0C4DE`	`rgb(176, 196, 222)`	`hsl(214, 41, 78)`
	`powderBlue`	`#B0E0E6`	`rgb(176, 224, 230)`	`hsl(187, 52, 80)`
	`lightBlue`	`#ADD8E6`	`rgb(173, 216, 230)`	`hsl(195, 53, 79)`
	`skyBlue`	`#87CEEB`	`rgb(135, 206, 235)`	`hsl(197, 71, 73)`
	`lightSkyBlue`	`#87CEFA`	`rgb(135, 206, 250)`	`hsl(203, 92, 75)`
	`deepSkyBlue`	`#00BFFF`	`rgb(0, 191, 255)`	`hsl(195, 100, 50)`
	`dodgerBlue`	`#1E90FF`	`rgb(30, 144, 255)`	`hsl(210, 100, 56)`
	`cornflowerBlue`	`#6495ED`	`rgb(100, 149, 237)`	`hsl(219, 79, 66)`
	`mediumSlateBlue`	`#7B68EE`	`rgb(123, 104, 238)`	`hsl(249, 80, 67)`
	`royalBlue`	`#4169E1`	`rgb(65, 105, 225)`	`hsl(225, 73, 57)`
	`mediumBlue`	`#0000CD`	`rgb(0, 0, 205)`	`hsl(240, 100, 40)`
	`darkBlue`	`#00008B`	`rgb(0, 0, 139)`	`hsl(240, 100, 27)`
	`navy`	`#000080`	`rgb(0, 0, 128)`	`hsl(240, 100, 25)`
	`midnightBlue`	`#191970`	`rgb(25, 25, 112)`	`hsl(240, 64, 27)`

Sample Brown Color Strings

Color	String	Hex Code	RGB	HSL
	`brown`	`#A52A2A`	`rgb(165, 42, 42)`	`hsl(0, 59, 41)`
	`cornsilk`	`#FFF8DC`	`rgb(255, 248, 220)`	`hsl(48, 100, 93)`
	`blanchedAlmond`	`#FFEBCD`	`rgb(255, 235, 205)`	`hsl(36, 100, 90)`
	`bisque`	`#FFE4C4`	`rgb(255, 228, 196)`	`hsl(33, 100, 88)`
	`navajoWhite`	`#FFDEAD`	`rgb(255, 222, 173)`	`hsl(36, 100, 84)`
	`wheat`	`#F5DEB3`	`rgb(245, 222, 179)`	`hsl(39, 77, 83)`
	`burlyWood`	`#DEB887`	`rgb(222, 184, 135)`	`hsl(34, 57, 70)`
	`tan`	`#D2B48C`	`rgb(210, 180, 140)`	`hsl(34, 44, 69)`
	`rosyBrown`	`#BC8F8F`	`rgb(188, 143, 143)`	`hsl(0, 25, 65)`
	`sandyBrown`	`#F4A460`	`rgb(244, 164, 96)`	`hsl(28, 87, 67)`
	`goldenrod`	`#DAA520`	`rgb(218, 165, 32)`	`hsl(43, 74, 49)`
	`darkGoldenrod`	`#B8860B`	`rgb(184, 134, 11)`	`hsl(43, 89, 38)`
	`peru`	`#CD853F`	`rgb(205, 133, 63)`	`hsl(30, 59, 53)`
	`chocolate`	`#D2691E`	`rgb(210, 105, 30)`	`hsl(25, 75, 47)`
	`saddleBrown`	`#8B4513`	`rgb(139, 69, 19)`	`hsl(25, 76, 31)`
	`sienna`	`#A0522D`	`rgb(160, 82, 45)`	`hsl(19, 56, 40)`
	`maroon`	`#800000`	`rgb(128, 0, 0)`	`hsl(0, 100, 25)`

Sample White Color Strings

Color	String	Hex Code	RGB	HSL
	`white`	`#FFFFFF`	`rgb(255, 255, 255)`	`hsl(0, 0, 100)`
	`snow`	`#FFFAFA`	`rgb(255, 250, 250)`	`hsl(0, 100, 99)`
	`honeyDew`	`#F0FFF0`	`rgb(240, 255, 240)`	`hsl(120, 100, 97)`
	`mintCream`	`#F5FFFA`	`rgb(245, 255, 250)`	`hsl(150, 100, 98)`
	`azure`	`#F0FFFF`	`rgb(240, 255, 255)`	`hsl(180, 100, 97)`
	`aliceBlue`	`#F0F8FF`	`rgb(240, 248, 255)`	`hsl(208, 100, 97)`
	`ghostWhite`	`#F8F8FF`	`rgb(248, 248, 255)`	`hsl(240, 100, 99)`
	`whiteSmoke`	`#F5F5F5`	`rgb(245, 245, 245)`	`hsl(0, 0, 96)`
	`seaShell`	`#FFF5EE`	`rgb(255, 245, 238)`	`hsl(25, 100, 97)`
	`beige`	`#F5F5DC`	`rgb(245, 245, 220)`	`hsl(60, 56, 91)`
	`oldLace`	`#FDF5E6`	`rgb(253, 245, 230)`	`hsl(39, 85, 95)`
	`floralWhite`	`#FFFAF0`	`rgb(255, 250, 240)`	`hsl(40, 100, 97)`
	`ivory`	`#FFFFF0`	`rgb(255, 255, 240)`	`hsl(60, 100, 97)`
	`antiqueWhite`	`#FAEBD7`	`rgb(250, 235, 215)`	`hsl(34, 78, 91)`
	`linen`	`#FAF0E6`	`rgb(250, 240, 230)`	`hsl(30, 67, 94)`
	`lavenderBlush`	`#FFF0F5`	`rgb(255, 240, 245)`	`hsl(340, 100, 97)`
	`mistyRose`	`#FFE4E1`	`rgb(255, 228, 225)`	`hsl(6, 100, 94)`

Sample Gray Color Strings

Color	String	Hex Code	RGB	HSL
	`gray`	`#808080`	`rgb(128, 128, 128)`	`hsl(0, 0, 50)`
	`gainsboro`	`#DCDCDC`	`rgb(220, 220, 220)`	`hsl(0, 0, 86)`
	`lightGray`	`#D3D3D3`	`rgb(211, 211, 211)`	`hsl(0, 0, 83)`
	`silver`	`#C0C0C0`	`rgb(192, 192, 192)`	`hsl(0, 0, 75)`
	`darkGray`	`#A9A9A9`	`rgb(169, 169, 169)`	`hsl(0, 0, 66)`
	`dimGray`	`#696969`	`rgb(105, 105, 105)`	`hsl(0, 0, 41)`
	`lightSlateGray`	`#778899`	`rgb(119, 136, 153)`	`hsl(210, 14, 53)`
	`slateGray`	`#708090`	`rgb(112, 128, 144)`	`hsl(210, 13, 50)`
	`darkSlateGray`	`#2F4F4F`	`rgb(47, 79, 79)`	`hsl(180, 25, 25)`
	`black`	`#000000`	`rgb(0, 0, 0)`	`hsl(0, 0, 0)`

Other Color Strings

Ignition also supports transparency. Add two digits to a hex code or use RGBA or HSLA, or simply use the transparent string.

Color	String	Hex Code	RGBA	HSLA
	`transparent`	`#FFFFFF00`	`rgba(255, 255, 255, 0)`	`hsla(1, 100, 50, 0)`