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

NPM Package GitHub Repo

Color Picker Installation

Styles/Scripts via CDN

<!-- Style dependencies. -->
<link href="https://unpkg.com/selectize@0.12.4/dist/css/selectize.default.css" rel="stylesheet" integrity="sha384-y/lK0mgNA2CldgvjfZFQ7ciSAhXLpIgkl4W/wifJ0EobNX5ac1buhp9X11g7GR2M" crossorigin="anonymous" />

<!-- Script dependencies. -->
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="https://unpkg.com/tinycolor2@1.4.1/dist/tinycolor-min.js" integrity="sha384-a5Bm1aj9jmRF0rquE7qZJ52rHZMfCJnKtC08F0GSTdT/qDFFuko4EzYOyluc7CKg" crossorigin="anonymous"></script>
<script src="https://unpkg.com/selectize@0.12.4/dist/js/standalone/selectize.min.js" integrity="sha384-hYEUbTDrbRpAapjELb51WHIvIGbN0P5Dp+ub0zJz6BAqrblWPrjftbF4068yYJAi" crossorigin="anonymous"></script>

<!-- The package itself. -->
<script src="https://unpkg.com/named-color-picker@0.0.6" integrity="sha384-unpWJoYFP4QLAXO5nJnknHFG5u+tmgn9YT1D9rbOpEO+R+7E1LmhbvuA9rwcqIjX" crossorigin="anonymous"></script>

Color Picker Demos

Color Input

Choose Color:
<input type="color" />

<script>
  $('input[type="color"]').namedColorPicker();
</script>

Initial Color Value

Change Color:
<input type="color" value="#2a7e19" />

<script>
  $('input[type="color"]').namedColorPicker();
</script>

With Search Open

Search Colors:
Begins with a search box when there's no existing color.
<input type="color" />

<script>
  $('input[type="color"]').namedColorPicker({ openSearch: true });
</script>

Hidden Color Codes

Change Color:
Clicking on a color shows the title only.
<input type="text" value="#714ab2" />

<script>
  $('input[type="color"]').namedColorPicker({ showCodes: false });
</script>

Text Input

Enter Color Name (or Hex Code):
Note: A hidden input field holds the hex color code.
<input type="text" value="#647d8e" />

<script>
  $('input[type="text"]').namedColorPicker();
</script>

Colorize Swatch Only (Not Text Field)

Enter Color Name (or Hex Code):
Note: A hidden input field holds the hex color code.
<input type="text" value="#b9cc81" />

<script>
  $('input[type="text"]').namedColorPicker({ colorizeElement: false });
</script>

Open Via JavaScript

Change Color: click here to open
<input type="color" value="#658cbb" />
<a class="open" href="#">click here to open</a>

<script>
  var $color = $('input[type="color"]');
  $color.namedColorPicker(); // Initialize.

  $('.open').on('click', function(e) {
    e.preventDefault(); // Prevent default click behavior.
    $color.namedColorPicker('open', '#658cbb'); // Open command.
  });
</script>

Stand-Alone Mode

Inherits 100% width of a container element.
<div style="width:300px; max-width:100%;">
  <input type="color" value="#7c7631" />
</div>
<script>
  $('input[type="color"]').namedColorPicker({ mode: 'stand-alone' });
</script>

Documentation

Configuration Options

<script>
  $('input[type="color"]')
    .namedColorPicker({
      mode: 'auto',

      titleizeElement: true,
      colorizeElement: true,

      showCodes: true,
      openSearch: false,

      i18n: {
        copied: 'copied',
        select: 'Select',
        searchColors: 'search',
        promptCopyFallback: 'press ctrl+c to copy:',
      },
  });
</script>
mode (default: auto)

Can be swatch-before, swatch-after, swatch-only, stand-alone, or auto.

swatch-before
Swatch appears before the form element.
swatch-after
Swatch appears after the form element.
swatch-only
Swatch replaces form element.
stand-alone
Inherits 100% width of containing element.
auto (automatic mode)
If <input type="color"> use swatch-only, else swatch-after.
titlelizeElement (default: true)

Can be true or false. If true, automatically set the element’s title="" attribute to a description of the selected color.

colorizeElement (default: true)

Can be true or false. If true, automatically set the element’s color and background properties to the selected color.

showCodes (default: true)

Can be true or false to show hex, rgb, hsl, and hsv color codes. Or, this can be set to an array of color codes to show; e.g., ['hex', 'rgb', 'hsl', 'hsv'] shows all color codes. The default true value also shows all color codes.

openSearch (default: false)

Can be true or false to automatically open the search box.

i18n (i)nternationalizatio(n)

See example above. You can fill-in the strings if you need to translate. However, altering the name of each named color is not a feature at this time.


jQuery Initialization

var $input = $('<input type="color">');
$input.namedColorPicker({ /* Any options here. */ });

Basic jQuery Commands

open() the color picker.

var $input = $('<input type="color">');
$input.namedColorPicker(); // Initialize.

// Open color picker.
$input.namedColorPicker('open');

// Or, you can open with a color already active.
$input.namedColorPicker('open', 'newAmber'); // By key (caSe sensitive).
$input.namedColorPicker('open', 'New Amber'); // By name (not caSe senstive).
$input.namedColorPicker('open', '#7b3801'); // By hex string (not caSe senstive).

toggle() the color picker open/closed.

$input.namedColorPicker('toggle');

close() the color picker.

$input.namedColorPicker('close');

destroy() closes & destroys the color picker instance.

$input.namedColorPicker('destroy');

jQuery Color Commands

getColors() gets all named colors.

var $input = $('<input type="color">');
$input.namedColorPicker(); // Initialize.

$input.namedColorPicker('getColors').forEach(function(color) {
  console.log(color.key); // newAmber
  console.log(color.name); // New Amber
  console.log(color.hexString); // #7b3801
  console.log(color.rgbString); // rgb(123, 56, 1)
  console.log(color.hslString); // hsl(27, 98%, 24%)
  console.log(color.hsvString); // hsv(27, 99%, 48%)
  console.log(color.tiny); // tinyColor object instance.
  console.log(color); // If you want to inspect all properties.
});

getColorKeysByName() gets all named color keys, in alphabetical order.

$input.namedColorPicker('getColorKeysByName').forEach(function(key) {
  console.log(key); // acidGreen
});

getColorKeysByHue() gets all named color keys, ordered by hue.

$input.namedColorPicker('getColorKeysByHue').forEach(function(key) {
  console.log(key); // persianPlum
});

getColor() gets a color by hex string, key, or by name.

// By key (caSe sensitive).
var color = $input.namedColorPicker('getColor', 'newAmber');

// By name (not caSe senstive).
var color = $input.namedColorPicker('getColor', 'New Amber');

// By hex string (not caSe senstive).
var color = $input.namedColorPicker('getColor', '#7b3801');

if (color) {
  console.log(color.key); // newAmber
  console.log(color.name); // New Amber
  console.log(color.hexString); // #7b3801
  console.log(color.rgbString); // rgb(123, 56, 1)
  console.log(color.hslString); // hsl(27, 98%, 24%)
  console.log(color.hsvString); // hsv(27, 99%, 48%)
  console.log(color.tiny); // tinyColor object instance.
  console.log(color); // If you want to inspect all properties.
}

getActiveColor() gets the currently active color; i.e., the color that is currently active in the picker, open for consideration, but has not yet been selected by the user.

var color = $input.namedColorPicker('getActiveColor');

if (color) {
  console.log(color.key); // newAmber
  console.log(color.name); // New Amber
  console.log(color.hexString); // #7b3801
  console.log(color.rgbString); // rgb(123, 56, 1)
  console.log(color.hslString); // hsl(27, 98%, 24%)
  console.log(color.hsvString); // hsv(27, 99%, 48%)
  console.log(color.tiny); // tinyColor object instance.
  console.log(color); // If you want to inspect all properties.
}

setActiveColor() sets the currently active color; i.e., the color that is currently active in the picker, but has not yet been selected by the user.

// Note: You can set a color by key, name, or by it's hex string.
// When setting the 'active' color, it must be a valid 'named' color.
$input.namedColorPicker('setActiveColor', 'newAmber'); // By key (caSe sensitive).
$input.namedColorPicker('setActiveColor', 'New Amber'); // By name (not caSe senstive).
$input.namedColorPicker('setActiveColor', '#7b3801'); // By hex string (not caSe senstive).

getSelectedColor() gets the currently selected color (as a hex string). This is the color that was last selected from the picker by a user. Or, that was typed into a text form field. So this could be any arbitrary hex string; i.e., not necessarily a named color. For example, if you allow a text field to be edited by a user.

var hexString = $input.namedColorPicker('getSelectedColor');
if (hexString) console.log(hexString); // #7b3801

setSelectedColor() sets the currently selected color; i.e., the color chosen by a user. This can be set to any valid color key, name, or any valid hex string. It doesn’t necessarily need to be a ‘named’ color.

// Note: You can set a color by key, name, or by it's hex string.
// You can also set this to any valid hex string. It doesn't have to be a 'named' color.
$input.namedColorPicker('setSelectedColor', 'newAmber'); // By key (caSe sensitive).
$input.namedColorPicker('setSelectedColor', 'New Amber'); // By name (not caSe senstive).
$input.namedColorPicker('setSelectedColor', '#7b3801'); // By hex string (not caSe senstive).

jQuery Events

on('namedColorPicker.beforeOpen') fires right before the color picker opens.

var $input = $('<input type="color">');
$input.namedColorPicker(); // Initialize.

$input.on('namedColorPicker.beforeOpen', function(e) {
  console.log('Color picker is about to open.');
});

on('namedColorPicker.opened') fires when the color picker has been opened.

$input.on('namedColorPicker.opened', function(e) {
  console.log('Color picker opened.');
});

on('namedColorPicker.beforeClose') fires right before the color picker closes.

$input.on('namedColorPicker.beforeClose', function(e) {
  console.log('Color picker is about to close.');
});

on('namedColorPicker.closed') fires when the color picker has been closed.

$input.on('namedColorPicker.closed', function(e) {
  console.log('Color picker closed.');
});

on('namedColorPicker.colorActive') fires when a new color becomes active in the picker. An active color is one that is not selected by a user, but merely open for consideration so that details can be reviewed.

$input.on('namedColorPicker.colorActive', function(e, color) {
  console.log('A new color is active in the color picker.');
  console.log(color.hexString); // #7b3801
});

on('namedColorPicker.activeColorClosed') fires when the active color becomes inactive; i.e., when toggling the active color closed in the color picker.

$input.on('namedColorPicker.activeColorClosed', function(e, color) {
  console.log('A color is no longer active in the color picker.');
  console.log(color.hexString); // #7b3801
});

on('namedColorPicker.colorSelected') fires when a new color is selected; i.e., anytime the currently selected color changes. Note that when a color is selected, it becomes the value that’s submitted by a form. The selected color may or may not be a ‘named’ color. For example, if you allow a user to enter any arbitrary value into a text field, it’s possible to enter any valid color, whether it be a ‘named’ color or not.

$input.on('namedColorPicker.colorSelected', function(e, hexString, color) {
  console.log('Color has been selected from the picker.');
  console.log(hexString); // #7b3801

  if (color) // If the selected color is a 'named' color.
    console.log('The selected color is a named color: %o', color);
});

Underlying Class Instance

var $input = $('<input type="color">');
$input.namedColorPicker(); // Initialize.

// Named color picker instance.
var namedColorPicker = $input.data('namedColorPicker');

// jQuery commands documented above can also
// be called on the class instance if you like.
namedColorPicker.setSelectedColor('#7b3801');

Form Submission Data

In all cases, the name="" attribute of the original input element is moved to a hidden input created by the color picker. So a color is always submitted via the hidden input. The original element still handles user interaction and JavaScript events, but the form is submitted with a hidden input containing a hex string for the selected color.

When a form is submitted, it’s submitted with a full, valid, 7-character hex string that includes a # prefix; e.g., #000000. Or, if no valid color has been selected by a user, the form is submitted with an empty string. Invalid colors entered by a user, such as those that don’t pass internal color validation, are submitted as an empty string.

Any valid color can be submitted if you allow text field entry. Therefore, a color is valid if it’s a valid hex string, period. It doesn’t necessarily need to be a ‘named’ color.

Establishing Initial Color Value

This is as simple as setting the value="" attribute in your markup. The color picker will read this attribute and handle the rest for you automatically; i.e., making sure the initial color picker swatch matches the starting color value in your HTML markup.

<input type="color" value="#000000">