Introduction

ColorAssembly is a comprehensive color processing library that provides accurate color space transformations, accessibility analysis, and generative color tools—all powered by WebAssembly for near-native performance.

What is ColorAssembly?

ColorAssembly is designed for applications that need fast, accurate color processing:

• Design Tools - Color pickers, palette generators, theme builders
• Accessibility Checkers - WCAG compliance, contrast validation
• Image Processing - Color correction, filters, adjustments
• Data Visualization - Generating distinguishable color scales
• Brand Tools - Color matching, palette extraction

Core Features

15+ Color Spaces

Convert between RGB, HSL, HSV, CMYK, LAB, LCH, XYZ, OKLAB, OKLCH, LMS, and more:

const api = await loadColorAssembly();
 
const rgb = { r: 99, g: 102, b: 241 };
const hsl = api.transforms.rgbToHsl(rgb);    // HSL
const lab = api.transforms.rgbToLab(rgb);    // CIE LAB
const oklch = api.transforms.rgbToOklch(rgb); // OKLCH

Color Generation

Generate harmonious color palettes and variations:

// Color harmonies
const complementary = api.generate.complementary(rgb);
const triadic = api.generate.triadic(rgb);
 
// Shades and tints
const shades = api.generate.shades(rgb, 5);
const tints = api.generate.tints(rgb, 5);
 
// Semantic palette for UI
const palette = api.generate.semanticPalette(rgb, 'dark');

Accessibility Analysis

Check WCAG compliance and ensure accessible color combinations:

// Contrast ratio
const ratio = api.analyze.contrastRatio(foreground, background);
 
// WCAG compliance
const wcag = api.analyze.checkContrast(foreground, background);
console.log(wcag.normalTextAA);  // true/false
 
// Get accessible text color
const textColor = api.analyze.adaptiveTextColor(background);

Color Blindness Simulation

See how colors appear to users with color vision deficiency:

// Simulate different types
const protanopia = api.generate.simulateColorBlindness(rgb, 'protanopia');
 
// Simulate all types at once
const all = api.generate.simulateAllColorBlindness(rgb);

Why WebAssembly?

Color mathematics involves complex calculations—gamma correction, matrix transformations, non-linear functions, and trigonometric operations. While JavaScript can handle these, WebAssembly provides:

• Consistent performance across browsers
• Near-native speed for numerical operations
• Predictable memory usage

TypeScript First

ColorAssembly is built with TypeScript in mind:

import type { RGB, HSL, WCAGContrastResult } from '@cymbol/colorassembly';
 
function checkAccessibility(fg: RGB, bg: RGB): WCAGContrastResult {
  return api.analyze.checkContrast(fg, bg);
}

Auto-generated type definitions provide full IntelliSense support, compile-time error checking, and self-documenting APIs.

Next Steps

• Installation - Get ColorAssembly set up in your project
• Quick Start - Build something in 5 minutes