You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.

Color Options in Ignition

The Perspective module, Vision module, and Report module each have color options for customizing the way your projects look. The Color Selector popup has four tabs with options for setting color: 

  • Color Wheel
  • Color Palette
  • RGB Color
  • HSL Color

Each of these four selectors will give you different options for selecting a single color for your properties. You can combine these in interesting ways with your styles to change foreground, background, border, and many properties. If you want to find multiple colors to create matching or complimentary color selections, you can easily find online color selectors like the one from Sessions College to get color codes and complimentary colors based on a simple selector.

On this page ...



Color Wheel

The Wheel tab brings up the Color Wheel. There are a few distinct areas to make selections to set up your color.

  • The outer ring shows the color spectrum similar to the Hue in a HSL color selection. You can click and drag anywhere in the outer right to select your hue.
  • The inner triangle lets you choose shade of the color selected in the outer ring. The edges of the triangle represent the luminosity, and moving toward the center represents saturation.
  • The Alpha slider and value allow you to set the transparency level. 0 is completely transparent, and 100 is completely opaque.
  • The Hex value representing the RGB color will be shown at the bottom of the tab. You can manually change this or see it update as you change your selections above. If you change the Alpha, a fourth set of values will be added to the Hex.

To find a color, first click and drag the line in the outer ring. Next click within the triangle.

 


Color Palette

The Color Palette tab offers a more simple view of colors. Just click on the color you want for your item. The Hex equivalent is also given at the bottom of the palette.

Recently selected colors will show in the row across the top of the palette, and you can import/export your palettes if you have a custom color scheme.

Exporting the Palette

You can export the Color Palette by clicking the export button in the bottom left. The file will be saved as a .CSV file type. You can edit the file in any text editor and import it back into Ignition.

The .CSV file for the standard Color Palette in Ignition is as follows. Each color has a Hex RGB (red, green, blue) or RGBA (red, green, blue, alpha) value in quotation marks and is separated by commas. You can save this file as a .txt file or a .CSV and Ignition will be able to import it. Add as many rows or columns as you want.

"#FFFFFF","#D5D5D5","#AAAAAA","#808080","#555555","#2B2B2B","#000000"
"#FFCCCC","#FF8A8A","#FF4747","#FF0000","#D90000","#AC0000","#800000"
"#FFE8CC","#FFCA8A","#FFAC47","#FF8C00","#D97700","#AC5F00","#804600"
"#FFFFCC","#FFFF8A","#FFFF47","#FFFF00","#D9D900","#ACAC00","#808000"
"#CCFFCC","#8AFF8A","#47FF47","#00FF00","#00D900","#00AC00","#008000"
"#CCFFFF","#8AFFFF","#47FFFF","#00FFFF","#00D9D9","#00ACAC","#008080"
"#CCCCFF","#8A8AFF","#4747FF","#0000FF","#0000D9","#0000AC","#000080"
"#FFCCFF","#FF8AFF","#FF47FF","#FF00FF","#D900D9","#AC00AC","#800080"

Importing a Palette

You can also import existing .CSV files to the Color Palette. The Palette import function will also accept a .txt file if it is formatted correctly. 

In this example, we modified the colors in the fourth and fifth rows of the original palette. 

You can also import a new palette as long as the file contains Hex color values in quotation marks, separated by commas. The Color Palette is not limited in rows or columns. You can import a .CSV file with more colors than the standard palette in Ignition.

In this example, we added column with a 50% opacity of the first color in each row. We also added a new row with colors in the purple color family. 

Each color has a Hex RGB (red, green, blue) or RGBA (red, green, blue, alpha) value in quotation marks and is separated by commas. Add as many rows or columns as you want.

"FFFFFF80","#FFFFFF","#D5D5D5","#AAAAAA","#808080","#555555","#2B2B2B","#000000"
"FFCCCC80","#FFCCCC","#FF8A8A","#FF4747","#FF0000","#D90000","#AC0000","#800000"
"FFE8CC80","#FFE8CC","#FFCA8A","#FFAC47","#FF8C00","#D97700","#AC5F00","#804600"
"FFFFCC80","#FFFFCC","#FFFF8A","#FFFF47","#FFFF00","#D9D900","#ACAC00","#808000"
"A4EDDE80","#A4EDDE","#79EFD7","#82EED8","#5BD5BC","#299C85","#1A6A5A","#174139"
"CCFFFF80","#CCFFFF","#8AFFFF","#47FFFF","#00FFFF","#00D9D9","#00ACAC","#008080"
"CCCCFF80","#CCCCFF","#8A8AFF","#4747FF","#0000FF","#0000D9","#0000AC","#000080"
"DABEF680","#DABEF6","#C193EE","#9C52E5","#8647C3","#601AA7","#4A088B","#3C0B6D"
"FFCCFF80","#FFCCFF","#FF8AFF","#FF47FF","#FF00FF","#D900D9","#AC00AC","#800080"


RGB Color

The third tab on the Color options is RGBA (red, green, blue, and alpha). RBG refers to a system for representing the colors to be used on a computer display. Red, green, and blue can be combined in various proportions to obtain any color in the visible spectrum. The color is specified by an RGB value, commonly expressed in either of two ways. The decimal format is a comma separated string with one number for each color ranging from 0 to 255. For example, "0,255,0" represents green. The other is a Hex format starting with a # symbol and then listing two-digit hex values for each color, ranging from 00 to FF. For example,"#00FF00" represents green.

RGBA color values are an extension of RGB color values with an alpha channel, which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). In scripting the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). In this color selector, it follows the same rules as the other colors.

In the RGB tab, you can change the color by either dragging the selector inside the color box, using the up and down arrows next to a color box, or typing in a value.

The Hex value for the color will be shown at the bottom of the tab.


HSL Color

The third tab on the Color options is HSL (hue, saturation, and luminosity). HSL settings are used to adjust the way a color is displayed. Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Luminosity is also a percentage; 0% is black, 50% is the selected Hue, and 100% is white. Alpha is a percentage value; 0% means completely transparent and 100% is a solid color based on the other three options.

In the HSL tab, you can change the color by either dragging the selector inside the color box, using the up and down arrows next to a color box, or typing in a value. 

The Hex value for the color will be shown at the bottom of the tab.




  • No labels