ColorBench API Documentation

Professional color tools and conversion APIs for developers.

JavaScript Library Integration

Install ColorBench

npm install @colorbench/color-picker

Basic Usage

import { ColorPicker, createColorFromHex } from '@colorbench/color-picker';

// Create color from hex
const color = createColorFromHex('#7b62aa');

// Use ColorPicker component
<ColorPicker 
  defaultValue="#7b62aa"
  onChange={(color) => console.log(color)}
/>

Color Conversion Functions

LAB Color Space

import { createColorFromLab, rgbToLab } from '@colorbench/color-picker';

// Create from LAB values
const labColor = createColorFromLab(50, 20, -30);

// Convert RGB to LAB
const lab = rgbToLab({ r: 123, g: 98, b: 170 });

OKLCH Color Space

import { createColorFromOklch, rgbToOklch } from '@colorbench/color-picker';

// Create from OKLCH values  
const oklchColor = createColorFromOklch(0.7, 0.15, 270);

// Convert RGB to OKLCH
const oklch = rgbToOklch({ r: 123, g: 98, b: 170 });

WCAG Compliance Tools

Contrast Checking

import { getContrastRatio, hasGoodContrast } from '@colorbench/color-picker';

// Check contrast ratio
const ratio = getContrastRatio(color1, color2);

// WCAG compliance check
const isAccessible = hasGoodContrast(textColor, backgroundColor);

Color Harmony Generation

Generate Harmonies

import { generateColorHarmony } from '@colorbench/color-picker';

// Generate complementary colors
const complementary = generateColorHarmony(baseColor, 'complementary');

// Generate triadic palette
const triadic = generateColorHarmony(baseColor, 'triadic');

Professional Features

Delta-E Color Difference

import { calculateDeltaE } from '@colorbench/color-picker';

// Calculate perceptual color difference
const deltaE = calculateDeltaE(color1, color2);
// Result: 0-100 (lower = more similar)

TypeScript Support

ColorBench is fully typed with TypeScript:

interface Color {
  hex: string;
  rgb: RGB;
  hsl: HSL;
  lab: LAB;
  oklch: OKLCH;
  cmyk: CMYK;
}

Browser Support

← Back to ColorBench