{"id":20146194,"url":"https://github.com/evoluteur/colorpicker","last_synced_at":"2025-10-25T06:06:49.237Z","repository":{"id":3480582,"uuid":"4536006","full_name":"evoluteur/colorpicker","owner":"evoluteur","description":"jQuery UI widget for color picking with web colors, theme colors, and history (similar to the one in Microsoft Office 2010).","archived":false,"fork":false,"pushed_at":"2025-01-04T08:57:43.000Z","size":442,"stargazers_count":298,"open_issues_count":6,"forks_count":126,"subscribers_count":24,"default_branch":"main","last_synced_at":"2025-04-13T22:39:24.187Z","etag":null,"topics":["color","color-palette","color-palettes","color-picker","color-selector","color-theme","colorpicker","colorpickerview","colors","javascript","jquery","jquery-plugin","jquery-ui","microsoft-office","office","palette","picker","picker-component","ui-components","widget"],"latest_commit_sha":null,"homepage":"http://evoluteur.github.io/colorpicker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evoluteur.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"evoluteur"}},"created_at":"2012-06-03T09:10:15.000Z","updated_at":"2025-03-12T13:42:19.000Z","dependencies_parsed_at":"2024-06-18T15:25:45.227Z","dependency_job_id":"8b659764-470d-44ca-8304-9bc424bcb84c","html_url":"https://github.com/evoluteur/colorpicker","commit_stats":{"total_commits":246,"total_committers":18,"mean_commits":"13.666666666666666","dds":0.6504065040650406,"last_synced_commit":"6f2754d7846e3ee154f3667299c76f00d7b3baba"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fcolorpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fcolorpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fcolorpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fcolorpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evoluteur","download_url":"https://codeload.github.com/evoluteur/colorpicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254035818,"owners_count":22003649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","color-palette","color-palettes","color-picker","color-selector","color-theme","colorpicker","colorpickerview","colors","javascript","jquery","jquery-plugin","jquery-ui","microsoft-office","office","palette","picker","picker-component","ui-components","widget"],"created_at":"2024-11-13T22:20:25.038Z","updated_at":"2025-10-25T06:06:44.201Z","avatar_url":"https://github.com/evoluteur.png","language":"JavaScript","readme":"# evol-colorpicker \u0026middot; [![GitHub license](https://img.shields.io/github/license/evoluteur/colorpicker)](https://github.com/evoluteur/colorpicker/blob/master/LICENSE.md) [![npm version](https://img.shields.io/npm/v/evol-colorpicker)](https://www.npmjs.com/package/evol-colorpicker)\n\n**evol-colorpicker** is a web color picker which looks like the one in Microsoft Office 2010.\nIt can be used inline or as a popup bound to a text box.\nIt comes with several color palettes, can track selection history and supports \"transparent\" color.\nIt is a full jQuery UI widget, supporting various configurations and themes.\n\n![screenshot 1](https://raw.github.com/evoluteur/colorpicker/master/screenshots/screenshot1.png) \u0026nbsp; ![screenshot 2](https://raw.github.com/evoluteur/colorpicker/master/screenshots/screenshot2.png) \u0026nbsp; ![screenshot 3](https://raw.github.com/evoluteur/colorpicker/master/screenshots/screenshot3.png)\n\nCheck the [online demo](https://evoluteur.github.io/colorpicker/index.html) for several examples.\n\n### Table of Contents\n\n1. [Installation](#Installation)\n2. [Usage](#Usage)\n3. [Theming](#Theming)\n4. [Options](#Options)\n5. [Methods](#Methods)\n6. [Events](#Events)\n7. [License](#License)\n\nEncourage this project by [becoming a sponsor](https://github.com/sponsors/evoluteur).\n\n\u003ca name=\"Installation\"\u003e\u003c/a\u003e\n\n## Installation\n\nDownload or fork **evol-colorpicker** at [GitHub](https://github.com/evoluteur/colorpicker).\n\n```\ngit clone https://github.com/evoluteur/colorpicker\n```\n\nor use the [npm package](https://www.npmjs.com/package/evol-colorpicker):\n\n```\nnpm install evol-colorpicker\n```\n\nor install with Bower:\n\n```\nbower install evol-colorpicker\n```\n\nor use the [nuget package](https://www.nuget.org/packages/evol-colorpicker):\n\n```\ndotnet add package evol-colorpicker\n```\n\n\u003ca name=\"Usage\"\u003e\u003c/a\u003e\n\n## Usage\n\nFirst, load [jQuery](http://jquery.com/) (v3.1 or greater), [jQuery UI](http://jqueryui.com/) (v1.12.1 or greater), and the plugin (for earlier version of jQuery-UI, use an earlier version of Colorpicker).\n\n```html\n\u003cscript\n  src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js\"\n  type=\"text/javascript\"\n  charset=\"utf-8\"\n\u003e\u003c/script\u003e\n\u003cscript\n  src=\"https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js\"\n  type=\"text/javascript\"\n  charset=\"utf-8\"\n\u003e\u003c/script\u003e\n\u003cscript\n  src=\"js/evol-colorpicker.min.js\"\n  type=\"text/javascript\"\n  charset=\"utf-8\"\n\u003e\u003c/script\u003e\n```\n\nThe widget requires a jQuery UI theme to be present, as well as its own included base CSS file ([evol-colorpicker.css](http://github.com/evoluteur/colorpicker/raw/master/css/evol-colorpicker.css)). Here we use the \"ui-lightness\" theme as an example:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/ui-lightness/jquery-ui.css\"\n/\u003e\n\u003clink href=\"css/evol-colorpicker.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n```\n\nNow, let's attach it to an existing `\u003cinput\u003e` tag:\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n  $(document).ready(function () {\n    $(\"#mycolor\").colorpicker();\n  });\n\u003c/script\u003e\n\n\u003cinput style=\"width:100px;\" id=\"mycolor\" /\u003e\n```\n\nThis will wrap it into a \"holder\" `\u003cdiv\u003e` and add another `\u003cdiv\u003e` beside it for the color box:\n\n```html\n\u003cdiv style=\"width:128px;\"\u003e\n  \u003cinput style=\"width:100px;\" id=\"mycolor\" class=\"colorPicker evo-cp0\" /\u003e\n  \u003cdiv class=\"evo-colorind\" style=\"background-color:#8db3e2\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nUsing the same syntax, the widget can also be instanciated on a `\u003cdiv\u003e` or a `\u003cspan\u003e` tag to show inline. In that case the generated HTML is the full palette.\n\n\u003ca name=\"Theming\"\u003e\u003c/a\u003e\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![Light and Dark themes](https://raw.github.com/evoluteur/colorpicker/master/screenshots/themes.gif)\n\n\u003ca name=\"Options\"\u003e\u003c/a\u003e\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\u003ca name=\"Methods\"\u003e\u003c/a\u003e\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\u003ca name=\"Events\"\u003e\u003c/a\u003e\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\u003ca name=\"License\"\u003e\u003c/a\u003e\n\n## License\n\nCopyright (c) 2025 [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","funding_links":["https://github.com/sponsors/evoluteur"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Fcolorpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevoluteur%2Fcolorpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Fcolorpicker/lists"}