SOURCE CODE: Color Format Converter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Color Format Converter | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="tool color Uize.Color Uize.Color.xHsv Uize.Color.xSvgColors Uize.Color.xCmyk Uize.Widgets.Form.Input.Text.Widget Uize.Util.PropertyAdapter"/>
  <meta name="description" content="Easily convert color values from one format to another. Convert between RGB hex, RGB tuple string, HSL, HSV, CMYK, and SVG color names."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="css/params-table.css"/>
  <style type="text/css">
    .horizontalSpacer {
    .paramsTable input {


<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Color Format Converter
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/color-format-converter.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>The <b>Color Format Converter Tool</b> lets you easily convert color values from one format to another. You can convert between <a href="" target="_blank" class="externalSiteLink">RGB</a> (Red, Green, Blue) hex, RGB tuple, <a href="" target="_blank" class="externalSiteLink">HSL</a> (Hue, Saturation, Lightness), <a href="" target="_blank" class="externalSiteLink">HSV</a> (Hue, Saturation, Value), <a href="" target="_blank" class="externalSiteLink">CMYK</a> (Cyan, Magenta, Yellow, Key), and <a href="" target="_blank" class="externalSiteLink">SVG</a> color names.</p>

    <p>To convert a color from one format to another, simply enter your color value in the text input that has the format that your color is in. As you type, all the other formats of the current color will be updated dynamically. You can also edit the current color by using the red, green, and blue sliders of the RGB color picker to the left, and you can see a more detailed preview of the current color in the color info widget to the right.</p>

  <!-- HTML for the date picker form field -->

    <table style="margin:auto;">
      <tr valign="top">
        <td id="page-colorPicker"></td>
        <td class="horizontalSpacer"></td>
          <table class="paramsTable">
                <td colspan="2" class="tableHeading">Different Formats of the Color</td>
              <td class="fieldLabel">RGB (Red, Green, Blue) Hex Value</td>
              <td id="page-colorAsRgbHex"></td>
              <td class="fieldLabel">RGB (Red, Green, Blue) Tuple</td>
              <td id="page-colorAsRgb"></td>
              <td class="fieldLabel">HSL (Hue, Saturation, Lightness) Tuple</td>
              <td id="page-colorAsHsl"></td>
              <td class="fieldLabel">HSV (Hue, Saturation, Value) Tuple</td>
              <td id="page-colorAsHsv"></td>
              <td class="fieldLabel">CMYK (Cyan, Magenta, Yellow, Key) Tuple</td>
              <td id="page-colorAsCmyk"></td>
              <td class="fieldLabel">SVG Color Name (hex, if no SVG name)</td>
              <td id="page-colorAsName"></td>
        <td class="horizontalSpacer"></td>
        <td id="page-colorInfo"></td>

<!-- JavaScript code to make the static HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = = UizeSite.Page.Example ();

    /*** create the color picker, the color info widget, and connect them via a property adapter ***/
      Uize.Util.PropertyAdapter ({
        propertyA:page.addChild (
        propertyB:page.addChild ('colorInfo',Uize.Widgets.ColorInfo.Widget,{built:false})

    /*** create the color format text input instances ***/
      function createColorFormatTextInput (widgetName,colorEncoding) {
        Uize.Util.PropertyAdapter ({
          propertyB:page.addChild (widgetName,Uize.Widgets.Form.Input.Text.Widget,{built:false}),
          valueAdapter:Uize.Color.adapter ('hex',colorEncoding)
      createColorFormatTextInput ('colorAsRgbHex','#hex');
      createColorFormatTextInput ('colorAsRgb','RGB string');
      createColorFormatTextInput ('colorAsHsl','HSL string');
      createColorFormatTextInput ('colorAsHsv','HSV string');
      createColorFormatTextInput ('colorAsCmyk','CMYK string');
      createColorFormatTextInput ('colorAsName','name');

    /*** wire up the page widget ***/
      page.wireUi ();