API Reference

Complete JavaScript function reference for OmniColor's color utility API. All functions are exposed on the global window.OMNI_COLOR object and documented below.

Overview

OmniColor does not have a hosted API. All functions below are exposed by /assets/js/color-utils.js which loads on every page. You can use them in your own scripts or from the browser console.

Example usage in console:

OMNI_COLOR.hexToRgb('#FF7F50')
// → { r: 255, g: 127, b: 80 }

Format Conversion

hexToRgb(hex)

hexToRgb(hex: string) → { r: number, g: number, b: number }

Convert a HEX color string to RGB. Accepts 3-digit, 4-digit, 6-digit or 8-digit HEX. Invalid hex returns {0,0,0}.

hex string — e.g. '#FF7F50' or 'FF7F50'

hexToRgba(hex, alpha)

hexToRgba(hex: string, alpha?: number) → { r, g, b, a }

Convert HEX to RGBA. Alpha defaults to 1 (opaque).

hex string — HEX color
alpha number (optional) — 0 to 1

rgbToHex(r, g, b)

rgbToHex(r: number, g: number, b: number) → string

Convert RGB channels to uppercase HEX. Channels are clamped to 0-255.

r, g, b number — 0-255

rgbaToHex(r, g, b, a)

rgbaToHex(r, g, b, a?: number) → string

Convert RGBA to 6 or 8-digit HEX. If alpha = 1, returns 6-digit; else 8-digit.

rgbToHsl(r, g, b)

rgbToHsl(r, g, b) → { h: number, s: number, l: number }

Convert RGB to HSL. Hue is 0-360, saturation and lightness are 0-100.

hslToRgb(h, s, l)

hslToRgb(h, s, l) → { r, g, b }

Convert HSL to RGB. Hue is wrapped modulo 360. Saturation and lightness are clamped to 0-100.

rgbToHsv(r, g, b)

rgbToHsv(r, g, b) → { h, s, v }

Convert RGB to HSV. Similar to HSL but uses value (brightness) instead of lightness.

hsvToRgb(h, s, v)

hsvToRgb(h, s, v) → { r, g, b }

Convert HSV to RGB.

rgbToCmyk(r, g, b)

rgbToCmyk(r, g, b) → { c, m, y, k }

Convert RGB to CMYK percentages (0-100 each). Note: this is approximate — screen and print color spaces differ.

cmykToRgb(c, m, y, k)

cmykToRgb(c, m, y, k) → { r, g, b }

Convert CMYK percentages to RGB. Approximate — use with awareness of gamut differences.

Validation

isValidHex(hex)

isValidHex(hex: any) → boolean

Check if a value is a valid HEX color string. Accepts 3, 4, 6 or 8-digit HEX with or without #.

normalizeHex(hex)

normalizeHex(hex: string) → string

Normalize a HEX string to 6-digit uppercase with # prefix. Invalid input returns '#000000'.

Contrast & Accessibility

luminance(hex)

luminance(hex: string) → number

Compute WCAG relative luminance of a color (0 = black, 1 = white). Uses the exact WCAG 2.2 formula with sRGB gamma correction.

contrastRatio(hex1, hex2)

contrastRatio(hex1: string, hex2: string) → string

Compute WCAG contrast ratio as a string with 2 decimals (e.g. "4.53"). Range is 1.00 to 21.00.

hex1, hex2 — any valid HEX strings

Formatting

toRgbString(hex)

toRgbString(hex) → string

Format a HEX as CSS rgb(r, g, b) string.

toHslString(hex)

toHslString(hex) → string

Format a HEX as CSS hsl(h, s%, l%) string.

toCmykString(hex)

toCmykString(hex) → string

Format a HEX as CSS cmyk(c%, m%, y%, k%) notation.

Color Manipulation

mix(hex1, hex2, ratio)

mix(hex1, hex2, ratio?: number) → string

Blend two colors. Ratio 0.5 (default) returns midpoint. 0 = hex1, 1 = hex2.

lighten(hex, amount)

lighten(hex, amount?: number) → string

Increase lightness by N percentage points (default 10). Returns new HEX.

darken(hex, amount)

darken(hex, amount?: number) → string

Decrease lightness by N percentage points (default 10). Returns new HEX.

Harmony

complementary(hex)

complementary(hex) → string

Return the complementary color (hue + 180°).

analogous(hex, angle)

analogous(hex, angle?: number) → string[]

Return 3 analogous colors: [hex - angle, hex, hex + angle]. Default angle 30°.

triadic(hex)

triadic(hex) → string[]

Return 3 triadic colors: [hex, hex+120°, hex+240°].

Clamp Helper

clamp(value, min, max)

clamp(value, min, max) → number

Clamp a number between min and max. Internal utility used by all conversion functions.

Usage Examples

Generate a palette in the console

// Triadic palette from brand blue
const base = '#155EEF';
const triad = OMNI_COLOR.triadic(base);
console.log(triad);
// → ['#155EEF', '#EF155E', '#5EEF15']

// Complementary color
const comp = OMNI_COLOR.complementary(base);
console.log(comp);
// → '#EF5515'

// Check if a color pair is WCAG AA accessible
const ratio = OMNI_COLOR.contrastRatio('#15243B', '#FFFFFF');
console.log(ratio);  // '14.53'

Build a color scale

// Generate 10 shades of any color
function generateShades(baseHex) {
  const rgb = OMNI_COLOR.hexToRgb(baseHex);
  const hsl = OMNI_COLOR.rgbToHsl(rgb.r, rgb.g, rgb.b);
  const shades = [];
  for (let i = 0; i < 10; i++) {
    const l = 5 + i * 10;
    const newRgb = OMNI_COLOR.hslToRgb(hsl.h, hsl.s, l);
    shades.push(OMNI_COLOR.rgbToHex(newRgb.r, newRgb.g, newRgb.b));
  }
  return shades;
}

generateShades('#155EEF');
// → ['#011B44', '#043B8C', '#0A5BD1', '#1576E7', '#3492F3',
//    '#66AEF7', '#98C9FA', '#C8DFFC', '#E6EFFE', '#FAFCFF']

Cross-References