colorex

Engine of color picker which you can use to create a component in any javascript framework.

Live demo

NPM

npm install colorex

Start in your website

<link href="//unpkg.com/colorex/dist/colorex.min.css" rel="stylesheet">
<script type='text/javascript' src='//unpkg.com/colorex/dist/colorex.min.js'></script>

Create a simple component

Example from below presents a code to create a simple component with rainbow and gradient pickers.

Live demo @ jsfiddle

let config = {
    picker: '#picker1'
};

let colorpicker = new colorex(config);

<div id="picker1"></div>

Set and get color

Each object of colorex has property, which we can use to set and get color value. Setter allows any html type which presents color. Getter return only hexadecimal value.

colorpicker.color = 'red';
colorpicker.color = '#00ff00';
colorpicker.color = 'rgb(0, 0, 255)';

let color = colorpicker.color; //#0000ff

Create a component with alphablend detail

Adding an alphablend field with the value set to true, we create colorex component with alpha blend picker. Getter of the color property return hexadecimal value with alpha level.

Live demo @ jsfiddle

let config = {
    picker: '.picker2',
    alphablend: true
};

let colorpicker = new colorex(config);

colorpicker.color = '#00ff007f';
colorpicker.color = 'rgb(0, 0, 255, 0.5)';

let color = colorpicker.color; //#0000ff7f

Initial color

Create component with initial value of the color if default color should not be visible on the start.

Live demo @ jsfiddle

let config = {
    picker: document.getElementById("picker3"),
    color: '#760089'
};

let colorpicker = new colorex(config);

let color = colorpicker.color;

Events

All click events on each picker evokes onChange event. Its argument has included new value of color, which can also be read from color field of colorex component.

Live demo @ jsfiddle

let config = {
    picker: document.querySelector('#picker4'),
    onChange: (result) => {
        let color = result.color;
    }
};

let colorpicker = new colorex(config);

Horizontal pickers

Adding a horizontal field with the value set to true, we can change rainbow and alphablend pickers orientation.

Live demo @ jsfiddle

let config = {
    picker: document.querySelector('.picker5'),
    horizontal: true
};

let colorpicker = new colorex(config);

Horizontal custom pickers

Changes orientation is possible for selected picker. You have to build yours own DOM for component and indicate each element of colorex component. Possible is indicate elements by class, id, object of element or any selectors.

Live demo @ jsfiddle

let config = {
    picker: {
        rainbow: '#rainbow',
        gradient: document.getElementById('gradient'),
        alpha: document.querySelector('.alpha')
    },
    alphablend: true,
    horizontal: { rainbow: false, alpha: true }
    // horizontal: { alpha: true }
};

let colorpicker = new colorex(config);

Below is example DOM of component and extend colorex class in CSS. Class of colorex is necesaty on main element, but you can added new classes with overrited styles values. If you don't set it, your component may does not look well.

<div class="colorex">
    <div>
        <div id="rainbow"></div>
        <div id="gradient"></div>
    </div>
    <div class="alpha"></div>
</div>

.colorex *:not(.alpha) {
    display: flex;
}

.colorex {
    flex-direction: column;
    align-items: flex-end;
}

Pixelation

The pixelize is feature with step draw color on pickers and step changing values on them. Pixelize field with the value set to 0 work like configuration without pixalize field.

Live demo @ jsfiddle

let config = {
    picker: '.picker6',
    pixelize: 7
};

let colorpicker = new colorex(config);

Pixelization selected element

Similar to horizontal custom element, user can customize all pickers separately. On this situation own DOM for component is not necessary.

Live demo @ jsfiddle

let config = {
    picker: '.picker6',
    pixelize: { gradient: 10 }
    // pixelize: { gradient: 10, alphablend: 0 }
    // pixelize: { rainbow: 20, gradient: 10, alphablend: 14 }
};

let colorpicker = new colorex(config);

Customize style

To personalize layout of all component you should override style of css. You can look to file colorex.css which style you need do override. You can also presonalize layout by overrided below variables which are predefined and used in colorex.css.

.colorex {
    --border-width: 2px;
    --border-color: lightgrey;
    --selector-border-color: white;
    --space-between: 16px;
    --gradient-selector-size: 30px;
    --gradient-size: 300px;
    --picker-selector-size: 14px;
    --picker-size: 40px;
    --alpha-background: #eeeeee;
}