A Tiny Color Converter With jQuery - Colorizer

Colorizer is a small and convenient color converter which provides quickly color conversions between HEX, RGB, HSL, HSV, and Float.

Built with jQuery and tinyColor libraries.

How to use it:

1. Create the HTML for the color converter.

<div class="datagrid">
  <table id="color-input-table">
    <tbody>
      <tr>
        <td class="data-value data-input"><div id="color-input">
            <input type="text" placeholder="Write Your Color Code Here" id="color" />
          </div></td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr class="alt">
        <td>Hex</td>
        <td><pre id="hex-output"></pre></td>
      </tr>
      <tr>
        <td>RGB</td>
        <td><pre id="rgb-output"></pre></td>
      </tr>
      <tr class="alt">
        <td>Float</td>
        <td><pre id="float-output"></pre></td>
      </tr>
      <tr>
        <td>HSL</td>
        <!---->
        <td><pre id="hsl-output"></pre></td>
      </tr>
      <tr class="alt">
        <td>HSV</td>
        <td><pre id="hsv-output"></pre></td>
      </tr>
    </tbody>
  </table>
</div>

2. Insert jQuery JavaScript library and the tinycolor.js into the page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="tinycolor.js"></script>

3. The main JavaScript to enable the color converter.

function colorChange(color) {
  var tiny = tinycolor(color);

  $("#hex-output").text(tiny.toHexString());
  $("#rgb-output").text(tiny.toRgbString());
  $("#float-output").text(tiny.toFloatString());
  $("#hsl-output").text(tiny.toHslString());
  $("#hsv-output").text(tiny.toHsvString());

  $("#color-input").css("border-color",
    tiny.toHexString()
  );
}

$(function () {
  $("#color").bind("keyup change", function () {
    colorChange($(this).val());
  });
  colorChange({
    r: 0,
    g: 0,
    b: 0
  });
});

---

This awesome jQuery plugin is developed by excalith. For more Advanced Usages, please check the demo page or visit the official website.