A toolkit to clevery abstract, manage, document, export and preview your color palettes

• Features
• Try it
• How to use it
  • (WIP) Color preview / documentation
  • (WIP) Helper functions API
    • lighten(color)
    • darken(color)
• Local development
• Useful resources

To manage your expectations upfront: ColorSandbox is NOT a Color Palette / Color Theme generator

You should rather see it as a visual presentation / documentation / abstraction / export / whatever helper to your already existing Color Palette

The main features are

• Preview your programatically abstracted colors and rules
• See how colors would harmonize together inside your palette behaves
• Check which typography will work in which combination
• (WIP) Access the color abstraction methods via an easy API
• (WIP) Export all posible abstractions to CSS, Sketch, Photoshop, etc
• (WIP) Customize the abstraction rules
• (WIP) Enable multiple palettes
• (WIP) Embed your colors/abstraction combination into your website/document/etc

https://colorsandbox.netlify.com

ColorSandbox consists of two parts - one for previewing/documenting your colors - and one providing you with the matching rules for the abstractions.

In both cases you should start with a simple

yarn add colorsandbox

Simply import the component to your existing React App and pass a color palette object down.

import { ColorSandbox } from 'colorsandbox'

class App extends React.Component {
  const myPalette = {
      'red' : '#ff0000',
      'green' : '#00ff00',
      'blue' : '#0000ff',
      'yellow' : '#ffff00',
  }

  public render(): JSX.Element {
    return (
      <ColorSandbox colors={myPalette} />
    )
  }
}

export default App

Lightens the provided HEX color. It programatically converts it to HSL, removes 10% of Saturation and adds 10% of Lightnes to it. Returns a valid hex color

import { lighten } from 'colorsandbox'

const red = '#ff0000'
const myLightRed = lighten(red)

Darkens the provided HEX color. It programatically converts it to HSL, adds 10% of Saturation and removes 10% of Lightnes from it. Returns a valid hex color

import { darken } from 'colorsandbox'

const red = '#ff0000'
const myDarkRed = darken(red)

This project was bootstrapped with Create React App.

You can find information about how to set up a local devenv over here