gaetanbt / colorpalette

ColorPalette

An easy tool to display multiples colors on your screen. It can be used to check the similitude between colors.

How to use ?

First, make sure that you include the script before creating any Palette.

<script src="colorpalette.js"></script>
<script>
  // My Palette goes here
</script>

There are two ways to create Palettes, you can pass an array or an object to the method.

1. Array

<script>
var MyPalette = new ColorPalette(['#002a4a', '#17607d', '#fff1ce', '#ff9311', '#d64700'])
</script>

ColorPalette will generate a text area with the color code and stick it to the top of each color layer.

2. Object

If you want to customize the text that is added to the layers, you can pass your colors through an object.

<script>
  var MyPalette = new ColorPalette({
    '#002a4a': 'What',
    '#17607d': 'Do you',
    '#fff1ce': 'Want',
    '#ff9311': 'From me',
    '#d64700': '' // If you don't set a value, the color code will be used
  })
</script>

Configuration

There is some configuration available in the constructor. For now, you can only define a height and a location where to append the palette.

You can do that this way :

<script>
  var MyPalette = new ColorPalette(
    /* My colors */,
    {
      height: '250px', // Default -> 100vh
      appendTo: document.getElementById('my-palette-container') // Default -> document.body
    }
  )
</script>

Credits

Example palette from color.adobe.com

colorpalette's Issues

Some refactoring would be nice

Set style directly on HTML elements

There's still opiniated styles

Things like palette's height should be passed as options and have a default value

Pass options to the constructor

We should be able to set options like :

• height
• where to append the palette
• ...

Related to #2 #3