Customizable Color Picker For The Web – Grid Color Picker

Grid Color Picker is a tiny JavaScript library that allows you to choose colors from a palette grid filled with preset colors.

You can get the selected color in different formats like HEX, RGB, or RGBA, based on your settings.

How to use it:

1. Link to GridColorPicker’s JavaScript and Stylesheet in the document:

<link rel="stylesheet" href="/GridColorPicker.css" />
<script src="/GridColorPicker.js"></script>

2. Create an input field in your HTML. This field will trigger the color picker and set the selected color as its background:

<input type=”text” id=”colorPicker” />

3. Attach the color picker to the input field and log the selected color in the console:

const colorElement = document.getElementById("colorPicker");
const gridColorPicker = new GridColorPicker(colorElement, {
  // options here
  callback: (selectedColor) => {
    console.log(selectedColor);
  },
});

4. You can further customize the picker with these available options

const gridColorPicker = new GridColorPicker(colorElement, {
  // hex, rgb, or rgba
  setSelectType: "hex", 
  // fade, slide, or none
  animation: "fade", // Animation type: 
  // number of colors per row in the grid
  itemsPerRow: 8, 
  // default color
  defaultColor: "#ffcc00",
  // automatically open the color picker when initialized
  autoOpen: false,
});

5. Override the default palette.

const gridColorPicker = new GridColorPicker(colorElement, {
  mainColors: [
    "#ff0000",
    "#ff6600",
    "#ffff00",
    "#00ff00",
    "#00ffff",
    "#0000ff",
    "#ff00ff",
    "#808080",
  ],
  
  othersColors: [
    "#ffcccc",
    "#ffcc99",
    "#ffffcc",
    // ...
  ], 
});

Changelog:

09/21/2024

• add autoOpen option

09/20/2024

• Add keyboard navigation with Tab and arrow keys