jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).

Overview

evol-colorpicker · GitHub license npm version

evol-colorpicker is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline or as a popup bound to a text box. It comes with several color palettes, can track selection history and supports "transparent" color. It is a full jQuery UI widget, supporting various configurations and themes.

screenshot 1   screenshot 2   screenshot 3

Check the online demo for several examples.

Table of Contents

  1. Installation
  2. Usage
  3. Theming
  4. Options
  5. Methods
  6. Events
  7. Browser Support
  8. License

Installation

Download or fork evol-colorpicker at GitHub.

git clone https://github.com/evoluteur/colorpicker

or use the npm package:

npm install evol-colorpicker

or install with Bower:

bower install evol-colorpicker

Usage

First, load jQuery (v3.1 or greater), jQuery UI (v1.12.1 or greater), and the plugin (for earlier version of jQuery-UI, use an earlier version of Colorpicker).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol-colorpicker.min.js" type="text/javascript" charset="utf-8"></script>

The widget requires a jQuery UI theme to be present, as well as its own included base CSS file (evol-colorpicker.css). Here we use the "ui-lightness" theme as an example:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">
<link href="css/evol-colorpicker.css" rel="stylesheet" type="text/css">

Now, let's attach it to an existing <input> tag:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mycolor").colorpicker();
    });
</script>

<input style="width:100px;" id="mycolor" />

This will wrap it into a "holder" <div> and add another <div> beside it for the color box:

<div style="width:128px;">
   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
   <div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>

Using the same syntax, the widget can also be instanciated on a <div> or a <span> tag to show inline. In that case the generated HTML is the full palette.

Theming

evol-colorpicker is as easily themeable as any jQuery UI widget, using one of the jQuery UI themes or your own custom theme made with Themeroller.

Light and Dark themes

Options

evol-colorpicker provides several options to customize its behaviour:

color (String)

Used to set the color value.

$("#mycolor").colorpicker({
    color: "#ffffff"
});

Defaults to null.

defaultPalette (String)

Used to set the default color palette. Possible values are "theme" or "web".

$("#mycolor").colorpicker({
    defaultPalette: 'web'
});

Defaults to theme.

displayIndicator (Boolean)

Used to show color value on hover and click inside the palette.

$("#mycolor").colorpicker({
    displayIndicator: false
});

Defaults to true.

hideButton (Boolean)

When binding the colorpicker to a textbox, a colored button will be added to the right of the textbox unless hideButton is set to true. This option doens't have any effect if the colorpicker is bound to a DIV.

$("#mycolor").colorpicker({
    hideButton: true
});

Defaults to false.

history (Boolean)

Used to track selection history (shared among all instances of the colorpicker). The history keeps the last 28 colors selections.

$("#mycolor").colorpicker({
    history: false
});

Defaults to true.

initialHistory (Array strings)

Used to provide a color selection history. Colors are provided as strings of hexadecimal color values.

$("#mycolor").colorpicker({
    initialHistory: ["#ff0000", "#00ff00", "#0000ff"]
});

Defaults to null.

showOn (String)

Have the colorpicker appear automatically when the field receives focus ("focus"), appear only when a button is clicked ("button"), or appear when either event takes place ("both"). This option only takes effect when the color picker is instanciated on a textbox.

$("#mycolor").colorpicker({
    showOn: "button"
});

Defaults to "both".

strings (String)

Used to translate the widget. It is a coma separated list of all labels used in the UI.

$("#mycolor").colorpicker({
    strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
});

Defaults to "Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.".

transparentColor (Boolean)

Allow for selection of the "transparent color". The hexadecimal value for the transparent color is "#0000ffff".

$("#mycolor").colorpicker({
    transparentColor: true
});

Defaults to false.

Methods

clear()

Clears the color value (and close the popup palette if opened).

$("#mycolor").colorpicker("clear");

enable()

Get the currently selected color value (returned as a string).

$("#mycolor").colorpicker("enable");

disable()

Get the currently selected color value (returned as a string).

$("#mycolor").colorpicker("disable");

isDisabled()

Get the currently selected color value (returned as a string).

$("#mycolor").colorpicker("isDisabled");

val([color])

Get or set the currently selected color value (as a string, ie. "#d0d0d0").

var colorValue = $("#mycolor").colorpicker("val");

$("#mycolor").colorpicker("val", "#d0d0d0");

showPalette()

Show the palette (when using the widget as a popup).

$("#mycolor").colorpicker("showPalette");

hidePalette()

Hide the palette (when using the widget as a popup).

$("#mycolor").colorpicker("hidePalette");

Events

change.color

This event is triggered when a color is selected.

$("#mycolor").on("change.color", function(event, color){
    $('#title').css('background-color', color);
});

mouseover.color

This event is triggered when the mouse moves over a color box on the palette.

$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').css('background-color', color);
});

License

Copyright (c) 2022 Olivier Giulieri.

evol-colorpicker is released under the MIT license.

Comments
  • overflow problem when inside popup

    overflow problem when inside popup

    Hi I just started to using this awesome component in my application. I noticed that component doesn't work correctly with modals, screenshot below

    image

    I would be very happy if you could fix this.

    opened by tarlepp 12
  • Issue on invalid color code in textbox

    Issue on invalid color code in textbox

    I use colorpicker connected to textbox. When I try to cut color string from textbox, or write invalid color code (like "#x"), Chrome shows error.

    opened by fspezi 4
  • customTheme overflow

    customTheme overflow

    Color squares overflowing, when adding more than 9 colors to the custom theme

    image

    Code: $('#customTheme').colorpicker({ color: '#f44336', customTheme: ['#f44336','#ff9800','#ffc107','#4caf50','#00bcd4','#3f51b5','#9c27b0', 'white', 'black','#f44336','#ff9800','#ffc107','#4caf50','#00bcd4','#3f51b5','#9c27b0', 'white', 'black'] });

    opened by maxelcalamar 3
  • Strange behavior in IE9

    Strange behavior in IE9

    I look this behavior only in IE9, tested on IE8, but I haven't IE10.

    When I select (or mouse-over) a color in palette, the textbox change color with "rgb(rr, gg, bb);" format string, instead of "#rrggbb". I resolved issue using jQuery.data feature instead of to read style attribute of TD:

    /*!

    • Evol.ColorPicker 1.0.1 *
    • Copyright (c) 2012, Olivier Giulieri *
    • Depends:
    • jquery.ui.core.js
    • jquery.ui.widget.js */

    (function( $, undefined ) {

    var _idx=0, _ie=$.browser.msie?'-ie':'', baseThemeColors=['ffffff','000000','eeece1','1f497d','4f81bd','c0504d','9bbb59','8064a2','4bacc6','f79646'], subThemeColors=['f2f2f2','7f7f7f','ddd9c3','c6d9f0','dbe5f1','f2dcdb','ebf1dd','e5e0ec','dbeef3','fdeada', 'd8d8d8','595959','c4bd97','8db3e2','b8cce4','e5b9b7','d7e3bc','ccc1d9','b7dde8','fbd5b5', 'bfbfbf','3f3f3f','938953','548dd4','95b3d7','d99694','c3d69b','b2a2c7','92cddc','fac08f', 'a5a5a5','262626','494429','17365d','366092','953734','76923c','5f497a','31859b','e36c09', '7f7f7f','0c0c0c','1d1b10','0f243e','244061','632423','4f6128','3f3151','205867','974806'], standardColors=['c00000','ff0000','ffc000','ffff00','92d050','00b050','00b0f0','0070c0','002060','7030a0'], moreColors=[ ['003366','336699','3366cc','003399','000099','0000cc','000066'], ['006666','006699','0099cc','0066cc','0033cc','0000ff','3333ff','333399'], ['669999','009999','33cccc','00ccff','0099ff','0066ff','3366ff','3333cc','666699'], ['339966','00cc99','00ffcc','00ffff','33ccff','3399ff','6699ff','6666ff','6600ff','6600cc'], ['339933','00cc66','00ff99','66ffcc','66ffff','66ccff','99ccff','9999ff','9966ff','9933ff','9900ff'], ['006600','00cc00','00ff00','66ff99','99ffcc','ccffff','ccccff','cc99ff','cc66ff','cc33ff','cc00ff','9900cc'], ['003300','009933','33cc33','66ff66','99ff99','ccffcc','ffffff','ffccff','ff99ff','ff66ff','ff00ff','cc00cc','660066'], ['333300','009900','66ff33','99ff66','ccff99','ffffcc','ffcccc','ff99cc','ff66cc','ff33cc','cc0099','993399'], ['336600','669900','99ff33','ccff66','ffff99','ffcc99','ff9999','ff6699','ff3399','cc3399','990099'], ['666633','99cc00','ccff33','ffff66','ffcc66','ff9966','ff6666','ff0066','d60094','993366'], ['a58800','cccc00','ffff00','ffcc00','ff9933','ff6600','ff0033','cc0066','660033'], ['996633','cc9900','ff9900','cc6600','ff3300','ff0000','cc0000','990033'], ['663300','996600','cc3300','993300','990000','800000','993333'] ];

    $.widget( "evol.colorpicker", {

    version: '1.0',
    
    options: {
        color: null, // example default:'#31859B'
        showOn: 'both', // possible values 'focus','button','both'
        strings: 'Theme Colors,Standard Colors,More Colors,Less Colors'
    },
    
    _create: function() {
        this._paletteIdx=1;
        this._id='evo-cp'+_idx++;
        this._enabled=true;
        var that=this;
        switch(this.element[0].tagName){
            case 'INPUT':
                var color=this.options.color,
                    e=this.element;
                this._isPopup=true;
                this._palette=null;
                if(color!=null){
                    e.val(color);
                }else{
                    var v=e.val();
                    if(v!=''){
                        color=this.options.color=v;
                    }
                }
                e.addClass('colorPicker '+this._id)
                    .wrap('<div style="width:'+(this.element.width()+32)+'px;'
                        +($.browser.msie?'margin-bottom:-21px;':'')
                        +($.browser.mozilla?'padding:1px 0;':'')
                        +'"></div>')
                    .after('<div class="evo-colorind'+($.browser.mozilla?'-ff':_ie)+'" '+
                        (color!=null?'style="background-color:'+color+'"':'')+'></div>')
                    .on('keyup onpaste', function(evt){
                        var c=$(this).val();
                        if(c!=that.options.color){
                            that._setValue(c, true);
                        }
                    });
                var showOn=this.options.showOn;
                if(showOn=='both' || showOn=='focus'){
                    e.on('focus', function(){
                        that.showPalette();
                    })
                }
                if(showOn=='both' || showOn=='button'){
                    e.next().on('click', function(evt){
                        evt.stopPropagation();
                        that.showPalette();
                    });
                }
                break;
            default:
                this._isPopup=false;
                this.element.html(this._paletteHTML())
                    .attr('aria-haspopup','true')
                    .find('.evo-more a').on('click', function(){
                        that._switchPalette();
                    });
                this._palette=this.element;
                this._bindColors();
        }
    },
    
    _paletteHTML: function() {
        var h=[], pIdx=this._paletteIdx;
        h.push('<div class="evo-pop',_ie,' ui-widget ui-widget-content ui-corner-all"',
            this._isPopup?' style="position:absolute"':'', '>');
        h.push('<span>',this['_paletteHTML'+pIdx](),'</span>');
        h.push('<div class="evo-more"><a href="javascript:void(0)">',
            this.options.strings.split(',')[1+pIdx],'</a></div>');
        h.push(this._colorIndHTML(this.options.color,'left'));
        h.push(this._colorIndHTML('','right'));
        h.push('</div>');
        return h.join('');
    },
    
    _colorIndHTML: function(c,fl) {
        var h=[];
        h.push('<div class="evo-color" style="float:left"><div style="');
        h.push(c?'background-color:'+c:'display:none');
        if($.browser.msie){
            h.push('" class="evo-colorbox-ie"></div><span class=".evo-colortxt-ie" ');
        }else{
            h.push('"></div><span ');
        }
        h.push(c?'>'+c+'</span>':'/>');
        h.push('</div>');
        return h.join('');
    },
    
    _paletteHTML1: function() {
        var h=[], labels=this.options.strings.split(','),
            isIE=$.browser.msie,
            oTD1='<td style="background-color:#',
            oTD2='" data-cp-value="#',
            cTD=isIE?'"><div style="width:2px;"></div></td>':'"><span/></td>',
            oTRTH='<tr><th colspan="10" class="ui-widget-content">';
        // base theme colors
        h.push('<table class="evo-palette',_ie,'">',oTRTH,labels[0],'</th></tr><tr>');
        for(var i=0;i<10;i++){ 
            h.push(oTD1, baseThemeColors[i], oTD2, baseThemeColors[i], cTD);
        }
        h.push('</tr>');
        if(!isIE){
            h.push('<tr><th colspan="10"></th></tr>');
        }
        h.push('<tr class="top">');
        // theme colors
        for(var i=0;i<10;i++){ 
            h.push(oTD1, subThemeColors[i], oTD2, subThemeColors[i], cTD);
        }
        for(var r=1;r<4;r++){
            h.push('</tr><tr class="in">');
            for(var i=0;i<10;i++){ 
                h.push(oTD1, subThemeColors[r * 10 + i], oTD2, subThemeColors[r * 10 + i], cTD);
            }           
        }
        h.push('</tr><tr class="bottom">');
        for(var i=40;i<50;i++){ 
            h.push(oTD1, subThemeColors[i], oTD2, subThemeColors[i], cTD);
        }
        h.push('</tr>',oTRTH,labels[1],'</th></tr><tr>');
        // standard colors
        for(var i=0;i<10;i++){ 
            h.push(oTD1, standardColors[i], oTD2, standardColors[i], cTD);
        }
        h.push('</tr></table>');
        return h.join(''); 
    },
    
    _paletteHTML2: function() {
        function toHex(i){
            var h=i.toString(16);
            if(h.length==1){
                h='0'+h;
            }
            return h+h+h;
        };
        var h=[],
            oTD1 = '<td style="background-color:#',
            oTD2 = '" data-cp-value="#',
            cTD=$.browser.msie?'"><div style="width:5px;"></div></td>':'"><span/></td>',
            oTableTR='<table class="evo-palette2'+_ie+'"><tr>',
            cTableTR='</tr></table>';
        h.push('<div class="evo-palcenter">');
        // hexagon colors
        for(var r=0,rMax=moreColors.length;r<rMax;r++){
            h.push(oTableTR);
            var cs=moreColors[r];
            for(var i=0,iMax=cs.length;i<iMax;i++){ 
                h.push(oTD1, cs[i], oTD2, cs[i], cTD);
            }
            h.push(cTableTR);
        }
        h.push('<div class="evo-sep"/>');
        // gray scale colors
        var h2=[];
        h.push(oTableTR);
        for(var i=255;i>10;i-=10){
            h.push(oTD1, toHex(i), oTD2, toHex(i), cTD);
            i-=10;
            h2.push(oTD1, toHex(i), oTD2, toHex(i), cTD);
        }
        h.push(cTableTR,oTableTR,h2.join(''),cTableTR); 
        h.push('</div>');
        return h.join('');
    },
    
    _switchPalette: function() {
        if(this._enabled){
            var idx=(this._paletteIdx==2)?1:2;
            var h=this['_paletteHTML'+idx]();
            this._paletteIdx=idx;
            this._palette.find('.evo-more')
                .prev().html(h).end()
                .children().eq(0).html(this.options.strings.split(',')[this._paletteIdx+1]);
        }
    },
    
    showPalette: function() {
        if(this._enabled){
            $('.colorPicker').not('.'+this._id).colorpicker('hidePalette');
            if(this._palette==null){
                this._palette=this.element.next()
                    .after(this._paletteHTML()).next()
                    .on('click',function(evt){
                        evt.stopPropagation();
                    });
                this._bindColors();
                var that=this;
                $(document.body).on('click.'+this._id,function(evt){
                    if(evt.target!=that.element.get(0)){
                        that.hidePalette();
                    }
                });
                this._palette.find('.evo-more a').on('click', function(evt){
                    that._switchPalette();
                });
            }
        }
        return this;
    },  
    
    hidePalette: function() {
        if(this._isPopup && this._palette){
            $(document.body).off('click.'+this._id);
            var that=this;
            this._palette.off('mouseover click', 'td')
                .fadeOut(function(){
                    that._palette.remove();
                    that._palette=that._cTxt=null;
                })
        }
        return this;
    },
    
    _bindColors: function() {
        var es=this._palette.find('div.evo-color')
        this._cTxt1=es.eq(0).children().eq(0);
        this._cTxt2=es.eq(1).children().eq(0);
        var that=this;
        this._palette
            .on('click', 'td', function(evt){
                if(that._enabled){
                    var c=$(this).data('cp-value');
                    that._setValue(c);
                }
            })
            .on('mouseover', 'td', function(evt){
                if(that._enabled){
                    var c = $(this).data('cp-value');
                    that._setColorInd(c,2);
                    that.element.trigger('mouseover.color', c);
                }
            })
    },
    
    val: function(value) {
        if (typeof value=='undefined') {
            return this.options.color;
        }else{
            this._setValue(value);
            return this;
        }
    },
    
    _setValue: function(c, noHide) {
        this.options.color=c;
        if(this._isPopup){
            if(!noHide){
                this.hidePalette();
            }
            this.element.val(c)
                .next().attr('style', 'background-color:'+c);
        }else{
            this._setColorInd(c,1);
        }
        this.element.trigger('change.color', c);
    },
    
    _setColorInd: function(c,idx) {
        this['_cTxt'+idx].attr('style','background-color:'+c)
            .next().html(c);
    },
    
    _setOption: function(key, value) {
        if(key=='color'){
            this._setValue(value, true);
        }else{
            this.options[key]=value;
        }
    },
    
    enable: function() {
        var e=this.element;
        if(this._isPopup){
            e.removeAttr('disabled');
        }else{
            e.css({'opacity': '1'});
        }
        e.removeAttr('aria-disabled');
        this._enabled=true;
        return this;
    },
    
    disable: function() {
        var e=this.element;
        if(this._isPopup){
            e.attr('disabled', 'disabled');
        }else{
            this.hidePalette();
            e.css({'opacity': '0.3'});
        }
        e.attr('aria-disabled','true');
        this._enabled=false;
        return this;
    },
    
    isDisabled: function() {
        return !this._enabled;
    },
    
    destroy: function() {
        $(document.body).off('click.'+this._id);
        if(this._palette){
            this._palette.off('mouseover click', 'td');
            if(this._isPopup){
                this._palette.remove();
            }
            this._palette=this._cTxt=null;
        }
        if(this._isPopup){
            this.element
                .next().off('click').remove()
                .end().off('focus').unwrap();                       
        }
        this.element.removeClass('colorPicker '+this.id).empty();
        $.Widget.prototype.destroy.call(this);
    }
    

    });

    })(jQuery);

    bug 
    opened by fspezi 3
  • r.widget is not a function

    r.widget is not a function

    evol-colorpicker.min.js:7 Uncaught TypeError: r.widget is not a function at evol-colorpicker.min.js:7 at evol-colorpicker.min.js:7 (anonymous) @ evol-colorpicker.min.js:7 (anonymous) @ evol-colorpicker.min.js:7

    opened by fuadchonora 2
  • Too Many recursion

    Too Many recursion

    I tried to use evol.colorpicker for 3 input elements. I did bind both the events (change.color & mouseover.color) to all three elements. Which causes the error "to much recursion".

    But when i tried with only two of these three then its working fine. And for separate all of three are working fine but at one time if using all three is giving error "to much recursion".

    Please help me out. Thanks Amit

    opened by dsamit 2
  • adding an option to hide the button

    adding an option to hide the button

    The horizontal space (width) the input needs might extend after initialization causing the layout of the page being broken. If this option is set to true (default=false) the showOn option will always be set to "focus".

    opened by 2ndkauboy 2
  • Browser detection causing button to be offset by -23 pixels

    Browser detection causing button to be offset by -23 pixels

    isIE is declared as isIE=!$.support.cssFloat. on my browser. User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0 $.support.cssFloat is undefined and !$.support.cssFloat returns true when the button is created using .colorpicker(), I get this div style="background-color:#ffc000" class="evo-pointer evo-colorind-ie" on Firefox

    i expect to get this div style="background-color:#ffc000" class="evo-pointer evo-colorind-ff" or div style="background-color:#ffc000" class="evo-pointer evo-colorind"

    bug 
    opened by ttwd80 2
  • Missing piece in

    Missing piece in "mouseover.event" + "change.event"

    I want to preview the color while the user move the mouse over colors but I want to finally keep the color only if the user "change" the color.

    What is missing in order to allow this behaviour is alternative: A) a mouseout.event B) calling a mouseover.event with the original color whenever user "mouseout" from a color. C) having a "nochange.event" called when the user close the popup without choosing a color D) having the "change.event" called (with the original color) when the user close the popup without choosing a color.

    What do you think? Am I missing anything that makes this behaviour already available?

    opened by bago 2
  • IE8 : Space added before the color value

    IE8 : Space added before the color value

    After having selected a value with the picker, on IE8 (or IE9 and document mode set on IE8 value) a space is added at the beginning. Working Fine on IE9, FF or Chrome.

    bug 
    opened by cdshardis 2
  • Update dependency jquery-ui to ~1.13.0 - autoclosed

    Update dependency jquery-ui to ~1.13.0 - autoclosed

    WhiteSource Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jquery-ui (source) | ~1.12.1 -> ~1.13.0 | age | adoption | passing | confidence |


    Release Notes

    jquery/jquery-ui

    v1.13.0

    Compare Source

    https://blog.jqueryui.com/2021/10/jquery-ui-1-13-0-released/


    Configuration

    📅 Schedule: At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by WhiteSource Renovate. View repository job log here.

    opened by renovate[bot] 1
  • jQuery UI Cross-site Scripting when refreshing a checkboxradio with an HTML-like initial text label #9

    jQuery UI Cross-site Scripting when refreshing a checkboxradio with an HTML-like initial text label #9

    Dependabot cannot update jquery-ui to a non-vulnerable version

    The latest possible version that can be installed is 1.12.1 because of the following conflicting dependency:

    [email protected] requires jquery-ui@~1.12.1

    The earliest fixed version is 1.13.2.

    https://share.getcloudapp.com/kpu8GWnk

    opened by captproton 0
  •  Dependabot cannot update jquery-ui to a non-vulnerable version

    Dependabot cannot update jquery-ui to a non-vulnerable version

    Dependabot cannot update jquery-ui to a non-vulnerable version

    The latest possible version that can be installed is 1.12.1 because of the following conflicting dependency:

    [email protected] requires jquery-ui@~1.12.1

    The earliest fixed version is 1.13.2. https://share.getcloudapp.com/ApuX2DLb

    opened by captproton 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue provides visibility into Renovate updates and their statuses. Learn more

    Open

    These updates have all been created already. Click a checkbox below to force a retry/rebase of any.


    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
  • Color palette is hidden when opening around very right side of window

    Color palette is hidden when opening around very right side of window

    Issue

    When color picker is located at the very right side of window, right side of palette popup may be hidden

    How to reproduce

    • Go to the online demo page
    • Use 100% window size
    • Click the very right color picker to open palette

    Expected

    • You can see whole palette

    Actual

    • The right side is hidden
    opened by yukimizutani 0
  • Highlight selected color

    Highlight selected color

    I am using your tool, and I want to highlight the color I click in the picker. I tried to do it with CSS but it is not working. My code:

    
    td:focus {
      border: 2px solid black;
    }
    

    Can you please help me out with this. Regards, Varun

    opened by VarunMit 0
Releases(3.4.3)
Owner
Olivier Giulieri
Creative UI engineer with an eye for UX and a passion for model-driven UIs.
Olivier Giulieri
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.

Omnichannel Live Chat Widget UI Components @microsoft/omnichannel-chat-widget is a React-based UI component library which allows you to build your own

Microsoft 14 Dec 15, 2022
TikTokLive-Widget: A socket client/server program that exposes a widget with alerts (such as gifts, followers ...) for a specific user streaming on Tik Tok Live platform

TikTokLive-Widget: A socket client/server program that exposes a widget with alerts (such as gifts, followers ...) for a specific user streaming on Tik Tok Live platform

null 3 Dec 3, 2022
🖱 A JavaScript library for interactively picking DOM elements

pick-dom-element A JavaScript library (written in TypeScript) for interactively picking DOM elements. Usage Create an instance of the ElementPicker cl

Harry Marr 23 Dec 4, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A Zphisher GUI Back-Office Plugin

DISCLAIMER This toolkit contains materials that can be potentially damaging or dangerous for social media. Refer to the laws in your province/country

MicroJoan 158 Dec 23, 2022
From the Linux Foundation office in New York City, welcome to The Untold Stories of Open Source

From the Linux Foundation office in New York City, welcome to The Untold Stories of Open Source. Each week we explore the people who are supporting Open Source projects, how they became involved with it, and the problems they faced along the way.

The Linux Foundation 77 Jan 5, 2023
Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Christopher Chedeau 21 Oct 25, 2022
A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Kalo Pilato 5 Nov 15, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex ?? A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Arnau Espin 2 Oct 1, 2022
JqTree - Tree widget for jQuery

jqTree JqTree is a tree widget. Read more in the documentation. Features Create a tree from JSON data Drag and drop Works on ie9+, firefox, chrome and

Marco Braak 1k Dec 22, 2022
Touch enabled selectable plugin inspired by the jQuery UI widget.

Inspired by the jQuery UI Selectable plugin. Functionality and options are identical to the jQuery UI version with some additions and performance enha

Karl 135 Nov 24, 2022
jQuery UI widget for structured queries like "Contacts where Firstname starts with A and Birthday before 1/1/2000 and State in (CA, NY, FL)"...

Structured-Filter · Structured-Filter is a generic Web UI for building structured search or filter queries. With it you can build structured search co

Olivier Giulieri 238 Jan 6, 2023
A jquery plugin that allows an html page to be converted and/or downloaded into a Microsoft Word Document with an emphasis on performance

googoose A jquery plugin that allows an html page to be converted and/or downloaded into a Microsoft Word Document with an emphasis on performance Abo

Aaron Adel 32 Jan 3, 2023
Download all Moodle files with one click. This is a Chrome extension built to save time and effort from downloading files manually one by one!

Moodle Downloader Extension Moodle downloader extension for Chrome. The extension is tested with both the TUM moodle and the official moodle demo. Not

Zhongpin Wang 8 Nov 15, 2022
Fintoc.js ES Module - Use the Fintoc widget as an ES module

Fintoc.js ES Module Use the Fintoc widget as an ES module. Installation Install using npm! (or your favourite package manager) # Using npm npm install

Fintoc 6 May 13, 2022