OCS for Developers

OCS provides machine-readable color identifiers with multiple output formats. Here's how to use them in your code.

Using OCS Colors in CSS

Every OCS color provides hex, RGB, and native LCH values. Use whichever your target browsers support:

/* Hex (universal) */
.brand-primary { color: #b86830; }

/* RGB */
.brand-primary { color: rgb(184, 104, 48); }

/* LCH (modern browsers) */
.brand-primary { color: lch(55% 55 60); }

/* With OCS ID as a custom property */
:root {
  --ocs-5555-060-S: lch(55% 55 60);
}
.brand-primary { color: var(--ocs-5555-060-S); }

JSON Data Format

OCS colors follow this JSON structure. Use it for design tokens, configuration files, or API responses:

{
  "id": "OCS-7055-025-C",
  "lch": { "l": 70, "c": 55, "h": 25 },
  "srgb": { "r": 214, "g": 152, "b": 109 },
  "hex": "#d6986d",
  "substrate": "C",
  "family": "Orange",
  "isInGamut": true,
  "name": "True Vivid Orange"
}

Parsing OCS IDs

OCS IDs are structured strings. Parse them with a simple regex:

const OCS_REGEX = /^OCS-(\d{2})(\d{2,3})-(\d{3})-([CUSTPF])$/;

function parseOcsId(id: string) {
  const match = id.match(OCS_REGEX);
  if (!match) return null;
  const [, l, c, h, s] = match;
  return {
    lightness: parseInt(l),
    chroma: parseInt(c),
    hue: parseInt(h),
    substrate: s,
  };
}

parseOcsId("OCS-7055-025-C");
// { lightness: 70, chroma: 55, hue: 25, substrate: "C" }

Color Distance (CIEDE2000)

To find the nearest OCS color to an arbitrary value, compute the CIEDE2000 perceptual distance. A ΔE under 1.0 is imperceptible; under 2.0 is a close match.

import { differenceCiede2000 } from "culori";

const distance = differenceCiede2000()(
  { mode: "lch", l: 70, c: 55, h: 25 },
  { mode: "lch", l: 68, c: 52, h: 30 }
);
// ~4.2 — noticeable but close

Gamut Handling

Some OCS colors exceed the sRGB gamut. Always check isInGamut before using hex/RGB values for critical color accuracy. The provided hex is a gamut-clamped preview.