toolcool-color-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.13 • Public • Published

    Tool Cool Color Picker

    GitHub license GitHub package.json version npm NPM Twitter

    Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo at https://toolcool.org/toolcool-color-picker/

    Tool Cool Color Picker

    Table of contents

    Basic usage in a browser

    Download the latest toolcool-color-picker.min.js script:

    Add the following html to the page:

    <toolcool-color-picker color="#e76ff1"></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="rgb(255, 200, 10)" popup-position="right"></toolcool-color-picker>

    CDN

    The 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

    Tool Cool Color Picker

    Color picker may also be included as a node module using npm:

    npm i toolcool-color-picker

    or with Yarn:

    yarn add 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 = '#60f542';
        
        // 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

    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); 

    APIs: Popup

    Open or close color picker popup with the following API:

    <toolcool-color-picker color="#e76ff1" id="color-picker"></toolcool-color-picker>
    <script src="js/toolcool-color-picker.min.js"></script>
    
    <script>
        const $colorPicker = document.getElementById('color-picker');
    
        // open color picker popup
        $colorPicker.opened = true;
    
        // close color picker popup
        $colorPicker.opened = false;
    </script>

    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 width, height, and padding

    Thanks to MGarcia93 for contributing to this section.

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

    <toolcool-color-picker
            color="#B48CF4"
            button-width="2rem"
            button-height="1rem"
            button-padding="2px"></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';

    Usage with React and TypeScript

    import 'toolcool-color-picker';
    
    declare global {
        namespace JSX {
            interface IntrinsicElements {
                'toolcool-color-picker': any;
            }
        }
    }
    
    const ColorPickerExample = () => {
    
        const colorPickerRef = useRef<HTMLElement>();
    
        useEffect(() => {
    
            const colorPicker = colorPickerRef.current;
    
            const onColorChange = (evt: Event) => {
                const customEvent = evt as CustomEvent;
                console.log(customEvent.detail.rgba);
            };
    
            colorPicker?.addEventListener('change', onColorChange);
    
            return () => {
                colorPicker?.removeEventListener('change', onColorChange);
            };
        }, []);
    
        return (
            <toolcool-color-picker ref={ colorPickerRef }  color="#efefef" />;
        )
    };
    
    export default ColorPickerExample;

    Credits

    An awesome TinyColor Library

    License

    MIT license

    Install

    npm i toolcool-color-picker

    DownloadsWeekly Downloads

    12

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    1.01 MB

    Total Files

    88

    Last publish

    Collaborators

    • toolcool.org