Named Color Picker

jQuery color picker w/ 2,065 colors, mobile-friendly.

The named color picker takes a somewhat different approach to choosing a color. Instead of a color spectrum/wheel, colors are selected from a fullscreen grid by name, or searched for in a dropdown, also by name. (DEMO)

There are 2,065 named color variables (no duplicate names, no duplicate colors). Color names courtesy of Resene Paints and the XKCD Color Survey (minus potentially-offensive color names & negative connotations). Additional color names include those supported by all major browsers in the CSS3 spec.

Installation Options

Install via package

$ npm install named-color-picker --save;

Or install via Yarn package

$ yarn add named-color-picker;

Or install via unpkg.com CDN

<!-- Style dependencies. --> <link href="https://unpkg.com/[email protected]/dist/css/selectize.default.css" rel="stylesheet" integrity="sha384-y/lK0mgNA2CldgvjfZFQ7ciSAhXLpIgkl4W/wifJ0EobNX5ac1buhp9X11g7GR2M" crossorigin="anonymous" />  <!-- Script dependencies. --> <script src="https://unpkg.com/[email protected]/dist/jquery.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script> <script src="https://unpkg.com/[email protected]/dist/tinycolor-min.js" integrity="sha384-a5Bm1aj9jmRF0rquE7qZJ52rHZMfCJnKtC08F0GSTdT/qDFFuko4EzYOyluc7CKg" crossorigin="anonymous"></script> <script src="https://unpkg.com/[email protected]/dist/js/standalone/selectize.min.js" integrity="sha384-hYEUbTDrbRpAapjELb51WHIvIGbN0P5Dp+ub0zJz6BAqrblWPrjftbF4068yYJAi" crossorigin="anonymous"></script>  <!-- The package itself. --> <script src="https://unpkg.com/[email protected]" integrity="sha384-unpWJoYFP4QLAXO5nJnknHFG5u+tmgn9YT1D9rbOpEO+R+7E1LmhbvuA9rwcqIjX" crossorigin="anonymous"></script>

Mean Alternative (Heavier Stand-Alone Library)

In this variation, the package itself is larger because it also contains the dependencies. That does make it easier to use, but you lose the ability to separate the dependencies from the package itself. For example, if you need one of this package's dependencies in another part of your application (for something unrelated to this package), it's better to include that dependency yourself so it can be shared by all.

<script src="https://unpkg.com/[email protected]/dist/scripts/js/index.web.min.mean.js" integrity="" crossorigin="anonymous"></script>

Works in All Modern Browsers

If you need to support IE <= 11 (prior to Edge), older versions of Android, and much older versions of other browsers, you can insert this polyfill before all other script tags. The polyfill.io service fills ES6 features that a user's browser is lacking, based on both UA & feature detection.

<!-- Before ALL other script tags in your document. --> <!-- Only needed if you want to support much older browsers. --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6&amp;flags=gated"></script>

Demos / Documentation

• see: https://src-works.github.io/named-color-picker/docs/
• see also: https://jsfiddle.net/jaswrks/2uu80f7L/2/

Commercial Use

This software is created, documented and maintained by Jason Caldwell (@jaswrks) and a small team of talented developers at ‹src.works/›. It's open source, but if you use it commercially, please pay what you can.

Development Channels

Always use the latest stable version in production. If you want upcoming changes ahead of time use the @dev or @rc tag, but please do so at your own risk. The @dev and @rc tags are potentially unstable at various times throughout a development cycle, and therefore should not be used in production.

Channel	NPM Tag	Description	SemVer	GitHub
Hackers	@dev	Latest Bleeding Edge potentially-unstable		master (PRs)
Lab Rats	@rc	Next Release Candidate upcoming semi-stable release		releases
Everyone	@latest	Latest Stable Version highly recommended		releases

NPM Consumption Examples

CDN Directory Indexes

CDN Script URLs

In production, use the latest stable version with an SRI integrity hash.

<script src="https://unpkg.com/[email protected]" integrity="sha384-unpWJoYFP4QLAXO5nJnknHFG5u+tmgn9YT1D9rbOpEO+R+7E1LmhbvuA9rwcqIjX" crossorigin="anonymous"></script>

Tip: Don't use an SRI hash with a tag like @dev, @rc, or @latest. Tags reference a version dynamically; e.g., the @latest tag will point to an updated copy once the next version is released — rendering the SRI invalid. Instead, use a specific @x.x.x version in the URL.

MIT License

For full details see: LICENSE.txt

Changelog

For full details see: CHANGELOG.md

Semantic Versioning

New versions are released following semver.org guidelines.

Pull Requests Welcome

the master branch at GitHub and submit your changes for review.