Color pickr

OverviewOfficial Website

Colorpickr: Flat, simple, multi-themed, responsive and hackable Color-Picker library.

CSS
<!-- One of the following themes -->
<link rel="stylesheet" href="assets/libs/@simonwep/pickr/themes/classic.min.css"/> <!-- 'classic' theme -->
<link rel="stylesheet" href="assets/libs/@simonwep/pickr/themes/monolith.min.css"/> <!-- 'monolith' theme -->
<link rel="stylesheet" href="assets/libs/@simonwep/pickr/themes/nano.min.css"/> <!-- 'nano' theme -->
Javascript
<!-- Modern colorpicker bundle -->
<script src="assets/libs/@simonwep/pickr/pickr.min.js"></script>
Initjs (Custom js)
<!--  color pickr init js -->
<script src="assets/js/pages/form-pickers.init.js"></script>
Add Package
yarn add @simonwep/pickr --save
Remove Package
yarn remove @simonwep/pickr or you can remove package by removing specific package from package.json
Colorpickr Examples
Title Javascript
Classic Demo
var classicPickrDemo = document.querySelectorAll(".classic-colorpicker");

classicPickrDemo.forEach(function () {
Pickr.create({
    el: ".classic-colorpicker",
    theme: "classic", // or 'monolith', or 'nano'
    default: "#405189",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
        "rgba(0, 188, 212, 0.7)",
        "rgba(0, 150, 136, 0.75)",
        "rgba(76, 175, 80, 0.8)",
        "rgba(139, 195, 74, 0.85)",
        "rgba(205, 220, 57, 0.9)",
        "rgba(255, 235, 59, 0.95)",
        "rgba(255, 193, 7, 1)",
    ],

    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: true,
            rgba: true,
            hsva: true,
            input: true,
            clear: true,
            save: true,
        },
    },
});
});
Monolith Demo
var monolithColorPickr = document.querySelectorAll(".monolith-colorpicker");
monolithColorPickr.forEach(function () {
Pickr.create({
    el: ".monolith-colorpicker",
    theme: "monolith",
    default: "#0ab39c",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
    ],
    defaultRepresentation: "HEXA",
    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: false,
            rgba: false,
            hsva: false,
            input: true,
            clear: true,
            save: true,
        },
    },
});
});
Nano Demo
var nanoColorPickr = document.querySelectorAll(".nano-colorpicker");
nanoColorPickr.forEach(function () {
Pickr.create({
    el: ".nano-colorpicker",
    theme: "nano",
    default: "#3577f1",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
    ],
    defaultRepresentation: "HEXA",
    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: false,
            rgba: false,
            hsva: false,
            input: true,
            clear: true,
            save: true,
        },
    },
});
});
Options Demo
var demoColorPickr = document.querySelectorAll(".colorpicker-demo");
demoColorPickr.forEach(function () {
Pickr.create({
    el: ".colorpicker-demo",
    theme: "monolith",
    default: "#405189",
    components: {
        // Main components
        preview: true,
        // Input / output Options
        interaction: {
            clear: true,
            save: true,
        },
    },
});
}); 
Picker with Opacity & Hue
var opacityHueColorPickr = document.querySelectorAll(".colorpicker-opacity-hue");
opacityHueColorPickr.forEach(function () {
Pickr.create({
    el: ".colorpicker-opacity-hue",
    theme: "monolith",
    default: "#0ab39c",

    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            clear: true,
            save: true,
        },
    },
});
});
Switches
var swatcherColorPickr = document.querySelectorAll(".colorpicker-swatches");
swatcherColorPickr.forEach(function () {
Pickr.create({
    el: ".colorpicker-swatches",
    theme: "monolith",
    default: "#3577f1",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
    ],
    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            clear: true,
            save: true,
        },
    },
});
});

Picker with Input
var inputColorPickr = document.querySelectorAll(".colorpicker-input");
inputColorPickr.forEach(function () {
Pickr.create({
    el: ".colorpicker-input",
    theme: "monolith",
    default: "#f7b84b",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
    ],
    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            input: true,
            clear: true,
            save: true,
        },
    },
});
});
Color Format
var formatColorPickr = document.querySelectorAll(".colorpicker-format");
formatColorPickr.forEach(function () {
Pickr.create({
    el: ".colorpicker-format",
    theme: "monolith",
    default: "#f06548",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
    ],
    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: true,
            rgba: true,
            hsva: true,
            input: true,
            clear: true,
            save: true,
        },
    },
});
});
© Velzon.
Design & Develop by Themesbrand