Press "Enter" to skip to content

Chrome DevTools: Color Picker Component | Colr Pickr

Color Picker, a vanilla JavaScript Colr Pickr component built with SVGs, with features like colour saving. Design similar to chrome-dev-tools. An easy-to-use, Chrome DevTools like colour picker part constructed utilizing vanilla JavaScript and SVG.

Features:

  • Drag the interactive color picker for the easy-to-use color finder, including the Saturation and Lightness box, the Hue slider, and the Opacity slider.
  • Reads and outputs HEX, RGB, HSL, HEXA, RGBA, and HSLA color values.
  • Save the custom colors for reuse when returning to the color picker.
  • Full touch support.
  • The file size is 4 KB, which means a superfast component of your app.
  • It works on all major browsers.
  • Flat, modern design interface, inspired by google chrome dev-tools color picker.

Modular Color Picker Plugin for Bootstrap | BS Colorpicker

How to make use of it:

1. Install and import the Colour Picker.

# NPM
$ npm i @r-tek/colr_pickr --save
import pickr from '@r-tek/colr_pickr';

2. Load the mandatory records data from the construct folder.

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

3. Create a set of the component to launch the colour picker.

<button id="trigger">Launch The Color Picker</button>

4. Initialize the colour picker with default choices.

const button = document.getElementById('trigger');
let picker = new ColorPicker(button);

5. Initialize the colour picker with a preliminary colour.

const button = document.getElementById('trigger');
let picker = new ColorPicker(button, '#f7f7f7');

6. Pick a colour programmatically.

picker.colorChange('#00ffff', button);

7. Fire an event when the colour modifications.

button.addEventListener('colorChange', function (event) {
  const color = event.detail.color;
});

8. Gets an array of all of the saved customized colours.

const savedColor = colorPickerComp.getCustomColors();

Chrome DevTools Like Color Picker Component, How to Use Chrome Color Picker, Manipulating Colors with Color Picker in Chrome DevTools


See Demo And Download

Official Website(R-TEK): Click Here

This superior jQuery/javascript plugin is developed by R-TEK. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *