RGBA Class
The RGBA class represents colors as normalized RGBA values (0.0 to 1.0). It uses a Float32Array internally for efficient FFI interop with the native rendering layer.
Constructor
Create an RGBA color from a Float32Array bufferconstructor(buffer: Float32Array)
4-element array containing [r, g, b, a] values (0.0 to 1.0)
In most cases, use the static factory methods instead of calling the constructor directly.
Factory Methods
Create from normalized RGBA valuesstatic fromValues(r: number, g: number, b: number, a?: number): RGBA
Red component (0.0 to 1.0)
Green component (0.0 to 1.0)
Blue component (0.0 to 1.0)
Alpha component (0.0 to 1.0). Default: 1.0
Create from integer RGBA values (0-255)static fromInts(r: number, g: number, b: number, a?: number): RGBA
Green component (0 to 255)
Blue component (0 to 255)
Alpha component (0 to 255). Default: 255
Create from a hex color stringstatic fromHex(hex: string): RGBA
Hex color: "#RGB", "#RRGGBB", "#RGBA", or "#RRGGBBAA" (with or without #)
#FF00FF) if the hex string is invalid. Create from an existing Float32Arraystatic fromArray(array: Float32Array): RGBA
Properties
Red component (0.0 to 1.0)
Green component (0.0 to 1.0)
Blue component (0.0 to 1.0)
Alpha component (0.0 to 1.0)
Underlying storage buffer
Methods
Convert to integer RGBA valuestoInts(): [number, number, number, number]
Convert to string representationReturns a string like "rgba(0.50, 0.75, 1.00, 1.00)". Check equality with another colorequals(other?: RGBA): boolean
true if all components are equal. Map a function over all componentsmap<R>(fn: (value: number) => R): [R, R, R, R]
const color = RGBA.fromValues(0.5, 0.5, 0.5, 1.0)
const doubled = color.map(x => x * 2) // [1.0, 1.0, 1.0, 2.0]
Color Utilities
Hex Conversion
Convert hex string to RGBAfunction hexToRgb(hex: string): RGBA
#). Convert RGBA to hex stringfunction rgbToHex(rgb: RGBA): string
Color Space Conversion
Convert HSV to RGBfunction hsvToRgb(h: number, s: number, v: number): RGBA
Value/Brightness (0.0 to 1.0)
Color Parsing
Parse a color from string or RGBA objectfunction parseColor(color: ColorInput): RGBA
- Hex colors:
"#FF0000", "#F00", etc.
- CSS color names:
"red", "blue", "transparent", etc.
- Existing
RGBA objects (returned as-is)
CSS Color Names
Supported color names:
- Basic:
black, white, red, green, blue, yellow, cyan, magenta
- Extended:
gray/grey, silver, maroon, olive, lime, aqua, teal, navy, fuchsia, purple, orange
- Bright:
brightblack, brightred, brightgreen, brightblue, brightyellow, brightcyan, brightmagenta, brightwhite
- Special:
transparent (returns rgba(0, 0, 0, 0))
Examples
Creating Colors
import { RGBA } from "@opentui/core"
// From normalized values (0.0 to 1.0)
const red = RGBA.fromValues(1.0, 0.0, 0.0, 1.0)
// From integers (0 to 255)
const green = RGBA.fromInts(0, 255, 0)
// From hex
const blue = RGBA.fromHex("#0000FF")
const blueShort = RGBA.fromHex("#00F")
const semiTransparent = RGBA.fromHex("#FF000080")
// Transparent
const transparent = RGBA.fromValues(0, 0, 0, 0)
Using parseColor
import { parseColor } from "@opentui/core"
const color1 = parseColor("red") // CSS name
const color2 = parseColor("#FF0000") // Hex
const color3 = parseColor("transparent") // Special
const color4 = parseColor(RGBA.fromInts(255, 0, 0)) // Pass-through
Color Manipulation
const color = RGBA.fromHex("#FF8800")
// Access components
console.log(color.r, color.g, color.b, color.a)
// Modify components
color.a = 0.5 // Make semi-transparent
// Convert to integers
const [r, g, b, a] = color.toInts() // [255, 136, 0, 128]
// Convert to hex
import { rgbToHex } from "@opentui/core"
const hex = rgbToHex(color) // "#ff880080"
// Compare colors
const other = RGBA.fromHex("#FF8800")
console.log(color.equals(other)) // false (different alpha)
HSV Color Generation
import { hsvToRgb } from "@opentui/core"
// Create a rainbow
for (let i = 0; i < 360; i += 30) {
const color = hsvToRgb(i, 1.0, 1.0)
console.log(`Hue ${i}:`, color.toString())
}
Using with FrameBuffer
import { OptimizedBuffer, RGBA } from "@opentui/core"
const buffer = OptimizedBuffer.create(80, 24, "unicode")
// Use colors in rendering
const fg = RGBA.fromHex("#00FF00")
const bg = RGBA.fromValues(0.1, 0.1, 0.1, 1.0)
buffer.drawText("Hello", 0, 0, fg, bg)
// Semi-transparent overlay
const overlay = RGBA.fromValues(1, 0, 0, 0.3)
buffer.fillRect(10, 5, 20, 10, overlay)
Type Definitions
type ColorInput = string | RGBA
interface RGBA {
r: number
g: number
b: number
a: number
buffer: Float32Array
toInts(): [number, number, number, number]
toString(): string
equals(other?: RGBA): boolean
map<R>(fn: (value: number) => R): [R, R, R, R]
}