Novadesk Docs

Appearance

Font Color ​

A visual reference for the fontColor property on addText elements. Supports solid colors, transparency, and gradients.

Table of Contents ​

Solid Colors ​

RGB ​

javascript
fontColor: "rgb(255, 255, 255)"    // white
fontColor: "rgb(0, 180, 255)"      // blue
fontColor: "rgb(0, 200, 120)"      // green
rgb(255, 255, 255) — White
rgb(0, 180, 255) — Blue
rgb(0, 200, 120) — Green
rgb(255, 100, 50) — Orange
rgb(200, 50, 200) — Purple
rgb(255, 200, 0) — Gold

RGBA (with opacity) ​

Add an alpha value for transparent text:

javascript
fontColor: "rgba(255, 255, 255, 0.8)"     // 80% opaque white
fontColor: "rgba(0, 180, 255, 0.5)"       // 50% opaque blue
fontColor: "rgba(255, 255, 255, 0.15)"    // faint ghost text
rgba(255, 255, 255, 1.0) — Full opacity
rgba(255, 255, 255, 0.8) — Slightly faded
rgba(255, 255, 255, 0.5) — Half transparent
rgba(255, 255, 255, 0.3) — Ghost text
rgba(255, 255, 255, 0.15) — Watermark

Hex Colors ​

javascript
fontColor: "#FFFFFF"       // white (6-digit)
fontColor: "#00B4FF"       // blue
fontColor: "#FF6432CC"     // orange with alpha (8-digit)
fontColor: "#fff"          // white (3-digit shorthand)
#FFFFFF — White
#00B4FF — Blue
#00C878 — Green
#FF6432 — Orange
#C832C8 — Purple

Named Colors ​

Novadesk supports CSS named colors:

javascript
fontColor: "white"
fontColor: "coral"
fontColor: "dodgerblue"
fontColor: "mediumseagreen"
white
coral
dodgerblue
mediumseagreen
gold
hotpink

See Color Formats for the full list of named colors.

Gradient Text ​

Linear Gradient ​

javascript
fontColor: "linearGradient(0, rgb(0,180,255), rgb(100,80,255))"
linearGradient(0, blue → purple)
linearGradient(0, rgb(0,180,255), rgb(100,80,255))
Sunset Gradient
linearGradient(90, rgb(255,100,50), rgb(255,200,0), rgb(0,200,120))

Radial Gradient ​

javascript
fontColor: "radialGradient(rgb(255,200,0), rgb(255,100,0))"
Radial Glow Effect
radialGradient(rgb(255,200,0), rgb(255,100,0))

Code Examples ​

Status Colors ​

javascript
ui.beginUpdate();

ui.addText({
  id: "status-ok",
  text: "● Online",
  x: 16, y: 20,
  width: 120, height: 20,
  fontSize: 13,
  fontColor: "rgb(0, 200, 120)"
});

ui.addText({
  id: "status-warn",
  text: "● Warning",
  x: 16, y: 44,
  width: 120, height: 20,
  fontSize: 13,
  fontColor: "rgb(255, 180, 0)"
});

ui.addText({
  id: "status-err",
  text: "● Offline",
  x: 16, y: 68,
  width: 120, height: 20,
  fontSize: 13,
  fontColor: "rgb(255, 60, 60)"
});

ui.endUpdate();

Faded Secondary Text ​

javascript
ui.addText({
  id: "title",
  text: "CPU Usage",
  x: 16, y: 14,
  width: 200, height: 24,
  fontSize: 16,
  fontWeight: "bold",
  fontColor: "rgb(255, 255, 255)"
});

ui.addText({
  id: "subtitle",
  text: "Updated 2 min ago",
  x: 16, y: 40,
  width: 200, height: 16,
  fontSize: 11,
  fontColor: "rgba(255, 255, 255, 0.4)"
});

Gradient Title ​

javascript
ui.addText({
  id: "gradient-title",
  text: "Novadesk",
  x: 50, y: 50,
  width: 200, height: 40,
  fontSize: 28,
  fontWeight: "bold",
  fontColor: "linearGradient(90, rgb(0,180,255), rgb(100,80,255))"
});

Watermark ​

javascript
ui.addText({
  id: "watermark",
  text: "DEMO",
  x: 80, y: 120,
  width: 200, height: 40,
  fontSize: 32,
  fontWeight: 900,
  fontColor: "rgba(255, 255, 255, 0.08)"
});

Dashboard Card with Color Coding ​

javascript
ui.beginUpdate();

ui.addShape({
  id: "card",
  shapeType: "rectangle",
  x: 16, y: 16,
  width: 280, height: 100,
  fillColor: "rgba(25,25,35,0.95)",
  radiusX: 10, radiusY: 10
});

// Title — white
ui.addText({
  id: "title",
  text: "Network",
  x: 28, y: 28,
  width: 240, height: 20,
  fontSize: 14,
  fontColor: "rgb(255, 255, 255)"
});

// Value — gradient
ui.addText({
  id: "value",
  text: "↑ 12.4 MB/s",
  x: 28, y: 52,
  width: 240, height: 32,
  fontSize: 24,
  fontWeight: "bold",
  fontColor: "linearGradient(90, rgb(0,180,255), rgb(0,200,120))"
});

// Status — green
ui.addText({
  id: "status",
  text: "● Connected",
  x: 28, y: 84,
  width: 120, height: 16,
  fontSize: 11,
  fontColor: "rgb(0, 200, 120)"
});

ui.endUpdate();

Quick Reference ​

I want to... Use
White text fontColor: "rgb(255,255,255)"
Faded/ghost text fontColor: "rgba(255,255,255,0.15)"
Status green fontColor: "rgb(0,200,120)"
Error red fontColor: "rgb(255,60,60)"
Gradient text fontColor: "linearGradient(90, rgb(0,180,255), rgb(100,80,255))"
Named color fontColor: "dodgerblue"