Color Picker

color-picker.markdown

Color Picker

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />

<div class="container" id="pcrwrap">
  <div class="pickr"></div>
</div>

<h2 id="colortext">Sweet ColorPicker</h2>

<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>

script.js

let panel = document.getElementById("pcrwrap");
let colortext = document.getElementById("colortext");

const pickr = new Pickr({
  el: ".pickr",
  theme: "monolith",
  position: "bottom",
  default: "#f0f436",
  container: ".container",
  comparison: false,
  showAlways: true,
  appClass: "clr-pcr",

  swatches: [
    "rgba(244, 67, 54, 1)",
    "rgba(233, 30, 99, 1)",
    "rgba(156, 39, 176, 1)",
    "rgba(103, 58, 183, 1)",
    "rgba(63, 81, 181, 1)",
    "rgba(33, 150, 243, 1)"
  ],

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

    interaction: {
      hex: true,
      rgba: true,
      hsva: false,
      input: true,
      clear: false,
      save: false
    }
  }
});

pickr.on("change", (...args) => {
  let bgColor = args[0].toHEXA();
  console.log("bgColor");
  this.pcrwrap.style.backgroundColor = `#${bgColor[0]}${bgColor[1]}${bgColor[2]}`;
  this.colortext.style.color = `#${bgColor[0]}${bgColor[1]}${bgColor[2]}`;
});

scripts

<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100vw;
  font-family: "Inter", sans-serif;
  font-weight: 900;
}

#pcrwrap {
  display: block;
  justify-content: start;
  padding: 10vh;
  width: 100%;
  max-width: 400px;
  position: relative;
  background-color: #f0f436;
}

.pcr-button {
  min-height: 48px;
  min-width: 100%;
  display: none;
}

.clr-pcr {
  width: 100% !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  background-color: #303338 !important;
}

h2 {
  padding: 10vh;
  width: 100%;
  max-width: 400px;
  color: #f0f436;
  background: #000;
  text-align: center;
}

styles

<link href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" rel="stylesheet" />