Interactive Colour Picker

JavaScript
1

Hi all,

I’ve forked and altered a codepen project here: https://codepen.io/kmcneil/pen/RwQmXvm

A few questions:

  1. I can’t get the default background gradient to start on the colours I’ve set in CSS. (It works once you start changing the colour though).
  2. I’m struggling to get swatches 4 & 5 to show in the background gradient.
  3. I don’t seem to have control over where the output RGB value text appears or what it looks like. I’d love to see it under the colour picker in the centre of the page.
  4. I’d ideally like to swap the colour picker to this one, but wondering if that’ll just break everything and cause a complete nightmare? https://codepen.io/kmcneil/pen/wvybVEB

Any help much appreciated! This is for a quick project for my Masters.

Cheers,
Kim

HTML:

<canvas class="picker" id="picker" width="256px" height="256px">
  Please use a canvas compatible browser
</canvas>
<div class="options">
  <h3>Core Values</h3>
  <label for="moz" class="radio">
    <input type="radio" id="moz" name="browser" value="moz">
    <span>as a graphic designer</span>
    <br>
  </label>
  
  <label for="webkit" class="radio">
    <input type="radio" id="webkit" name="browser" value="webkit" checked>
    <span></span>
    <br>
  </label>
  <div class="swatch swatch1 active" id="swatch1"></div>
  <span>Authentic</span>
  <div class="swatch swatch2" id="swatch2"></div>
  <span>Creative</span>
  <div class="swatch swatch3" id="swatch3"></div>
  <span>Communication</span>
<div class="swatch swatch4" id="swatch4"></div>
  <span>Conscientious</span>
<div class="swatch swatch5" id="swatch5"></div>
  <span>Problem Solver</span>
</div>
<p id="output"></p>
<div class="example" id="example"></div>

CSS:


.picker{
  border: 1px solid rgb(0,0,0);
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

.options{
  position: absolute;
  top: -10px;
  left: 250px
}

.swatch{
  height: 30px;
  width: 30px;
  margin: 10px 0 0 0;
}

h3{
  font-family: "cardo bold";
  font-size: 2em;
  color: #00000;
}


.radio input[type=radio]{
  opacity: 0;
}

.radio input[type=radio] + span{
  position: relative;
  color: #00000;
  padding: 2px;
  left: -1.2em;
  top: -2em;
}

.radio input[type=radio]:checked + span {
  background: none;
  color: #1C1C1C;
  font-weight; bold;
  padding: 3px;
}

.options > span{
  position: relative;
  top: -20px;
  right: -50px
}


span, p{
  display: inline;
  font-family: arial;
  font-size: 1em;
  color: #00000;
}

.active{
  box-shadow: 0 0 3px 3px #FFF;
}

.swatch1{
  background: rgb(0,99,0);
}

.swatch2{
  background: rgb(228,243,106);
}

.swatch3{
  background: rgb(41,0,128);
}

.swatch4{
  background: rgb(179,60,23);
}

.swatch5{
  background: rgb(155,29,20);
}

body{
  background: none;
  /*background-image: url(http://edithbuisson.fr/images/texture.png)*/
}

.example{
  position: absolute;
  z-index:-1;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  /*background: -webkit-linear-gradient(rgb(10,119,0) 0%, rgb(255,255,255) 50%, rgb(10,119,1) 100%);
  background: -moz-linear-gradient(rgb(10,119,0) 0%, rgb(255,255,255) 50%, rgb(10,119,1) 100%);*/
  background: -webkit-linear-gradient(rgb(10,119,0) 0%, rgb(70, 160, 65) 30%, rgb(130, 200, 125) 40%, rgb(200, 230, 200) 70%, rgb(255,255,255) 100%);
  background: -moz-linear-gradient(rgb(10,119,0) 0%, rgb(70, 160, 65) 30%, rgb(130, 200, 125) 40%, rgb(200, 230, 200) 70%, rgb(255,255,255) 100%);
}

Java:

var r, g, b;
var active = "swatch1";
var shadow = [10, 119, 0];
var midtone = [70, 160, 65];
var highlight = [130, 200, 125];
var highlight1 = [200, 230, 200];
var highlight2 = [255, 255, 255];

function colourWheel() {
  var can = document.getElementById("picker");
  can.attr = ("width", "256");
  can.attr = ("height", "256");
  var canvas = can.getContext("2d");
  var pixels = canvas.createImageData(256, 256);
  for (var x = 0; x < 256; x++) {
    for (var y = 0; y < 256; y++) {
      var idx = (x + y * 256) * 4;
      pixels.data[idx] = 350 - distance(x, 95, y, 85) * 2;
      pixels.data[idx + 1] = 350 - distance(x, 160, y, 85) * 2;
      pixels.data[idx + 2] = 350 - distance(x, 128, y, 160) * 2;
      pixels.data[idx + 3] = 255;
    }
  }
  function distance(x1, x2, y1, y2) {
    return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
  }
  canvas.putImageData(pixels, 0, 0);
  can.onclick = function (e) {
    document.getElementById("example").style.background = rgbaReturn(r, g, b);
    document.getElementById(active).style.background =
      "rgb(" + r + "," + g + "," + b + ")";
  };
  can.onmousemove = function (e) {
    var x = e.pageX - can.offsetLeft - 10;
    var y = e.pageY - can.offsetTop - 10;
    var colour = canvas.getImageData(x, y, 1, 1);
    var data = colour.data;
    r = data[0];
    g = data[1];
    b = data[2];
    can.style.border = "10px solid rgb(" + r + "," + g + "," + b + ")";
  };
}

function rgbaReturn(red, green, blue) {
  switch (active) {
    case "swatch1":
      shadow = [red, green, blue];
      break;
    case "swatch2":
      midtone = [red, green, blue];
      break;
    case "swatch3":
      highlight = [red, green, blue];
       break;
    case "swatch4":
      highlight1 = [red, green, blue];
       break;
    case "swatch5":
      highlight2 = [red, green, blue];
  }
  var prefix;
  var browsers = document.getElementsByName("browser");
  for (var i = 0; i < browsers.length; i++) {
    if (browsers[i].checked) {
      prefix = browsers[i].value;
    }
  }
  var output =
    "-" +
    prefix +
    "-linear-gradient(rgb(" +
    shadow[0] +
    "," +
    shadow[1] +
    "," +
    shadow[2] +
    ") 0%, rgb(" +
    midtone[0] +
    "," +
    midtone[1] +
    "," +
    midtone[2] +
    ") 20%, rgb(" +
    highlight[0] +
    "," +
    highlight[1] +
    "," +
    highlight[2] +
    ") 40%)";
  highlight1[0] +
    "," +
    highlight1[1] +
    "," +
    highlight1[2] +
    ") 80%)";
  highlight2[0] +
    "," +
    highlight2[1] +
    "," +
    highlight2[2] +
    ") 100%)";
  document.getElementById("output").innerHTML = output;
  return output;
}

document.getElementById("swatch1").onclick = function () {
  active = "swatch1";
  document.getElementById("swatch1").classList.add("active");
  document.getElementById("swatch2").classList.remove("active");
  document.getElementById("swatch3").classList.remove("active");
  document.getElementById("swatch4").classList.remove("active");
  document.getElementById("swatch5").classList.remove("active");
};
document.getElementById("swatch2").onclick = function () {
  active = "swatch2";
  document.getElementById("swatch2").classList.add("active");
  document.getElementById("swatch1").classList.remove("active");
  document.getElementById("swatch3").classList.remove("active");
  document.getElementById("swatch4").classList.remove("active");
  document.getElementById("swatch5").classList.remove("active");
};
document.getElementById("swatch3").onclick = function () {
  active = "swatch3";
  document.getElementById("swatch3").classList.add("active");
  document.getElementById("swatch1").classList.remove("active");
  document.getElementById("swatch2").classList.remove("active");
  document.getElementById("swatch4").classList.remove("active");
  document.getElementById("swatch5").classList.remove("active");
};
document.getElementById("swatch4").onclick = function () {
  active = "swatch4";
  document.getElementById("swatch4").classList.add("active");
  document.getElementById("swatch1").classList.remove("active");
  document.getElementById("swatch2").classList.remove("active");
  document.getElementById("swatch3").classList.remove("active");
  document.getElementById("swatch5").classList.remove("active");
};
document.getElementById("swatch5").onclick = function () {
  active = "swatch5";
  document.getElementById("swatch5").classList.add("active");
  document.getElementById("swatch1").classList.remove("active");
  document.getElementById("swatch2").classList.remove("active");
  document.getElementById("swatch3").classList.remove("active");
  document.getElementById("swatch4").classList.remove("active");
};

colourWheel();
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.