simple-colorwalldeprecated

simple-colorwall is a lightweight JavaScript open source color generator to create a simple color wall with an arbitrary number colors.

Usage no npm install needed!

<script type="module">
  import simpleColorwall from 'https://cdn.skypack.dev/simple-colorwall';
</script>

README

simple-colorwall

bower npm Build tool GitHub license

simple-colorwall is a lightweight JavaScript open source color generator to create a simple color wall with an arbitrary number colors. Size: 12.6 KB

Screenshot

The sliders are changing the rgb values simple-colorwall screenshot

For more simplicity you can deactivate the sliders and the logo simple-colorwall screenshot

Demo

Click on this link to find some preconfigured simple-colorwalls with good known colors and logos. Demo Link

Install

Bower

bower install simple-colorwall

NPM

npm install simple-colorwall

The oldschool way

<script src="simple-colorwall.min.js" type="text/javascript" charset="utf-8"></script>

Usage

Create a div element which has color-wall-container as id and invoke the simple-colorwall function.

<div id="color-wall-container"> </div>

SimpleColorWall({
    colors : [
        '#2C7AA5',
        '#3996C4',
        '#055B74',
        '#013442',
        '#F0F3F4'
    ],
    imgPreview: 'bower.svg'
});

To create 5 random colors just omit the options parameter

SimpleColorWall();

Options

This parameter is an object. Also, every option is optional!

Option Default Type Description
colors null array (optional) A array full of hex color strings
imgPreview false string (optional) Will show a little img on the top left corner
colorName true boolean (optional) Activates and deactivates the automatic color name detection
sliders true boolean (optional) Activates and deactivates sliders
autoGenerateCSS true boolean (optional) simple-colorwall needs a bit of CSS, if you want to use your own style just pass a false to it.
dblclickForNewColumn  true boolean (optional) deactivates and activates a click event for creating a new column at runtime

to translate simple-colorwall, you can also provide these options:

Option Default Type
pleaseInsert 'Please insert a valid 6 digit hex color with a # as prefix.' string
isNotValidColor 'is not a valid color.' string

How to use the UI

  • Every hex value is editable via click and changes the value on the fly!
  • If you hit a hex value which has a color name it will displayed.
  • Double click on a column to add a new one.
  • You can use the url to send your colors to others.
  • Hover over a column to make the sliders visible.

How to build your own version

If you would like to build your own version of simple-colorwall, the only thing you need to do is to follow the steps below.

$ cd simple-colorwall
$ npm install
$ grunt

Browser compatibility

  • Chrome 7+
  • FireFox 23+
  • Safari 5.1+
  • Opera 15+
  • Internet Explorer (Sry I do not have a Windows Machine)

Known Issues

Not touch/mobile friendly!

What´s new in 0.8.6 ?

  • New UI Events
  • Dropped jQuery support
  • Created a project structure

Author

Oliver Jessner @oliverj_net, Website

Copyright © 2015 - 2016