Colors

Parsing and applying colour values.

Colors

Color inputs in Cascade accept named values (like orange), hexadecimal strings and RGBA objects. The parseColor helper converts strings into RGBA instances. You can apply colours to renderables directly or through syntax style maps for code‑like UIs.

You can also specify transparency using the alpha component. Colours blend with the terminal background to produce semi‑transparent effects.

import { parseColor, TextRenderable } from "@cascadetui/core"
const accent = parseColor("#19b58f")
const warning = parseColor("orange")
new TextRenderable(renderer, {
  content: "Health check: OK",
  color: accent,
})

You can define alpha values when constructing colours:

import { RGBA } from "@cascadetui/core"
const semi = new RGBA(255, 0, 0, 0.5)

Opacity is also supported as a renderable property, which makes it easy to build layered UIs. If both parent and child define opacity, the effective value is multiplied.

import { BoxRenderable, TextRenderable } from "@cascadetui/core"

const parent = new BoxRenderable(renderer, {
  width: 30,
  height: 8,
  border: true,
  backgroundColor: "#e94560",
  opacity: 0.7,
  padding: 1,
})

const child = new BoxRenderable(renderer, {
  width: "auto",
  height: 4,
  border: true,
  backgroundColor: "#0f3460",
  opacity: 0.5,
  alignItems: "center",
  justifyContent: "center",
})

child.add(new TextRenderable(renderer, { content: "Effective opacity: 0.35" }))
parent.add(child)
renderer.root.add(parent)