[dist-android]: dist/android/colors.xml [dist-extensions]: dist/extensions/ [dist-ios]: dist/ios/ [dist-json]: dist/colors.json [dist-preview]: dist/meta/preview.png [dist-css-classes]: dist/color-classes.css [dist-css-properties]: dist/color-properties.c

Usage no npm install needed!

<script type="module">
  import colorStudio from '';


Color Studio

The computational color palette for a design language system focused on accessibility and inclusion.

What’s Inside

Color Studio generates the following:


The Palette

Color palette preview

Using Color Studio as a Dependency

npm install color-studio

This package is dependency-free.


@import "~color-studio/dist/color-variables";

button {
  background: $muriel-hot-pink-500;
  color: $muriel-white;


const PALETTE = require('color-studio')

The above imports the contents of the JSON file.


# Generate the JSON file, the stylesheets, and the Sketch palette file
yarn palette

# Build the documentation assets from `docs-source`
yarn docs
yarn docs:watch

# Build and link the Sketch extension
yarn sketch
yarn sketch:watch

# Generate the preview image (by taking a screenshot of the documentation)
yarn meta

All those commands run automatically before every commit and so does the linter.


Color Studio is licensed under GNU General Public License v2.0 (or later).