Color Studio

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

What’s Inside

Color Studio generates the following:

• Online documentation with contrast ratios and click-to-copy hex values.
• Several stylesheets that can be imported or linked to within any project:
  • CSS partial with all colors defined as custom properties.
  • SCSS partial with all colors defined as variables.
  • CSS file with all colors defined in separate classes.
• Sketch palette file that can be imported using the Sketch Palettes plugin.
• Custom color tester that runs Color Studio’s formula against any specified value.

Also:

• JSON file with all the color values for further use.
• XML file with all the color values for Android apps.
• iOS asset container with all the color values defined in the .colorset format.
• The preview image below and extensions.

The Palette

Using Color Studio as a Dependency

npm install color-studio

This package is dependency-free.

SCSS

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

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

JavaScript

const PALETTE = require('color-studio')

The above imports the contents of the JSON file.

Development

# 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.

License

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