` beside it for the color box:\n\n```html\n
\n```\n\nUsing the same syntax, the widget can also be instanciated on a `
` or a `
` tag to show inline. In that case the generated HTML is the full palette.\n\n\n\n## Theming\n\nevol-colorpicker is as easily themeable as any jQuery UI widget, using one of the [jQuery UI themes](http://jqueryui.com/themeroller/#themeGallery) or your own custom theme made with [Themeroller](http://jqueryui.com/themeroller/).\n\n\n\n\n\n## Options\n\nevol-colorpicker provides several options to customize its behaviour:\n\n### color (String)\n\nUsed to set the color value.\n\n```javascript\n$(\"#mycolor\").colorpicker({\n color: \"#ffffff\",\n});\n```\n\nDefaults to _null_.\n\n### defaultPalette (String)\n\nUsed to set the default color palette. Possible values are \"theme\" or \"web\".\n\n```javascript\n$(\"#mycolor\").colorpicker({\n defaultPalette: \"web\",\n});\n```\n\nDefaults to _theme_.\n\n### displayIndicator (Boolean)\n\nUsed to show color value on hover and click inside the palette.\n\n```javascript\n$(\"#mycolor\").colorpicker({\n displayIndicator: false,\n});\n```\n\nDefaults to _true_.\n\n### hideButton (Boolean)\n\nWhen binding the colorpicker to a textbox, a colored button will be added to the right of the textbox unless hideButton is set to true.\nThis option doens't have any effect if the colorpicker is bound to a DIV.\n\n```javascript\n$(\"#mycolor\").colorpicker({\n hideButton: true,\n});\n```\n\nDefaults to _false_.\n\n### history (Boolean)\n\nUsed to track selection history (shared among all instances of the colorpicker). The history keeps the last 28 colors selections.\n\n```javascript\n$(\"#mycolor\").colorpicker({\n history: false,\n});\n```\n\nDefaults to _true_.\n\n### initialHistory (Array strings)\n\nUsed to provide a color selection history. Colors are provided as strings of hexadecimal color values.\n\n```javascript\n$(\"#mycolor\").colorpicker({\n initialHistory: [\"#ff0000\", \"#00ff00\", \"#0000ff\"],\n});\n```\n\nDefaults to _null_.\n\n### showOn (String)\n\nHave 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\").\nThis option only takes effect when the color picker is instanciated on a textbox.\n\n```javascript\n$(\"#mycolor\").colorpicker({\n showOn: \"button\",\n});\n```\n\nDefaults to _\"both\"_.\n\n### strings (String)\n\nUsed to translate the widget. It is a coma separated list of all labels used in the UI.\n\n```javascript\n$(\"#mycolor\").colorpicker({\n strings:\n \"Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique.\",\n});\n```\n\nDefaults to _\"Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.\"_.\n\n### transparentColor (Boolean)\n\nAllow for selection of the \"transparent color\". The hexadecimal value for the transparent color is \"#0000ffff\".\n\n```javascript\n$(\"#mycolor\").colorpicker({\n transparentColor: true,\n});\n```\n\nDefaults to _false_.\n\n\n\n## Methods\n\n### clear()\n\nClears the color value (and close the popup palette if opened).\n\n```javascript\n$(\"#mycolor\").colorpicker(\"clear\");\n```\n\n### enable()\n\nGet the currently selected color value (returned as a string).\n\n```javascript\n$(\"#mycolor\").colorpicker(\"enable\");\n```\n\n### disable()\n\nGet the currently selected color value (returned as a string).\n\n```javascript\n$(\"#mycolor\").colorpicker(\"disable\");\n```\n\n### isDisabled()\n\nGet the currently selected color value (returned as a string).\n\n```javascript\n$(\"#mycolor\").colorpicker(\"isDisabled\");\n```\n\n### val([color])\n\nGet or set the currently selected color value (as a string, ie. \"#d0d0d0\").\n\n```javascript\nvar colorValue = $(\"#mycolor\").colorpicker(\"val\");\n\n$(\"#mycolor\").colorpicker(\"val\", \"#d0d0d0\");\n```\n\n### showPalette()\n\nShow the palette (when using the widget as a popup).\n\n```javascript\n$(\"#mycolor\").colorpicker(\"showPalette\");\n```\n\n### hidePalette()\n\nHide the palette (when using the widget as a popup).\n\n```javascript\n$(\"#mycolor\").colorpicker(\"hidePalette\");\n```\n\n\n\n## Events\n\n### change.color\n\nThis event is triggered when a color is selected.\n\n```javascript\n$(\"#mycolor\").on(\"change.color\", function (event, color) {\n $(\"#title\").css(\"background-color\", color);\n});\n```\n\n### mouseover.color\n\nThis event is triggered when the mouse moves over a color box on the palette.\n\n```javascript\n$(\"#mycolor\").on(\"mouseover.color\", function (event, color) {\n $(\"#title\").css(\"background-color\", color);\n});\n```\n\n\n\n## License\n\nCopyright (c) 2024 [Olivier Giulieri](https://evoluteur.github.io/).\n\n**evol-colorpicker** is released under the [MIT license](http://github.com/evoluteur/colorpicker/raw/master/LICENSE.md).\n","readmeFilename":"README.md"}