Fire JS Bin - SharpColorPicker - 3

You can jump to the latest bin by adding /latest to your URL

z

Find

→ ←

⟲

Replace

⊗ All Replace

var K = document,
    Ea = "0369CF",
    L = sessionStorage,
    x = parseInt,
    l = 255,
    h = 100,
    y = 360,
    M = true,
    A = false,
    n = 196,
    m = function (K) {
    return K[0].getContext("2d")
    },
    N = function (K) {
    return K.length
    };

function Fa(a, b) {
  return "#" + a.substr(b * 3, 3).replace(Ga, Ha)
}
function Ia(a) {
  var b = 0,
      c = 0,
      e = [],
      f = "";
  for (b = 0; b < 6; b++) for (c = 0; c < 6;) e.push(Ea[b] + Ea[c++]);
  for (b = 0; b < N(a);) f += e[a.charCodeAt(b++) - 48];
  return f
}
function o(a, b, c) {
  function e(f) {
    return ("0" + (f < 16 ? "" : e((f - f % 16) / 16)) + Ja.charAt(f % 16)).slice(-2)
  }
  return "#" + e(a) + e(b) + e(c)
}
function na(a) {
  function b(e) {
    return Ja.indexOf(e.toUpperCase())
  }
  a = a.replace("#", "");
  a = N(a) == 3 ? a.replace(Ga, Ha) : a;
  if (N(a) == 6) {
    var c = [];
    for (d = 0; d < 3;) c.push(b(a[d * 2]) * 16 + b(a[d++ * 2 + 1]));
    return c
  }
}
function F(a, b, c) {
  return a > c ? c : a < b ? b : a
}
function Ka(a, b, c) {
  var e = V(a, b, c),
      f = e - oa(a, b, c);
  return R(60 * (f == 0 ? 0 : e == a ? ((b - c) / f % 6 + 6) % 6 : e == b ? 2 + (c - a) / f : 4 + (a - b) / f))
}
function Xa(a, b, c) {
  return h * 0.5 * (V(a, b, c) + oa(a, b, c)) / l
}
function La(a, b, c) {
  var e = V(a, b, c);
  a = e - oa(a, b, c);
  return R(h * (a ? a / e : 0))
}
function z(a, b, c) {
  return [Ka(a, b, c), La(a, b, c), R(h * V(a, b, c) / l)]
}
function g(a, b) {
  return a.apply(null, b)
}
function v(a, b, c) {
  var e = c / h * b / h;
  a = (a / 60 % 6 + 6) % 6;
  b = e * (1 - Ya((a % 2 + 2) % 2 - 1));
  return [[e, b, 0], [b, e, 0], [0, e, b], [0, b, e], [b, 0, e], [e, 0, b]][Ma(a)].map(function (f) {
    return Ma((f + c / h - e) * l)
  })
}
function Na(a) {
  var b = a.value;
  a = "HSVRGB".indexOf(a.id);
  var c;
  if (a < 3) {
    c = g(z, p);
    c[a] = b % (S[a][1] + 1);
    c = g(v, c)
  } else {
    c = p;
    c[a % 3] = b % (S[a][1] + 1)
  }
  return c
}
function Oa(a) {
  return a == 8 || a == 46 || 37 <= a && a <= 40 || a == 13 || a == 9
}
function Pa() {
  var a = Qa(),
      b = $("#sc td"),
      c;
  for (d = 0; d < N(a); d++) {
    c = a[d][1];
    if (d < 17) {
      $(b[d]).css(Ra, c);
      b[d].value = c
    } else delete L[c]
  }
}
function Qa() {
  var a = [];
  for (d = 0; d < N(L); d++) {
    key = L.key(d);
    a.push([x(L[key]), key])
  }
  a.sort(function (b, c) {
    return c[0] - b[0]
  });
  return a
}
function aa(a, b, c, e, f, j) {
  a = a.createLinearGradient(b, c, e, f);
  for (pa in j) a.addColorStop(pa / (N(j) - 1), j[pa]);
  return a
}
function qa(a, b, c) {
  b = b[0];
  return [a.pageX - b.offsetLeft - c, a.pageY - b.offsetTop - c]
}
function ba(a, b, c) {
  b = qa(a, c, b);
  a = b[0];
  b = b[1];
  angle = (Za(-b, a) / k * 180 % y + y) % y;
  distance = Sa(a * a + b * b);
  return [angle, distance]
}
function Ta(a) {
  var b;
  W = M;
  b = g(z, p);
  b[0] = a;
  g(ca, b);
  G(g(v, b))
}
function ra(a, b) {
  var c = g(z, p)[0];
  H((a - c) * k / 180);
  O((a - c) * k / 180);
  var e = q - 1 - q * H(k * 2 / 3),
      f = b * H((a - c - 120) * k / 180) - q * H(k * 2 / 3),
      j = (e - f) * Ua(k / 6);
  j = (j * 2 - (j + b * O((a - c - 120) * k / 180))) / (j * 2);
  e = (e - f) / e;
  return [c, F(R(h * j), 0, h), F(R(h * e), 0, h), 0 <= j && j <= 1 && 0 <= e && e <= 1]
}
function ca(a, b, c) {
  var e = q * H(k * 2 / 3),
      f = q * O(k * 2 / 3),
      j = q * H(k * 4 / 3),
      r = q * O(k * 4 / 3),
      s = q - j;
  Sa(s * s + f * f);
  i.save();
  i.lineWidth = T;
  i.clearRect(0, 0, n, n);
  i.translate(P + T, P + T);
  for (d = 0; d < 6; d++) {
    i.strokeStyle = aa(i, P, 0, P * 0.5, P * O(-k / 3), [I[d], I[d + 1]]);
    i.beginPath();
    i.arc(0, 0, P, 0.01, -k / 3, 1);
    i.stroke();
    i.rotate(-k / 3)
  }
  i.rotate(-k * a / 180);
  for (d = 0; d < 2; d++) {
    i.fillStyle = !d ? aa(i, 0, f, 0, r, [da, B]) : aa(i, e, 0, q, 0, ["hsla(" + a + ",100%,50%,0)", "hsl(" + a + ",100%,50%)"]);
    i.beginPath();
    i.moveTo(q, 0);
    i.lineTo(e, f);
    i.lineTo(j, r);
    i.fill()
  }
  i.lineWidth = 1;
  i.strokeStyle = B;
  i.beginPath();
  i.moveTo(q, 0);
  i.lineTo(q + T, 0);
  i.stroke();
  i.strokeStyle = g(Xa, v(a, b, c)) > 25 ? B : da;
  i.lineWidth = 2;
  i.beginPath();
  a = s * c / h;
  b = -a * Ua(k / 6) * (b - 50) / h * 2;
  i.arc(e + H(k / 3) * a - H(k / 6) * b, -f + O(k / 3) * a + O(k / 6) * b, 4, 0, k * 2, M);
  i.stroke();
  i.restore()
}
function G(a) {
  g($a, p.concat(a))
}
function $a(a, b, c, e, f, j) {
  var r = Ka(a, b, c),
      s = La(a, b, c),
      t = R(h * V(a, b, c) / l);
  u.clearRect(-60, -60, 120, 120);
  for (d in ea) {
    u.fillStyle = g(o, v(r, F(s + ea[d][0], 0, h), F(t + ea[d][1], 0, h)));
    u.beginPath();
    u.arc(10, 0, 50, k / 8, -k / 8, 1);
    u.lineTo(10, 0);
    u.closePath();
    u.fill();
    u.rotate(-k / 4, 60, 60)
  }
  for (d = 0; d < 2; d++) {
    u.fillStyle = d ? o(a, b, c) : o(e, f, j);
    u.beginPath();
    u.arc(0, 0, 40, (d ? -1 : 1) * k / 2, (d ? 1 : -1) * k / 2, 1);
    u.closePath();
    u.fill()
  }
}
function sa() {
  for (d = 0; d < 6; d++) if ($("#" + ta[d])[0].checked) return d
}
function X(a, b, c) {
  function e(ua, ab, bb, cb, db, eb, fb) {
    ua.fillStyle = aa(ua, 0, 0, ab, bb, fb);
    ua.fillRect(0, cb, db, eb)
  }
  var f, j, r, s, t, C = sa(),
      fa, ga, ha, D = z(a, b, c),
      va = D[0],
      ia = D[1];
  D = D[2];
  if (C == 0) {
    r = D;
    s = ia;
    t = y - va;
    fa = y;
    ha = ga = h;
    f = I;
    j = [g(o, v(va, h, h)), da];
    grad4 = [B, "rgba(0,0,0,0)"]
  } else if (C == 1 || C == 2) {
    r = D;
    s = y - va;
    t = ia;
    fa = h;
    ga = y;
    ha = h;
    f = [da, B];
    j = I;
    grad4 = [B, "rgba(255,255,255," + (h - ia) / h + ")"];
    if (C == 2) {
      r = ia;
      t = D;
      a = x(D / h * l);
      grad4 = [o(a, a, a), "rgba(" + a + "," + a + "," + a + "," + (h - D) / h + ")"]
    }
  } else if (C == 3) {
    r = c;
    s = b;
    t = a;
    f = [I[0], B];
    j = [o(a, l, 0), o(a, l, l)];
    grad4 = [o(a, 0, 0), o(a, 0, l)]
  } else if (C == 4) {
    r = a;
    s = c;
    t = b;
    f = [I[2], B];
    j = [o(l, b, 0), o(l, b, l)];
    grad4 = [o(0, b, 0), o(0, b, l)]
  } else if (C == 5) {
    r = b;
    s = a;
    t = c;
    f = [I[4], B];
    j = [o(l, 0, c), o(l, l, c)];
    grad4 = [o(0, 0, c), o(0, l, c)]
  }
  if (C > 2) ha = ga = fa = l;
  e(wa, 0, n, 0, 16, n, f);
  wa.fillStyle = "#ddd";
  wa.fillRect(0, x(195 - t / fa * 195), 16, 1);
  if (C > 2) {
    e(J, n, 0, 0, n, n, j);
    for (d = 0; d < n; d++) {
      J.globalAlpha = d / n;
      e(J, n, 0, d, n, 1, grad4)
    }
  } else {
    e(J, 0, n, 0, n, n, j);
    e(J, n, 0, 0, n, n, grad4)
  }
  J.fillStyle = "#555";
  J.fillRect(0, x(195 - s / ga * 195), n, 1);
  J.fillRect(x(r / ha * 195), 0, 1, n)
}
function xa(a) {
  a = qa(a, ya, 6);
  a = F(1 - a[1] / n, 0, 1);
  var b = g(z, p),
      c = p.slice(0, 3),
      e = sa();
  if (e < 3) {
    b[e] = e == 0 ? (1 - a) * y : a * h;
    c = g(v, b)
  } else c[e - 3] = x(l * a);
  return c
}
function za(a) {
  var b = qa(a, Aa, 6);
  a = F(b[0] / n, 0, 1);
  b = F(1 - b[1] / n, 0, 1);
  var c, e, f;
  f = sa();
  var j = g(z, p);
  if (f == 1) {
    c = 2;
    e = 0
  } else if (f % 3 == 0) {
    c = 2;
    e = 1
  } else if (f == 4) {
    c = 0;
    e = 2
  } else if (f % 3 == 2) {
    c = 1;
    e = 0
  }
  if (f < 3) {
    j[c] = a * h;
    j[e] = e ? b * h : (1 - b) * y;
    f = g(v, j)
  } else {
    f = p.slice(0, 3);
    f[c] = x(a * l);
    f[e] = x(b * l)
  }
  return f
}
function w(a, b, c, e) {
  Ba = p = [a, b, c];
  var f = z(a, b, c);
  g(z, Ba);
  var j = f.concat(p),
      r = o(a, b, c),
      s = $("#sp"),
      t = Va[r];
  if (t) {
    t = t.position();
    s.css({
      background: r,
      left: t.left - 3,
      width: 16,
      height: 16,
      top: t.top - 3,
      display: "block"
    })
  } else s.css("display", "none");
  g(ca, f);
  G(Ba);
  if (e != "x") Ca.value = o(a, b, c);
  for (d in ja) e != ja[d][0].id && ja[d].val(j[d]);
  g(X, p)
}
var Y = $("#w"),
    i = m(Y),
    Da = $("#c"),
    u = m(Da),
    ya = $("#k"),
    wa = m(ya),
    Aa = $("#j"),
    J = m(Aa),
    Ca = $("#x")[0],
    ja = [],
    P = 82,
    d = 0,
    T = 16,
    q = P - T / 2,
    U, W = A,
    ka = A,
    la = A,
    ma = A;
m = Math;
var k = m.PI,
    R = m.round,
    Ya = m.abs,
    V = m.max,
    oa = m.min,
    Ma = m.floor,
    O = m.sin,
    H = m.cos,
    Ua = m.tan,
    Sa = m.sqrt,
    Za = m.atan2,
    B = "#000",
    da = "#fff",
    E, ea = [
    [0, -15],
    [15, -15],
    [15, 0],
    [15, 15],
    [0, 15],
    [-15, 15],
    [-15, 0],
    [-15, -15]
    ],
    Ra = "background",
    p = [l, 0, 0],
    Ba = p,
    Ga = /(.)(.)(.)/,
    Ha = "$1$1$2$2$3$3",
    Ja = "0123456789ABCDEF";
U = $("#i");
var pa, S = [
  ["Hue", y],
  ["Saturation", h],
  ["Value", h],
  ["Red", l],
  ["Green", l],
  ["Blue", l]
],
    ta = "YJKOQF",
    I = [],
    Va = {},
    gb = Ia("B;MQS:B@;KK5<KG7BA0QM@QS3CE;H=98KMCI31H?4HLGOD26D:>B5SO@?PG4C?9DE;DQF6B;0DG9PS?C>:C=FBDG>O;1BF4I>;NK5D65LH4LH81HAAJL4=?@6>@6IA1H81CSFH>AJDABCG6NA3JM=6EAHQ5==;7N3EN:9NA;IL5<C1<PA6O@0JF3NSMN7GJJ;CP58IG2CM8<SMJJ5CD@7O2>QGFOG5KQ4CJ9=P?7N28B?:NL:HR5EQ:<P;6<@3IM3CSGIC5<KG>K=7IA@NF3JQ3<>:LO87H12IF4NF@HK9>P4@R46641<E4JS@CJ:6C80RB0");
for (d = 0; d < 7; d++) I.push(Fa(Ia("N5N50S0S5N0"), d));
m = K.createElement("input");
m.setAttribute("type", "color");
var Z, Q, Wa = function () {
  g(w, Na(this))
};
for (d in S) {
  E = $("<div/>");
  Z = $("<input/>", {
    type: "radio",
    name: "n",
    id: ta[d],
    checked: d == 0,
    click: function () {
      g(w, p)
    }
  });
  E.append(Z);
  Z = $("<label/>", {
    text: S[d][0]
  });
  Q = $("<input/>", {
    type: m.type !== "text" ? "number" : "text",
    min: 0,
    size: 3,
    max: S[d][1],
    id: S[d][0][0]
  });
  Q.keydown(function (a) {
    a = a.keyCode;
    return Oa(a) || 48 <= a && a <= 57
  });
  Q.change(Wa);
  Q.click(Wa);
  Q.keyup(function (a) {
    if (a.keyCode == 9) return A;
    if (x(this.value)) {
      a = Na(this);
      a.push(this.id);
      g(w, a)
    }
    return M
  });
  Z.append(Q);
  ja.push(Q);
  E.append(Z);
  U.append(E)
}
for (d = 0; d < 216; d++) {
  if (d % 36 == 0) {
    m = $("<tr/>");
    $("#p").append(m)
  }
  U = Fa(gb, d);
  E = $("<td/>", {
    click: function () {
      g(w, na(this.value))
    }
  });
  E[0].value = U;
  E.css(Ra, U);
  Va[U] = E;
  E.appendTo(m)
}
$(Ca).keydown(function (a) {
  a = a.keyCode;
  return Oa(a) || 48 <= a && a <= 57 || 65 <= a && a <= 70
});
$(Ca).keyup(function () {
  var a = na(this.value);
  if (a) {
    a.push("x");
    g(w, a)
  }
});
m = $("<tr/>");
for (d = 0; d < 17; d++) $("<td/>", {
  click: function () {
    this.value && g(w, na(this.value))
  }
}).appendTo(m);
$("#sc").append(m);
$("#v").click(function () {
  var a = g(o, p);
  delete L[a];
  L[a] = N(L) ? Qa()[0][0] + 1 : 0;
  Pa()
});
Pa();
Y.mousedown(function (a) {
  var b = ba(a, 104, Y);
  a = b[0];
  b = b[1];
  if (q + 1 < b && b < q + T) {
    W = M;
    Ta(a)
  } else if (b < q) {
    a = ra(a, b);
    if (a[3]) {
      ka = M;
      g(ca, a);
      G(g(v, a))
    }
  }
});
$(K).mousemove(function (a) {
  var b = ba(a, 104, Y),
      c = b[0];
  b = b[1];
  if (W) Ta(c);
  else if (ka) {
    a = ra(c, b);
    G(g(v, a));
    g(ca, a)
  } else if (la) {
    a = xa(a);
    G(a);
    g(X, a)
  } else if (ma) {
    a = za(a);
    G(a);
    g(X, a)
  }
});
$(K).mouseup(function (a) {
  var b = ba(a, 104, Y),
      c = b[0];
  b = b[1];
  if (W) {
    W = A;
    a = g(z, p);
    a[0] = c;
    g(w, g(v, a))
  } else if (ka) {
    ka = A;
    g(w, g(v, ra(c, b)))
  } else if (la) {
    g(w, xa(a));
    la = A
  } else if (ma) {
    g(w, za(a));
    ma = A
  }
});
Da.mouseup(function (a) {
  var b = ba(a, 65, Da);
  a = b[0];
  b = b[1];
  if (40 < b && b < 60) {
    b = ea[x((a + 22.5) / 45 % 8)];
    a = g(z, p);
    for (d = 0; d < 2;) a[d + 1] = F(b[d] + a[++d], 0, h);
    g(w, g(v, a))
  }
});
u.translate(60, 60);
for (d in ta);
ya.mousedown(function (a) {
  a = xa(a);
  G(a);
  g(X, a);
  la = M
});
Aa.mousedown(function (a) {
  a = za(a);
  G(a);
  g(X, a);
  ma = M
});
g(w, p)

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>Sharp Color Picker</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <div id="m">
      <h2>Sharp Color Picker</h2>
      <div id="a">
        <div><canvas id="c" width="120" height="120"></canvas></div>
        <div><label id="y">Hex <input id="x" type="text" size="7"></label></div>
        <div id="i"></div>
      </div>
      <div id="z">
        <div id="o">
          <h3>Wheel</h3>
          <canvas id="w" width="196" height="196"></canvas>
        </div>
        <div id="l">
          <h3>Panel</h3>
          <canvas id="j" width="196" height="196"></canvas>
          <canvas id="k" width="16" height="196"></canvas>
        </div>
        <h3>“Browser Safe” Colors</h3>
        <div id="tp">
          <table id="p"></table>
          <div id="sp"></div>
        </div>
        <div id="fc">
          <table id="sc"></table>
          <button id="v">Save</button>
        </div>
      </div>
      <div class="c"></div>
    </div>
    <div id="d">
      <a href="http://codefisher.org">codefisher.org</a>
    </div>
  </body>

</html>

#m { width:688px; background:#f1f1f1; margin:10px auto }
#m, #c, #k, #j, #w { border:1px solid #ddd }
h2 { border-bottom:1px solid #ddd; font-size:18px; margin:0; padding:5px 10px }
#z, #a { border-top:1px solid #fff }
#z, #a, #fc>*, #k, #j, #l, #o { float:left }
#a { width:195px; border-right:1px solid #ddd; padding:10px 2px }
#c, #k, #j, #w, #fc>* { display:block }
#c, #k, #j, #w { background:#f9f9f9; padding:5px }
#c { margin:0 auto 5px }
#a div:not(#i) { line-height:1.5em; padding:7px 10px }
input[type=text], input[type=number] { float:right; width:40px }
#x { width:80px }
input[type=radio] { margin-right:5px }
#fc>*, #tp { margin:10px 5px }
#z { width:468px; padding:0 10px }
h3 { font-size:1em; text-shadow:#fff 1px 1px 0; margin:10px }
h3, #d a, #d { text-align:center }
h3, #tp, .c { clear:both }
#o { width:226px }
#l { width:242px }
#k, #j { margin:0 0 10px }
#k { margin-left:0; border-left-width:0 }
#tp { padding-top:15px; position:relative }
table { border-collapse:collapse }
td { border:1px solid #fff; width:10px; height:10px }
tr { height:13px }
#sc td { width:20px; height:20px }
#sp { border:1px solid #000; position:absolute }
#d a, #d { color:#999; font-size: 12px }