A Tiny Color Converter With jQuery - Colorizer

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.

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.

  • Publication date: 14.11.2018
  • Source