Skip to content
Scripts to transform existing color palettes defined in the Open Color File Format
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

Open Color Tools Transformer

Build status: Build Status

– Work in Progess –

Open Color Transformers help to transform existing color palettes defined in the Open Color File Format and will be released as node module soon.

☞ Learn more about Open Color Tools

The transformers are used to manipulate names, structure and meaning of color palettes. They are often used in combination with opencolor-converters to unbox meaningful color information form existing color definitions in sass, less or other formats.

Looking for a UI to work with the transformers?

Try the Open Color Companion App


All transformers expect two parameters, a parsed oco tree and a configuration object. They return a promise that resolves with a manipulated cloned tree.

(Promised based API and clone vs. direct manipulation are up for discussion).

Default Options

  • filter String or RegExp
    filters entries before apply any transform

  • scope String or Array limits the rename operation to a specific entry type

    • Color
    • Palette
    • Reference


Rename entries in a palette.

Search and replace

searchAndReplace(tree, options)

  • search String or RegExp, replace String

Compound Words

compoundWords(tree, options)

const tree = oco.parse('colorA: #FFF')
return rename(tree, {
  transform: 'dasherize'
}).then((transformed) => {
  • transform String
    applies a transform

    • camelize
    • capitalize
    • dasherize
    • lowdasherize
    • uppercase
    • lowercase
    • humanize
    • clean


autoname(tree, options)

  • pool String defines source for naming information

    • xkcd
    • ntc


Regroup entries in a palette based on their name.


group(tree, options)

Splits a entry name and creates group for each part of the name.

  • separator String · default: ' '
  • direction String · default: 'left'
  • maxDepth Integer or Boolean · default: false


flatten(tree, options)

  • glue String · default: ' '
  • direction String · default: 'left'
  • minDepth Integer or Boolean · default: false


Search and replace

abstractRepeating(tree, options)

Extracts repeating color values and creates references.

  • occurences Integer · default 2
    Number of occurences of a color value needed, before value will be abstracted.
  • autoname Boolean · default: false
    Renames extracted color entries


npm install
npm run test:watch

How to create new transformer

Use the transformer factory to create new transformer functions which introduces some convience. The factory will wrap your transform function. Once called it handles the default options and provide an oco Object which is a clone of the original tree passed to your function. The oco Object is enriched by a transformEntries((entry) => {}) function - use it to iterate over all filtered entries ready for being transformed.

import oco from 'opencolor'
import transformerFactory from './src/factory.js'
const exampleTranfromerDefaultOptions = {
  append: ' - transformed'
const exampleTransformer = transformerFactory(exampleTranfromerDefaultOptions, (tree, options) => {
  return new Promise((resolve, reject) => {
    tree.transformEntries((entry) => { = + options.append

exampleTransformer(oco.parse('color: #FF0000'), {
  append: ' - red'
}).then((transformed) => {
  // color - red: #FF0000


You can’t perform that action at this time.