Quick Start

import { loadColorAssembly } from '@cymbol/colorassembly';
 
// Initialize once at app startup
const api = await loadColorAssembly();

// RGB to other formats
const rgb = { r: 99, g: 102, b: 241 };
 
const hex = api.transforms.rgbToHex(rgb);     // { hex: "#6366F1" }
const hsl = api.transforms.rgbToHsl(rgb);     // { h: 239, s: 84, l: 67 }
const lab = api.transforms.rgbToLab(rgb);     // { l: 49, a: 45, b: -75 }
 
// Convert back
const backToRgb = api.transforms.hexToRgb({ hex: "#6366F1" });

const foreground = { r: 255, g: 255, b: 255 };
const background = { r: 99, g: 102, b: 241 };
 
// Get contrast ratio
const ratio = api.analyze.contrastRatio(foreground, background);
console.log(`Contrast: ${ratio}:1`); // ~4.65:1
 
// Full WCAG check
const wcag = api.analyze.checkContrast(foreground, background);
console.log(wcag.normalTextAA);   // true
console.log(wcag.normalTextAAA);  // false

const brandColor = { r: 99, g: 102, b: 241 };
 
// Get harmonious colors
const complementary = api.generate.complementary(brandColor);
const triadic = api.generate.triadic(brandColor);
 
// Generate shades and tints
const shades = api.generate.shades(brandColor, 5);
const tints = api.generate.tints(brandColor, 5);
 
// Get a full semantic palette for UI
const palette = api.generate.semanticPalette(brandColor, 'dark');

import { loadColorAssembly, Color } from '@cymbol/colorassembly';
 
const api = await loadColorAssembly();
 
// Create a color from hex
const color = new Color({ r: 99, g: 102, b: 241 }, api);
 
// Chain operations
const darker = color.darken(20);
const saturated = color.saturate(10);
 
// Get different formats
console.log(color.toHex());     // { hex: "#6366F1" }
console.log(color.toHSL());     // { h: 239, s: 84, l: 67 }
 
// Accessibility
console.log(color.isLight());   // false
console.log(color.luminance()); // 0.14

import { loadColorAssembly } from '@cymbol/colorassembly';
 
async function createAccessibleButton(brandHex: string) {
  const api = await loadColorAssembly();
  
  const bgRgb = api.transforms.hexToRgb({ hex: brandHex });
  const textRgb = api.analyze.suggestTextColor(bgRgb);
  const contrast = api.analyze.contrastRatio(textRgb, bgRgb);
  const meetsAA = api.analyze.meetsContrastAA(textRgb, bgRgb);
  
  return {
    backgroundColor: api.transforms.rgbToHex(bgRgb).hex,
    color: api.transforms.rgbToHex(textRgb).hex,
    contrastRatio: contrast,
    accessible: meetsAA,
  };
}
 
// Usage
const button = await createAccessibleButton('#6366f1');
console.log(button);
// {
//   backgroundColor: "#6366F1",
//   color: "#FFFFFF",
//   contrastRatio: 4.65,
//   accessible: true
// }

import type { RGB, HSL, WCAGContrastResult } from '@cymbol/colorassembly';
 
function analyzeColor(rgb: RGB): {
  hsl: HSL;
  isAccessible: boolean;
} {
  const hsl = api.transforms.rgbToHsl(rgb);
  const contrast = api.analyze.contrastWithWhite(rgb);
  
  return {
    hsl,
    isAccessible: contrast >= 4.5,
  };
}