Fork me on GitHub

Tool Cool Color Picker

Tool Cool Color Picker is an open source color picker library written in typescript and using web component technologies.

TypeScript
Web Components
Open Source

Basic usage in a browser

Download toolcool-color-picker.min.js

Add the following html to the page:

                            <toolcool-color-picker color="#345FCD"></toolcool-color-picker>
<script type="text/javascript" src="toolcool-color-picker.min.js"></script>
                        

Or with other color formats:

                            <toolcool-color-picker color="rgb(96, 245, 66)"></toolcool-color-picker>
<toolcool-color-picker color="rgba(96, 245, 66, 1)"></toolcool-color-picker>
<toolcool-color-picker color="hsv(110, 73%, 96%)"></toolcool-color-picker>
<toolcool-color-picker color="hsva(110, 73%, 96%, 1)"></toolcool-color-picker>
<toolcool-color-picker color="hsl(110, 90%, 61%)"></toolcool-color-picker>
<toolcool-color-picker color="hsla(110, 90%, 61%, 1)"></toolcool-color-picker>

<script type="text/javascript" src="toolcool-color-picker.min.js"></script>
                        

Color picker popup can be aligned to the right:

                            <toolcool-color-picker color="#1A8585" popup-position="right">
</toolcool-color-picker>
                        

CDN

ToolCool Color Picker is also available in the jsDelivr CND:

                            <toolcool-color-picker color="#e76ff1"></toolcool-color-picker>

<script src="https://cdn.jsdelivr.net/npm/toolcool-color-picker/dist/toolcool-color-picker.min.js"></script>
                    

Node.js usage

Color picker may also be included as a node module like this:

                        npm i toolcool-color-picker
                    

And then you can include it in your application like this:

                        import 'toolcool-color-picker';
                    

NPM package can fe found here.

APIs

You can control the color picker by referencing the toolcool-color-picker HTML tag.

                            <toolcool-color-picker color="#e76ff1" id="color-picker-1">
</toolcool-color-picker>

<script type='text/javascript' src='toolcool-color-picker.min.js'></script>
<script>
    // get the reference
    const $colorPicker = document.getElementById('color-picker-1');

    // change color
    $colorPicker.color = '#FBF330';

    // get color
    console.log($colorPicker.rgba);
</script>
                        

APIs: Listen to the change event

                            // listen to the color change event
const $colorPicker = document.getElementById('color-picker');

// @param {evt} CustomEvent
$colorPicker.addEventListener('change', (evt) => {

    console.log(evt.detail.hex);
    console.log(evt.detail.hex8);
    console.log(evt.detail.rgb);
    console.log(evt.detail.rgba);
    console.log(evt.detail.hsl);
    console.log(evt.detail.hsla);
    console.log(evt.detail.hsv);
    console.log(evt.detail.hsva);
    console.log(evt.detail.color);
});
                        

APIs: Change Color API

The color picker uses the awesome TinyColor library for color manipulation.

Each color format supported by the TinyColor library can be passed in a color property:

                        const $colorPicker = document.getElementById('color-picker');

// HEX format
$colorPicker.color = '#60f542';

// OR HEX with opacity
$colorPicker.color = '#60f542ff';

// OR rgb
$colorPicker.color = 'rgb(96, 245, 66)';

// OR rgb with opacity
$colorPicker.color = 'rgba(96, 245, 66, 1)';

// OR hsv
$colorPicker.color = 'hsv(110, 73%, 96%)';

// OR hsv with opacity
$colorPicker.color = 'hsva(110, 73%, 96%, 1)';

// OR hsl
$colorPicker.color = 'hsl(110, 90%, 61%)';

// OR hsl with opacity
$colorPicker.color = 'hsla(110, 90%, 61%, 1)';
                    

APIs: Get current color in different formats

                    const $colorPicker = document.getElementById('color-picker');
$colorPicker.color = '#367E95';

console.log($colorPicker.hex); // #367E95

console.log($colorPicker.hex8); // #367E95FF

console.log($colorPicker.rgb); // rgb(54, 126, 149)

console.log($colorPicker.rgba); // rgba(54, 126, 149, 1)

console.log($colorPicker.hsl); // hsl(195, 47%, 40%)

console.log($colorPicker.hsla); // hsla(195, 47%, 40%, 1)

console.log($colorPicker.hsv); // hsv(195, 64%, 58%)

console.log($colorPicker.hsva); // hsva(195, 64%, 58%, 1)

You can also access the color object of the TinyColor library. It should only be used to get color values and should not be modified directly.

                        console.log($colorPicker.color);
                    

Styles

It's possible to control color picker styles through CSS variables:

                            :root{
    /* button */
    --tool-cool-color-picker-btn-bg: #b9b9b9;
    --tool-cool-color-picker-btn-border-color: #000;
    --tool-cool-color-picker-btn-border-color-inner: #363636;
    --tool-cool-color-picker-btn-border-radius: 1rem;
    --tool-cool-color-picker-btn-border-radius-inner: 1rem;

    /* popup */
    --tool-cool-color-picker-popup-bg: #b9b9b9;
    --tool-cool-color-picker-popup-border-color: #000;

    /* fields */
    --tool-cool-color-picker-field-border-color: #363636;
    --tool-cool-color-picker-field-label-color: #1a3c6e;
}

It's also possible to use CSS variables as inline styles in the following way:

                            <toolcool-color-picker color="rgb(255, 200, 10)"
style="--tool-cool-color-picker-btn-bg: #fff"></toolcool-color-picker>

Button Size

Button size can be changed using button-width, button-height, and button-padding attributes.

                            <toolcool-color-picker
    color="#B48CF4"
    button-width="5rem"
    button-height="3rem"
    button-padding="5px"></toolcool-color-picker>

It's also possible to use the following predefined values:

Attribute Value The result size
sm 0.875rem
md 1.2rem
lg 1.5rem
xl 2.25rem
2xl 3rem
3xl 3.75rem
4xl 4.5rem

For example:

                            <toolcool-color-picker
    color="#C0F16F"
    button-width="xl"
    button-height="lg"
    button-padding="3px"></toolcool-color-picker>

TypeScript Usage

                        import 'toolcool-color-picker';
import ColorPicker from 'toolcool-color-picker';

// ...

const $colorPicker = document.getElementById('get-color-picker') as ColorPicker;

$colorPicker.addEventListener('change', (evt: Event) => {
    const customEvent = evt as CustomEvent;
    console.log(customEvent.detail.rgba);
});

$colorPicker.hex = '#fefefe';