yeun/open-color

Color scheme for UI design.

Summary

Open Color is an open-source color scheme built for UI work, with each hue graded on a 0–9 scale so perceived brightness stays roughly constant across colors. The same palette is published in many formats, including CSS, Sass, Less, Stylus, JSON, SVG, and Tailwind, letting it slot into most front-end setups.

What it is useful for

The project is aimed at everyday interface surfaces such as text, backgrounds, and borders rather than brand identity. Because every color shares the same 0-to-9 brightness axis, you can swap $oc-gray-7 for $oc-teal-7 or $oc-indigo-7 and keep the visual weight stable, which is useful for hover, focus, and active states, neutral-plus-accent systems, and consistent grays alongside accent colors. The README also shows the palette working as a Tailwind preset through presets: [require("./open-color.js")], and ships file outputs for design tools such as Sketch (.sketchpalette), Inkscape, Adobe PowerPaint (.rcpx), aco, and clr swatches, so engineering and design can reference the same numbers. The full list of supported formats is CSS, Sass, Less, Stylus, JSON, SVG, TeX, Open Color Tools (.oco), PowerPaint, Sketch, Inkscape, aco, clr, Tailwind, and TypeScript.

How engineers can use it

The documented installation is through npm or bower:

npm install open-color

Then import the matching file for your build pipeline. For Sass or SCSS:

@import 'path/open-color';

.body {
  background-color: $oc-gray-0;
  color: $oc-gray-7;
}

a {
  color: $oc-teal-7;

  &:hover,
  &:focus,
  &:active {
    color: $oc-indigo-7;
  }
}

The prefix changes by language: @oc-gray-0 in Less, oc-gray-0 in Stylus, and var(--oc-gray-0) in plain CSS. Beyond web work, the README points to Go bindings at github.com/jsynacek/go-open-color/opencolor and Julia bindings via OpenColor.jl. One limitation worth respecting from the README: the colors are subject to change in the future, and using an Open Color value as a main identity color is not recommended, so pin the package version and treat the values as design tokens rather than fixed brand assets.