Color Formats
This guide covers the color and gradient formats 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.
Syntax:
javascript
linearGradient(angle, color1, color2, ...)angle is optional. If omitted, default angle is 0.
Example:
javascript
fontColor: "linearGradient(0, #ff8c00, #ff0080)"
fontColor: "linearGradient(90, #f00, #0f0, #00f)"
fontColor: "linearGradient(rgba(255,0,0,1), rgba(0,0,255,1))" // angle omittedRadial Gradient
Defines a radial transition across 2+ colors.
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.
- Explicit stop positions (percentages) are not supported in gradient strings.
hsl()/hsla()are not currently supported by the built-in parser.