Color Formats
This guide covers the color and gradient formats. See General Options for applying colors to elements currently supported by Novadesk.
Table of Contents
You can use these formats in color-capable fields such as fontColor, backgroundColor, strokeColor, fillColor, barColor, lineColor, and similar options.
Supported Color Formats
Solid Colors
RGB Format
Use the rgb() function to specify colors with red, green, and blue values (0-255).
Syntax:
javascript
rgb(red, green, blue)Each component uses 0-255.
Examples:
javascript
// Basic RGB colors
color: "rgb(255, 255, 255)" // White
color: "rgb(0, 0, 0)" // Black
color: "rgb(255, 0, 0)" // Red
color: "rgb(0, 255, 0)" // Green
color: "rgb(0, 0, 255)" // Blue
color: "rgb(255, 255, 0)" // Yellow
color: "rgb(0, 255, 255)" // Cyan
color: "rgb(255, 0, 255)" // Magenta
// Custom colors
color: "rgb(100, 150, 200)" // Light blue
color: "rgb(200, 100, 50)" // Orange-brownRGBA Format
Use rgba() to add transparency.
Syntax:
javascript
rgba(red, green, blue, alpha)Alpha supports both styles:
0.0-1.0(CSS-like)0-255(Novadesk-friendly numeric alpha)
Examples:
javascript
// Semi-transparent colors
backgroundcolor: "rgba(0, 0, 0, 0.5)" // 50% transparent black
backgroundcolor: "rgba(255, 255, 255, 0.8)" // 80% opaque white
backgroundcolor: "rgba(255, 0, 0, 0.3)" // 30% opaque red
// Gradient colors
solidcolor: "rgba(255, 100, 0, 180)" // Orange with alpha 180/255
solidcolor2: "rgba(0, 100, 255, 200)" // Blue with alpha 200/255
// Fully opaque (equivalent to RGB)
color: "rgba(255, 255, 255, 1.0)" // White
color: "rgba(0, 0, 0, 1)" // BlackNamed Colors
Novadesk supports a broad list of CSS named colors (case-insensitive). You can use these names directly in any color field.
| Name | Hex |
|---|---|
| aliceblue | #F0F8FF |
| antiquewhite | #FAEBD7 |
| aqua | #00FFFF |
| aquamarine | #7FFFD4 |
| azure | #F0FFFF |
| beige | #F5F5DC |
| bisque | #FFE4C4 |
| black | #000000 |
| blanchedalmond | #FFEBCD |
| blue | #0000FF |
| blueviolet | #8A2BE2 |
| brown | #A52A2A |
| burlywood | #DEB887 |
| cadetblue | #5F9EA0 |
| chartreuse | #7FFF00 |
| chocolate | #D2691E |
| coral | #FF7F50 |
| cornflowerblue | #6495ED |
| cornsilk | #FFF8DC |
| crimson | #DC143C |
| cyan | #00FFFF |
| darkblue | #00008B |
| darkcyan | #008B8B |
| darkgoldenrod | #B8860B |
| darkgray | #A9A9A9 |
| darkgrey | #A9A9A9 |
| darkgreen | #006400 |
| darkkhaki | #BDB76B |
| darkmagenta | #8B008B |
| darkolivegreen | #556B2F |
| darkorange | #FF8C00 |
| darkorchid | #9932CC |
| darkred | #8B0000 |
| darksalmon | #E9967A |
| darkseagreen | #8FBC8F |
| darkslateblue | #483D8B |
| darkslategray | #2F4F4F |
| darkslategrey | #2F4F4F |
| darkturquoise | #00CED1 |
| darkviolet | #9400D3 |
| deeppink | #FF1493 |
| deepskyblue | #00BFFF |
| dimgray | #696969 |
| dimgrey | #696969 |
| dodgerblue | #1E90FF |
| firebrick | #B22222 |
| floralwhite | #FFFAF0 |
| forestgreen | #228B22 |
| fuchsia | #FF00FF |
| gainsboro | #DCDCDC |
| ghostwhite | #F8F8FF |
| gold | #FFD700 |
| goldenrod | #DAA520 |
| gray | #808080 |
| grey | #808080 |
| green | #008000 |
| greenyellow | #ADFF2F |
| honeydew | #F0FFF0 |
| hotpink | #FF69B4 |
| indianred | #CD5C5C |
| indigo | #4B0082 |
| ivory | #FFFFF0 |
| khaki | #F0E68C |
| lavender | #E6E6FA |
| lavenderblush | #FFF0F5 |
| lawngreen | #7CFC00 |
| lemonchiffon | #FFFACD |
| lightblue | #ADD8E6 |
| lightcoral | #F08080 |
| lightcyan | #E0FFFF |
| lightgoldenrodyellow | #FAFAD2 |
| lightgray | #D3D3D3 |
| lightgrey | #D3D3D3 |
| lightgreen | #90EE90 |
| lightpink | #FFB6C1 |
| lightsalmon | #FFA07A |
| lightseagreen | #20B2AA |
| lightskyblue | #87CEFA |
| lightslategray | #778899 |
| lightslategrey | #778899 |
| lightsteelblue | #B0C4DE |
| lightyellow | #FFFFE0 |
| lime | #00FF00 |
| limegreen | #32CD32 |
| linen | #FAF0E6 |
| magenta | #FF00FF |
| maroon | #800000 |
| mediumaquamarine | #66CDAA |
| mediumblue | #0000CD |
| mediumorchid | #BA55D3 |
| mediumpurple | #9370DB |
| mediumseagreen | #3CB371 |
| mediumslateblue | #7B68EE |
| mediumspringgreen | #00FA9A |
| mediumturquoise | #48D1CC |
| mediumvioletred | #C71585 |
| midnightblue | #191970 |
| mintcream | #F5FFFA |
| mistyrose | #FFE4E1 |
| moccasin | #FFE4B5 |
| navajowhite | #FFDEAD |
| navy | #000080 |
| oldlace | #FDF5E6 |
| olive | #808000 |
| olivedrab | #6B8E23 |
| orange | #FFA500 |
| orangered | #FF4500 |
| orchid | #DA70D6 |
| palegoldenrod | #EEE8AA |
| palegreen | #98FB98 |
| paleturquoise | #AFEEEE |
| palevioletred | #DB7093 |
| papayawhip | #FFEFD5 |
| peachpuff | #FFDAB9 |
| peru | #CD853F |
| pink | #FFC0CB |
| plum | #DDA0DD |
| powderblue | #B0E0E6 |
| purple | #800080 |
| rebeccapurple | #663399 |
| red | #FF0000 |
| rosybrown | #BC8F8F |
| royalblue | #4169E1 |
| saddlebrown | #8B4513 |
| salmon | #FA8072 |
| sandybrown | #F4A460 |
| seagreen | #2E8B57 |
| seashell | #FFF5EE |
| sienna | #A0522D |
| silver | #C0C0C0 |
| skyblue | #87CEEB |
| slateblue | #6A5ACD |
| slategray | #708090 |
| slategrey | #708090 |
| snow | #FFFAFA |
| springgreen | #00FF7F |
| steelblue | #4682B4 |
| tan | #D2B48C |
| teal | #008080 |
| thistle | #D8BFD8 |
| tomato | #FF6347 |
| turquoise | #40E0D0 |
| violet | #EE82EE |
| wheat | #F5DEB3 |
| white | #FFFFFF |
| whitesmoke | #F5F5F5 |
| yellow | #FFFF00 |
| yellowgreen | #9ACD32 |
Special keyword:
javascript
color: "transparent" // fully transparentHexadecimal Format
Use hex notation with a # prefix for concise color specification.
Syntax:
javascript
#RGB // 3-digit hex (each digit repeated)
#RGBA // 4-digit hex with alpha
#RRGGBB // 6-digit hex
#RRGGBBAA // 8-digit hex with alphaExamples:
javascript
// 3-digit hex (shorthand)
color: "#fff" // White (#ffffff)
color: "#000" // Black (#000000)
color: "#f00" // Red (#ff0000)
color: "#0f0" // Green (#00ff00)
color: "#00f" // Blue (#0000ff)
// 4-digit hex with alpha
color: "#fff8" // White with alpha 8/15
color: "#0008" // Black with alpha 8/15
// 6-digit hex
color: "#ffffff" // White
color: "#000000" // Black
color: "#ff0000" // Red
color: "#00ff00" // Green
color: "#0000ff" // Blue
color: "#4CAF50" // Material Design Green
// 8-digit hex with alpha
backgroundcolor: "#ff000080" // Red with 50% transparency
backgroundcolor: "#00ff00ff" // Green fully opaqueGradients
Novadesk supports linearGradient(...) and radialGradient(...).
Linear Gradient
Defines a linear transition across 2+ colors. Both linearGradient() and the CSS-style linear-gradient() spellings are accepted.
Syntax:
javascript
linearGradient([angle,] color1, color2, ...)
linear-gradient([angle,] color1, color2, ...)The first argument is an optional angle or direction. If omitted, the default angle is 0 (left to right).
Angle formats:
| Format | Example | Description |
|---|---|---|
| Plain number | 90 | Degrees (legacy, still supported) |
deg suffix | 90deg | Degrees |
rad suffix | 1.5708rad | Radians |
turn suffix | 0.25turn | Turns (1 turn = 360°) |
| Direction keyword | to bottom | CSS-style keyword |
Direction keywords:
| Keyword | Angle |
|---|---|
to right | 0° |
to bottom | 90° |
to left | 180° |
to top | 270° |
to bottom right | 45° |
to top right | 315° |
to bottom left | 135° |
to top left | 225° |
Stop positions:
Each color stop can optionally include a position:
- Percentage:
rgba(255,0,0,1) 25% - Decimal (0.0–1.0):
rgba(255,0,0,1) 0.25
If positions are omitted, stops are evenly distributed (first at 0%, last at 100%, middle ones linearly interpolated).
Examples:
javascript
// Direction keyword
fontColor: "linearGradient(to right, #ff8c00, #ff0080)"
fontColor: "linear-gradient(to bottom, #ff8c00, #ff0080)"
// Degree angle
fontColor: "linearGradient(90deg, #f00, #0f0, #00f)"
fontColor: "linearGradient(0.5turn, rgba(255,0,0,1), rgba(0,0,255,1))"
// With stop positions
fontColor: "linearGradient(to right, rgba(255,0,0,1) 0%, rgba(0,255,0,1) 60%, rgba(0,0,255,1) 100%)"
// Angle omitted (defaults to 0°)
fontColor: "linearGradient(rgba(255,0,0,1), rgba(0,0,255,1))"Radial Gradient
Defines a radial transition across 2+ colors. Both radialGradient() and the CSS-style radial-gradient() spellings are accepted.
Syntax:
javascript
radialGradient(shape, color1, color2, ...)shape is optional:
"circle"(default)"ellipse"
Example:
javascript
fontColor: "radialGradient(circle, #ffff00, #ff0000)"
fontColor: "radialGradient(ellipse, red, rgba(0,0,0,0))"
fontColor: "radialGradient(#00f, #000)" // shape omittedNotes
- Parsing is case-insensitive and tolerates extra spaces.
- Gradients require at least 2 valid color stops.
- Color stops accept optional positions as a percentage (e.g.
25%) or decimal (e.g.0.25). Omitted positions are evenly distributed. - Both CSS-style hyphenated spellings (
linear-gradient,radial-gradient) and the camelCase Novadesk spellings (linearGradient,radialGradient) are accepted. hsl()/hsla()are not currently supported by the built-in parser.