https://github.com/fivenp/colorsandbox
A toolkit to clevery abstract, manage, document, export and preview your color palettes 🎨
https://github.com/fivenp/colorsandbox
abstraction color colorpalette colorpicker colors colorscheme colorspace colortheme darken generator lighten react sandbox
Last synced: 9 months ago
JSON representation
A toolkit to clevery abstract, manage, document, export and preview your color palettes 🎨
- Host: GitHub
- URL: https://github.com/fivenp/colorsandbox
- Owner: fivenp
- License: other
- Created: 2019-02-17T21:35:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-08-22T19:25:18.000Z (10 months ago)
- Last Synced: 2025-08-22T21:51:09.101Z (10 months ago)
- Topics: abstraction, color, colorpalette, colorpicker, colors, colorscheme, colorspace, colortheme, darken, generator, lighten, react, sandbox
- Language: TypeScript
- Homepage: https://colorsandbox.netlify.com
- Size: 648 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 50
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
A toolkit to clevery abstract, manage, document, export and preview your color palettes
## Table of Contents
- [Features](#features)
- [Try it](#try-it)
- [How to use it](#how-to-use-it)
* [(WIP) Color preview / documentation](#wip-color-preview--documentation)
* [(WIP) Helper functions API](#wip-helper-functions-api)
+ [lighten(color)](#lightencolor)
+ [darken(color)](#darkencolor)
- [Local development](#local-development)
- [Useful resources](#useful-resources)
## 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
[](https://colorsandbox.netlify.com)
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
```shell
yarn add colorsandbox
```
### (WIP) Color preview / documentation
Simply import the component to your existing React App and pass a color palette object down.
```tsx
import { ColorSandbox } from 'colorsandbox'
class App extends React.Component {
const myPalette = {
'red' : '#ff0000',
'green' : '#00ff00',
'blue' : '#0000ff',
'yellow' : '#ffff00',
}
public render(): JSX.Element {
return (
)
}
}
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
```tsx
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
```tsx
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](https://github.com/facebook/create-react-app).
You can find information about how to set up a local devenv over [here](https://github.com/fivenp/colorsandbox/blob/master/CONTRIBUTING.md#setting-up-the-project-locally)
## Useful resources