Briklab Docs

Advanced Color Usage ​

Learn advanced color manipulation, ANSI styling, and cross-platform color strategies.

ANSI Color Modes ​

Work with different ANSI color representations:

ts
import { Color } from "@briklab/lib/color";

const color = new Color({ r: 255, g: 100, b: 50 }, "boundary");

// Different ANSI output modes
console.log(color.ansi256());           // 256-color palette
console.log(color.ansiTruecolor());     // True color (24-bit)
console.log(color.wrapAnsi("Hello"));   // Apply color to text

Text Styling with Colors ​

Apply multiple styles to text:

ts
import { Color } from "@briklab/lib/color";

const errorColor = new Color({ r: 255, g: 0, b: 0 }, "boundary");
const successColor = new Color({ r: 0, g: 255, b: 0 }, "boundary");

const errorMsg = errorColor.wrapAnsi("ERROR", { bold: true, underline: true });
const successMsg = successColor.wrapAnsi("SUCCESS", { bold: true });

console.log(errorMsg);
console.log(successMsg);

Live Demo - Color Manipulation ​

Console
No logs yet.

Color Palettes ​

Create color palettes for consistent styling:

ts
import { Color } from "@briklab/lib/color";

class ColorPalette {
  primary: Color;
  secondary: Color;
  error: Color;
  success: Color;
  warning: Color;

  constructor() {
    this.primary = new Color({ r: 66, g: 133, b: 244 }, "boundary");
    this.secondary = new Color({ r: 156, g: 39, b: 176 }, "boundary");
    this.error = new Color({ r: 244, g: 67, b: 54 }, "boundary");
    this.success = new Color({ r: 76, g: 175, b: 80 }, "boundary");
    this.warning = new Color({ r: 255, g: 152, b: 0 }, "boundary");
  }

  hex(name: keyof ColorPalette): string {
    return this[name].hex();
  }
}

const palette = new ColorPalette();
console.log(palette.hex("primary"));  // Get primary color hex

Terminal Output Styling ​

Create styled terminal output: (this example will only work in a node enviornment)

ts
import { Color } from "@briklab/lib/color";

function createStyledOutput(): void {
  const colors = {
    header: new Color({ r: 100, g: 200, b: 255 }, "boundary"),
    body: new Color({ r: 200, g: 200, b: 200 }, "boundary"),
    highlight: new Color({ r: 255, g: 255, b: 0 }, "boundary")
  };

  const header = colors.header.wrapAnsi("=== REPORT ===", { bold: true });
  const content = colors.body.wrapAnsi("Processing data...");
  const notice = colors.highlight.wrapAnsi("Important!");

  console.log(header);
  console.log(content);
  console.log(notice);
}

createStyledOutput();

Next Steps ​