Open Color

Open Color is an open-source color scheme designed specifically for user-interface work such as text, backgrounds, and borders. It provides a curated palette of hues, each with a ten-step brightness spectrum, built so the colors are harmonious with one another and maintain constant perceived brightness across hues at the same level.

Rather than a JavaScript API, the package ships the same palette in a wide range of formats and language bindings: CSS custom properties, Sass, Less, Stylus, JSON, SVG, TeX, a Tailwind preset, TypeScript definitions, and design-tool swatch files for Adobe apps, Sketch, and Inkscape. Developers import the format they need and reference variables following a simple oc-(color)-(number) naming convention.

What You Get

• A curated UI color palette with a consistent 0-9 brightness spectrum per hue
• Variables for CSS custom properties, Sass, Less, and Stylus
• JSON and TypeScript exports plus a Tailwind CSS preset
• Design-tool swatch files for Adobe (.oco/.aco/.clr), Sketch, and Inkscape
• A simple oc-(color)-(number) naming convention shared across all formats

Common Use Cases

• Establishing a base color system for a web UI or design system
• Using consistent color variables across Sass, Less, or CSS stylesheets
• Importing shared swatches into design tools like Sketch or Adobe apps

Under The Hood

Architecture - Open Color is a single-source design-token project. The canonical palette lives in open-color.json, and a compile-templates.js build step renders Handlebars templates under templates/ into every distributed format (open-color.css, .scss, .less, .styl, .js, .d.ts, .oco, .tex, and more). Regenerating all outputs from one data file keeps the palette identical across ecosystems.

Tech Stack - The build tooling is JavaScript with Handlebars templates for code generation. The published artifacts themselves are plain stylesheet/data files with no runtime dependencies, and a TypeScript test (tests/typescript.ts) type-checks the .d.ts declarations.

Code Quality - As a data-and-templates project the surface area is small and well understood; correctness is about the generated output matching the source palette. A TypeScript compile check guards the type definitions, and the many-format outputs are produced deterministically from templates rather than maintained by hand.

API Design - There is essentially no code API to learn; the ergonomics come from the naming convention. Variables follow oc-(color)-(number) (for example $oc-gray-0 or --oc-teal-7), which is predictable and consistent across every format, so switching from Sass to CSS variables requires no mental remapping. Extensive README examples cover each supported environment.