JS Color Converter

by Matheus Stein

HTML

<div class="container">

  <p class="title">
    JS Color Converter
  </p>
  
  <div class="color"></div>
  
  <p>
  RGB
  </p>
  
  <input type="text" id="RGB_R" onkeyup="update(0)" onchange="update(0)" onpaste="update(0)" value="0"/><br>
  <input type="text" id="RGB_G" onkeyup="update(0)" onchange="update(0)" onpaste="update(0)" value="0"/><br>
  <input type="text" id="RGB_B" onkeyup="update(0)" onchange="update(0)" onpaste="update(0)" value="0"/><br>

  <p>
  HSV
  </p>
  
  <input type="text" id="HSV_H" onkeyup="update(1)" onchange="update(1)" onpaste="update(1)" value="0"/><br>
  <input type="text" id="HSV_S" onkeyup="update(1)" onchange="update(1)" onpaste="update(1)" value="0"/><br>
  <input type="text" id="HSV_V" onkeyup="update(1)" onchange="update(1)" onpaste="update(1)" value="0"/><br>
  
  <p>
  CMYK
  </p>
  
  <input type="text" id="CMYK_C" onkeyup="update(2)" onchange="update(2)" onpaste="update(2)" value="100"/><br>
  <input type="text" id="CMYK_M" onkeyup="update(2)" onchange="update(2)" onpaste="update(2)" value="100"/><br>
  <input type="text" id="CMYK_Y" onkeyup="update(2)" onchange="update(2)" onpaste="update(2)" value="100"/><br>
  <input type="text" id="CMYK_K" onkeyup="update(2)" onchange="update(2)" onpaste="update(2)" value="100"/><br>

  <p class="footer">
    Fiddle by Matheus Stein | Code by <a href="http://www.webtoolkit.info/javascript_color_conversion.html#.XECCJFVKiUk">Web Toolkit</a>
  </p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700');
  body {
    background: #20262e;
    font-family: 'Ubuntu Mono', monospace;
    color: #beccdd;
    font-size: 14px;
    margin: 0
  }

  input[type=text] {
    width: 376px;
    border: 0;
    background: #494d54;
    resize: none;
    color: #beccdd;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
    margin-bottom:8px;
  }

  .container {
    width: 400px;
    margin-left: calc( 50vw - 230px);
    margin-top: 100px;
    margin-bottom: 100px;
    background: #292f36;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.3);
  }

  .title {
    margin: 0 0 16px 0;
    font-weight: bold;
    font-size: 16px;
  }

  .footer {
    margin: 16px 0 0 0;
    font-size: 12px;
  }
  
  .color {
    display:block;
    height:32px;
    border-radius:4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
    background: #000;
  }

JavaScript

function HSV(h, s, v) {


    if (h <= 0) { h = 0; }


    if (s <= 0) { s = 0; }


    if (v <= 0) { v = 0; }

 


    if (h > 360) { h = 360; }


    if (s > 100) { s = 100; }


    if (v > 100) { v = 100; }

 


    this.h = h;


    this.s = s;


    this.v = v;

}

 


function RGB(r, g, b) {


    if (r <= 0) { r = 0; }


    if (g <= 0) { g = 0; }


    if (b <= 0) { b = 0; }

 


    if (r > 255) { r = 255; }


    if (g > 255) { g = 255; }


    if (b > 255) { b = 255; }

 


    this.r = r;


    this.g = g;


    this.b = b;

}

 


function CMYK(c, m, y, k) {


    if (c <= 0) { c = 0; }


    if (m <= 0) { m = 0; }


    if (y <= 0) { y = 0; }


    if (k <= 0) { k = 0; }

 


    if (c > 100) { c = 100; }


    if (m > 100) { m = 100; }


    if (y > 100) { y = 100; }


    if (k > 100) { k = 100; }

 


    this.c = c;


    this.m = m;


    this.y = y;


    this.k = k;

}

 


var ColorConverter = {

 


    _RGBtoHSV : function  (RGB) {


        var result = new HSV(0, 0, 0);

 


        r = RGB.r / 255;


        g = RGB.g / 255;


        b = RGB.b / 255;

 


        var minVal = Math.min(r, g, b);


        var maxVal = Math.max(r, g, b);


        var delta = maxVal - minVal;

 


        result.v = maxVal;

 


        if (delta == 0) {


            result.h = 0;


            result.s = 0;


        } else {


            result.s = delta / maxVal;


            var del_R = (((maxVal - r) / 6) + (delta / 2)) / delta;


            var del_G = (((maxVal - g) / 6) + (delta / 2)) / delta;


            var del_B = (((maxVal - b) / 6) + (delta / 2)) / delta;

 


            if (r == maxVal) { result.h = del_B - del_G; }


            else if (g == maxVal) { result.h = (1 / 3) + del_R - del_B; }


            else if (b == maxVal) { result.h = (2 / 3) + del_G - del_R; }

 


            if (result.h < 0) { result.h += 1; }


            if (result.h > 1) { result.h -= 1; }


        }

 


        result.h = Math.round(result.h * 360);


...