Skip to content

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

License

Notifications You must be signed in to change notification settings

fivenp/colorsandbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ColorSandbox logo

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

Table of Contents

Features

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

Try it

ColorSandbox

https://colorsandbox.netlify.com

How to use it

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

(WIP) Color preview / documentation

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

Props

prop type default required description
colors object N/A yes The palette object defining your color palette

(WIP) Helper functions API

lighten(color)

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)
argument type description
color string Must be a valid hex color - e.g. #ff0000

darken(color)

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)
argument type description
color string Must be a valid hex color - e.g. #ff0000

Local development

This project was bootstrapped with Create React App.

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

Useful resources