{"id":18440556,"url":"https://github.com/fooloomanzoo/color-picker","last_synced_at":"2025-04-07T22:31:37.150Z","repository":{"id":57741256,"uuid":"105243969","full_name":"fooloomanzoo/color-picker","owner":"fooloomanzoo","description":"A picker for color, that can use the native input","archived":false,"fork":false,"pushed_at":"2018-11-17T00:51:10.000Z","size":691,"stargazers_count":11,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T22:57:59.202Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fooloomanzoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-29T07:38:15.000Z","updated_at":"2023-05-30T20:17:59.000Z","dependencies_parsed_at":"2022-08-29T08:50:33.954Z","dependency_job_id":null,"html_url":"https://github.com/fooloomanzoo/color-picker","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Fcolor-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Fcolor-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Fcolor-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Fcolor-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fooloomanzoo","download_url":"https://codeload.github.com/fooloomanzoo/color-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247740870,"owners_count":20988283,"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":[],"created_at":"2024-11-06T06:31:09.688Z","updated_at":"2025-04-07T22:31:35.531Z","avatar_url":"https://github.com/fooloomanzoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/color-input.svg)](https://www.npmjs.com/package/@fooloomanzoo/color-picker)\r\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/color-picker)\r\n[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/fooloomanzoocolor-picker)\r\n\r\n_[API \u0026 Demo](https://fooloomanzoo.github.io/color-picker)_\r\n\r\n## \u0026lt;color-picker\u0026gt;\r\n\r\n### What is it for?\r\n\r\n`color-picker` is a picker for color for **[Polymer](https://github.com/Polymer/polymer)** that can use the **native** input, too. It has the same approach like in [\u0026lt;datetime-picker\u0026gt;](https://fooloomanzoo.github.io/datetime-picker/components/datetime-picker/). If the **native** picker is choosen and is not supported, this element use the **polyfill** color-picker. The `\u003ccolor-element\u003e` will come in place if the native picker is not available or is not explicitly wanted.  The `value` and `color-string` will give you directly the css-string in the selected `format`.\r\n\r\n### Motivation\r\n\r\nInternally it tests the browser, if native input-type `color` is supported. You can decide to use the native or the replacements during runtime. `color-element` can also be used separately. By default, the polyfilled version is used.\r\n\r\nIt might be useful for you to use, if you like to keep the native approach of Browsers on Mobile Devices, or you like to have a different look or you would like to have a guaranteed working **color-picker**. Another use case could be for example, if you want on _mobile devices_ use the native picker, when supported, and on _desktop devices_ this polyfill.\r\n\r\nFor that purposes the attributes **native** and **native-on-mobile** are provided.\r\n\r\n```html\r\n  \u003cdatetime-picker native\u003e\u003c/datetime-picker\u003e\r\n  \u003cdatetime-picker native-on-mobile\u003e\u003c/datetime-picker\u003e\r\n```\r\n\r\n### How?\r\n\r\nThe **[component page](https://fooloomanzoo.github.io/color-picker/components/color-picker/)** explains, which of the attributes you can use and how. You can see there a **[demo](https://fooloomanzoo.github.io/color-picker/components/color-picker/#/elements/color-picker/demos/demo/color-picker.html)**, too.\r\n\r\nExamples:\r\n\r\n#### color-picker\r\n```html\r\n\u003ccolor-picker r=\"{{r}}\" g=\"{{g}}\" b=\"{{b}}\" default=\"green\" native=\"[[native]]\" auto-confirm=\"[[autoConfirm]]\"\u003e\u003c/color-picker\u003e  \r\n\u003cp\u003e\r\n  \u003cspan\u003e red: [[r]] \u003c/span\u003e\r\n  \u003cbr\u003e\r\n  \u003cspan\u003e green: [[g]] \u003c/span\u003e\r\n  \u003cbr\u003e\r\n  \u003cspan\u003e blue: [[b]] \u003c/span\u003e  \r\n  \u003cbr\u003e\r\n  \u003cbr\u003e\r\n  \u003cinput type=\"checkbox\" checked=\"{{native::change}}\"\u003enative color picker\r\n  \u003cbr\u003e\r\n  \u003cbr\u003e\r\n  \u003cinput type=\"checkbox\" checked=\"{{autoConfirm::change}}\"\u003eauto confirm\r\n\u003c/p\u003e\r\n```\r\n\r\n#### Stand-alone color-element\r\n```html\r\n  \u003ccolor-element alpha=\"{{alpha}}\" r=\"{{r}}\" g=\"{{g}}\" b=\"{{b}}\" h=\"{{h}}\" s=\"{{s}}\" l=\"{{l}}\" format=\"{{format}}\"\u003e\u003c/color-element\u003e\u003cbr\u003e\r\n  \u003cp\u003e\r\n    \u003cspan\u003eformat \u003c/span\u003e\r\n    \u003cselect id=\"formats\" value=\"{{format::change}}\"\u003e\r\n      \u003coption value=\"auto\"\u003eauto\u003c/option\u003e\r\n      \u003coption value=\"rgb\"\u003ergb\u003c/option\u003e\r\n      \u003coption value=\"hex\"\u003ehex\u003c/option\u003e\r\n      \u003coption value=\"hsl\"\u003ehsl\u003c/option\u003e\r\n    \u003c/select\u003e\r\n    \u003cbr\u003e\r\n    \u003cinput type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"{{alpha::change}}\"\u003e\u003cspan\u003e alpha: [[alpha]] \u003c/span\u003e\r\n    \u003cbr\u003e\r\n    \u003cinput type=\"range\" min=\"0\" max=\"255\" step=\"1\" value=\"{{r::input}}\"\u003e\u003cspan\u003e red: [[r]] \u003c/span\u003e\r\n    \u003cbr\u003e\r\n    \u003cinput type=\"range\" min=\"0\" max=\"255\" step=\"1\" value=\"{{g::input}}\"\u003e\u003cspan\u003e green: [[g]] \u003c/span\u003e\r\n    \u003cbr\u003e\r\n    \u003cinput type=\"range\" min=\"0\" max=\"255\" step=\"1\" value=\"{{b::input}}\"\u003e\u003cspan\u003e blue: [[b]] \u003c/span\u003e\r\n    \u003cbr\u003e\r\n    \u003cinput type=\"range\" min=\"0\" max=\"359\" step=\"1\" value=\"{{h::input}}\"\u003e\u003cspan\u003e hue: [[h]] \u003c/span\u003e\r\n    \u003cbr\u003e\r\n    \u003cinput type=\"range\" min=\"0\" max=\"1\" step=\"0.001\" value=\"{{s::input}}\"\u003e\u003cspan\u003e saturation: [[s]] \u003c/span\u003e\r\n    \u003cbr\u003e\r\n    \u003cinput type=\"range\" min=\"0\" max=\"1\" step=\"0.001\" value=\"{{l::input}}\"\u003e\u003cspan\u003e lightness: [[l]] \u003c/span\u003e\r\n    \u003cbr\u003e\r\n  \u003c/p\u003e\r\n```\r\n\r\n#### Use the polyfill or the native picker\r\nBy default it checks if `color` is supported for a native input. If it is not and you have set `native`, the polyfill will be used instead of the native input. Additionally there is the attribute `native-on-mobile`.\r\n\r\n### Styling\r\nHave a look at [input-picker-pattern#input-shared-style](https://github.com/fooloomanzoo/input-picker-pattern#input-shared-style) to see how to style the element.\r\n\r\n### Installation\r\n```\r\nnpm install --save @fooloomanzoo/color-picker\r\n```\r\n\r\n### Contribute?\r\nFeel free to send a new issue, a commit, a pull request or just fork it!\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffooloomanzoo%2Fcolor-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffooloomanzoo%2Fcolor-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffooloomanzoo%2Fcolor-picker/lists"}