Powerful Color Picker Components In Pure JavaScript – Colorpicker.Pro

Category: Color , Javascript , Recommended | July 11, 2019

1 Comment

Demo Download

AUTHOR:	themesanytime
VIEWS TOTAL:	4,338 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	July 11, 2019
LICENSE:	MIT

---

Preview:

Description:

A powerful, professional color picker JavaScript library to create basic Color Picker, Multi-Spectral Color Picker (Demo), Material Color Picker (Demo), Palette Color Picker (Demo), Tab Palette Color Picker (Demo) on the app.

More features:

• Dark & Light themes.
• Inline mode.
• Supports hex,rgb,rgba,hsl,hsla color formats.
• Variable sizes.

How to use it:

Create a basic color picker that will be attached to an input field or a specific trigger element.

<!-- Light Theme -->
<link rel="stylesheet" href="css/default-picker/light.min.css">
<!-- Dark Theme -->
<link rel="stylesheet" href="css/default-picker/dark.min.css">
<!-- JavaScript -->
<script src="js/default-picker.min.js"></script>

<input id="example" type="text">

var colorPickerDefault = new ColorPicker.Default('#example', {
    // options here
});

Create a Material color picker that will be attached to an input field or a specific trigger element.

<!-- Light Theme -->
<link rel="stylesheet" href="css/material-picker/light.min.css">
<!-- Dark Theme -->
<link rel="stylesheet" href="css/material-picker/dark.min.css">
<!-- JavaScript -->
<script src="js/material-picker.min.js"></script>

<input id="example" type="text">

var colorPickerMaterial = new ColorPicker.Material('#example', {
    // options here
});

Create a multi-spectral color picker that will be attached to an input field or a specific trigger element.

<!-- Light Theme -->
<link rel="stylesheet" href="css/multi-spectral-picker/light.min.css">
<!-- Dark Theme -->
<link rel="stylesheet" href="css/multi-spectral-picker/dark.min.css">
<!-- JavaScript -->
<script src="js/multi-spectral-picker.min.js"></script>

<input id="example" type="text">

var colorPickerMultiSpectral = new ColorPicker.MultiSpectral('#example', {
    // options here
});

Create a palette color picker that will be attached to an input field or a specific trigger element.

<!-- Light Theme -->
<link rel="stylesheet" href="css/palette-picker/light.min.css">
<!-- Dark Theme -->
<link rel="stylesheet" href="css/palette-picker/dark.min.css">
<!-- JavaScript -->
<script src="js/palette-picker.min.js"></script>

<input id="example" type="text">

var colorPickerPalette = new ColorPicker.Palette('#example', {
    // options here
});

Create a tab palette picker that will be attached to an input field or a specific trigger element.

<!-- Light Theme -->
<link rel="stylesheet" href="css/tab-palette-picker/light.min.css">
<!-- Dark Theme -->
<link rel="stylesheet" href="css/tab-palette-picker/dark.min.css">
<!-- JavaScript -->
<script src="js/tab-palette-picker.min.js"></script>

<input id="example" type="text">

var colorPickerTabPalette = new ColorPicker.TabPalette('#example', {
    // options here
});

All possible options to customize the color pickers.

{

  // default color
  color: '',

  // inline mode
  inline: false,

  // top, right, bottom, left, top-center, right-center, bottom-center, left-center
  placement: 'bottom',

  // Colorpicker.Pro Tab Palette
  format: 'rgba',

  // custom class
  customClass: '',

  // default,medium,small
  size: 'default',

  // shows arrow
  arrow: true,

  anchor: {
    hidden: false, // shows or hides anchor element
    cssProperty: 'color' // background-color, color, border-color
  },

  // animation
  animation: 'slide-in',

  // hides information block
  hideInfo: false,

  history: {
    hidden: false, //  shows or hides history block
    colors: [] // ['red', 'green', 'rgba(255, 1, 128, 1)']
  },

  // for palette picker
  palette: [
    { // first row
      descendants: [ // row colors
        {
          color: '#000000'
        },
        {
          color: '#454545'
        },
        {
          color: '#666666'
        },
        {
          color: '#989898'
        },
        {
          color: '#B6B6B6'
        },
        {
          color: '#CBCBCB'
        },
        {
          color: '#D8D8D8'
        },
        {
          color: '#EEEEEF'
        },
        {
          color: '#F3F3F3'
        },
        {
          color: '#ffffff'
        }
      ]
    }
  ],

  // for tab palette picker
  palette: [ 
    { // tab and rows
      color: '#e6315b', // tab color
      descendants: [ //rows
        {
          descendants: [
            { color: '#ffd8e1' },
            { color: '#fcc4d1' },
            { color: '#f7a7ba' },
            { color: '#f287a0' },
            { color: '#ee6988' },
            { color: '#e9486e' },
            { color: '#e5315b' }
          ]
        },
        {
          descendants: [
            { color: '#e6325c' },
            { color: '#dd3058' },
            { color: '#d52e55' },
            { color: '#c82b50' },
            { color: '#bc284b' },
            { color: '#b22648' },
            { color: '#a92444' }
          ]
        },
        {
          descendants: [
            { color: '#a92444' },
            { color: '#a02241' },
            { color: '#95203c' },
            { color: '#891d37' },
            { color: '#7d1b32' },
            { color: '#71182d' },
            { color: '#661629' }
          ]
        }
      ]
    }
  ]
}

API methods.

// show
colorPicker.show();

// hide
colorPicker.hide();

// destroy
colorPicker.destroy();

// get the selected color
colorPicker.getColor();

// set the placement
colorPicker.setPlacement('right');

Execute a function when a color is selected.

colorPicker.on('change', function(color) {
  console.log(color.hex); 
  console.log(color.rgb); 
  console.log(color.rgba);
  console.log(color.hsl);
  console.log(color.hsla);
  console.log(color.source.rgba);
  console.log(color.source.hsla); 
});

Changelog:

07/11/2019

• fixed incorrect color calculation in inputs