Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…
Cannot retrieve contributors at this time
53 lines (35 sloc) 3.54 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<title>2011-03-24 - NEW EXAMPLE - Color Format Converter | News | UIZE JavaScript Framework</title>
<meta name="keywords" content="UIZE JavaScript Framework News "/>
<meta name="description" content="The new Color Format Converter Tool lets you easily convert color values from one format to another."/>
<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.simpledoc.css"/>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../news-2011.html" class="breadcrumb breadcrumbWithArrow">2011 NEWS</a>
2011-03-24 - NEW EXAMPLE - Color Format Converter
<div class="main">
<div class="contents0">
<p>The new <a href="../examples/color-format-converter.html">Color Format Converter Tool</a> lets you easily convert color values from one format to another.</p>
<p>The tool lets you 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. To convert a color from one format to another, one simply enters the color value into the text input that has the format that the color is in. As one types, all the other formats of the current color are updated dynamically. One can also edit the current color by using the red, green, and blue sliders of the RGB color picker, and one can see a more detailed preview of the current color in the color info widget.</p>
<p>The <b>Color Format Converter Tool</b> is a good example of how the <code><a href="../reference/Uize.Util.PropertyAdapter.html">Uize.Util.PropertyAdapter</a></code> class can be used to easily connect multiple set-get properties of different widget instances together, so that their values are kept synchronized. In this example, the <code>value</code> set-get property of all the text input widgets as well as the color info widget are synchronized to the central color picker widget, so that modifying the value for any one of the widgets causes all the other widgets to be synchronized to the new value. The example is also a good demonstration of the <code><a href="../reference/Uize.Color.xHsv.html">Uize.Color.xHsv</a></code>, <code><a href="../reference/Uize.Color.xCmyk.html">Uize.Color.xCmyk</a></code>, and <code><a href="../reference/Uize.Color.xSvgColors.html">Uize.Color.xSvgColors</a></code> color encoding extension modules.</p>
<p><a href="../examples/color-format-converter.html">CHECK IT OUT</a></p>
<script type="text/javascript">
Uize.module ({
builder:function () {( = UizeDotCom.Page.Doc ()).wireUi ()}
Jump to Line
Something went wrong with that request. Please try again.