yeun/open-color

★ 5,524HandlebarsAudience · designerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      UI color palette
      10 brightness levels
    Supported formats
      CSS variables
      Sass and SCSS
      Tailwind CSS
      JSON
    Design tools
      Sketch palette
      Adobe swatches
      Inkscape
    Setup
      Install via npm
      Import your format

mindmap root((repo)) What it does UI color palette 10 brightness levels Supported formats CSS variables Sass and SCSS Tailwind CSS JSON Design tools Sketch palette Adobe swatches Inkscape Setup Install via npm Import your format

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a consistent color system to a web project using CSS custom properties or Sass variables with no design decisions needed.

USE CASE 2

Import Open Color into a Tailwind CSS config to use its palette as your project's color scale.

USE CASE 3

Use the Sketch or Adobe swatch files to apply the same color palette in your design tool mockups.

USE CASE 4

Reference color variables by name in CSS, Less, Stylus, or TypeScript to keep your UI visually consistent.

Tech stack

CSSSassLessTypeScriptTailwind CSSJSON

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Open Color is an open-source color palette designed for user interface work. It provides a curated set of named colors, each available in 10 brightness levels numbered 0 through 9, where 0 is the lightest and 9 is the darkest. The goal is to give designers and developers a consistent set of colors that look good individually and harmonious when used together, all calibrated so colors at the same brightness number feel visually equivalent across different hues. The palette is intended for UI elements like fonts, backgrounds, and borders. The project explicitly notes that you should not use these colors as a main brand identity color, since the values may change in future versions. What makes it practical is the wide range of supported formats. You can use Open Color in CSS custom properties, Sass/SCSS, Less, Stylus, JSON, SVG, TeX, TypeScript, Tailwind CSS, and several design tool formats including Sketch palette files, Inkscape, and Adobe color swatch formats. Each format follows a simple naming convention: the color name plus the brightness number, with a prefix like oc- to keep variable names distinct from anything else in your project. You install it with npm or bower, import the file for your preferred language into your project, then reference the variables by name. The README includes short code examples showing how to apply a gray background and a teal link color in Sass, Less, Stylus, and plain CSS. There are also community-contributed bindings for Julia and Go, meaning developers in those programming languages can use the same color values. Open Color has over 5,500 GitHub stars and works as a practical shortcut for anyone who wants a solid, off-the-shelf color system without making visual design decisions from scratch.

Copy-paste prompts

Prompt 1

How do I install open-color with npm and use it in a Sass project to set a gray background and a teal link color?

Prompt 2

Show me how to add open-color to a Tailwind CSS config so I can use colors like oc-blue-5 in my utility classes.

Prompt 3

Give me the CSS custom property syntax for referencing open-color's teal at brightness level 6 in a plain CSS stylesheet.

Prompt 4

What are the open-color variable naming conventions and how do I use them in a Less stylesheet?

Open on GitHub → Explain another repo

← yeun on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.