Briklab Docs

Color Spaces and Formats ​

Learn to work with different color formats and conversions.

HEX Colors ​

Working with hexadecimal color codes:

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

// Create colors from HEX
const red = new Color("#FF0000");
const blue = new Color("#0000FF");
const green = new Color("#00FF00");

// HEX validation
console.log(red.toHex()); // "#FF0000"
console.log(blue.toString()); // Hex representation

Live demo of color spaces:

Console
No logs yet.

RGB Colors ​

Working with RGB values:

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

// Create from RGB
const white = new Color("rgb(255, 255, 255)");
const black = new Color("rgb(0, 0, 0)");

// Common RGB values
const primary = new Color("rgb(0, 102, 204)");
const success = new Color("rgb(40, 167, 69)");
const warning = new Color("rgb(255, 193, 7)");
const danger = new Color("rgb(220, 53, 69)");

RGBA with Opacity ​

Colors with transparency:

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

// Transparent colors
const semiTransparent = new Color("rgba(0, 0, 0, 0.5)");
const fullyOpaque = new Color("rgba(255, 255, 255, 1)");
const fullyTransparent = new Color("rgba(255, 0, 0, 0)");

// Adjust transparency
const overlay = new Color("rgba(0, 0, 0, 0.75)");

Named Colors ​

Using standard color names:

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

// Common color names
const colors = {
  red: new Color("red"),
  green: new Color("green"),
  blue: new Color("blue"),
  white: new Color("white"),
  black: new Color("black"),
  gray: new Color("gray")
};

HSL Colors ​

Working with Hue, Saturation, Lightness:

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

// Create from HSL
const hslRed = new Color("hsl(0, 100%, 50%)");
const hslGreen = new Color("hsl(120, 100%, 50%)");
const hslBlue = new Color("hsl(240, 100%, 50%)");

// Grayscale (0% saturation)
const lightGray = new Color("hsl(0, 0%, 80%)");
const darkGray = new Color("hsl(0, 0%, 20%)");

Color Conversion ​

Converting between format types:

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

class ColorConverter {
  static convert(value: string) {
    const color = new Color(value);

    console.log("Input:", value);
    console.log("HEX:", color.toHex());
    console.log("RGB:", color.toRGB());
    console.log("HSL:", color.toHSL());

    return color;
  }
}

// Usage
ColorConverter.convert("#FF6B6B");
ColorConverter.convert("rgb(255, 107, 107)");
ColorConverter.convert("hsl(0, 100%, 71%)");

Next Steps ​