SOURCE CODE: Color Format Converter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Color Format Converter | JavaScript Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="tool Uize.Color Uize.Color.xHsv Uize.Color.xSvgColors Uize.Color.xCmyk Uize.Widget.TextInput 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="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.colorinfo.css"/>
<link rel="stylesheet" href="css/params-table.css"/>
<style type="text/css">
#page_colorInfo {
display:block;
}
.horizontalSpacer {
width:10px;
}
.paramsTable input {
width:180px;
}
</style>
</head>
<body>
<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="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Color Format Converter
<div id="page-actions" class="pageActions">
<a href="source-code/color-format-converter.html" class="buttonLink">SOURCE</a>
</div>
</h1>
<div class="main">
<!-- 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="http://en.wikipedia.org/wiki/Rgb" target="_blank" class="externalSiteLink">RGB</a> (Red, Green, Blue) hex, RGB tuple, <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank" class="externalSiteLink">HSL</a> (Hue, Saturation, Lightness), <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank" class="externalSiteLink">HSV</a> (Hue, Saturation, Value), <a href="http://en.wikipedia.org/wiki/CMYK" target="_blank" class="externalSiteLink">CMYK</a> (Cyan, Magenta, Yellow, Key), and <a href="http://www.w3.org/TR/css3-color/#svg-color" 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>
</div>
<!-- HTML for the date picker form field -->
<form>
<table style="margin:auto;">
<tr valign="top">
<td id="page_colorPicker"></td>
<td class="horizontalSpacer"></td>
<td>
<table class="paramsTable">
<thead>
<tr>
<td colspan="2" class="tableHeading">Different Formats of the Color</td>
</tr>
</thead>
<tr>
<td class="fieldLabel">RGB (Red, Green, Blue) Hex Value</td>
<td><input id="page_colorAsRgbHex-input" type="text"/></td>
</tr>
<tr>
<td class="fieldLabel">RGB (Red, Green, Blue) Tuple</td>
<td><input id="page_colorAsRgb-input" type="text"/></td>
</tr>
<tr>
<td class="fieldLabel">HSL (Hue, Saturation, Lightness) Tuple</td>
<td><input id="page_colorAsHsl-input" type="text"/></td>
</tr>
<tr>
<td class="fieldLabel">HSV (Hue, Saturation, Value) Tuple</td>
<td><input id="page_colorAsHsv-input" type="text"/></td>
</tr>
<tr>
<td class="fieldLabel">CMYK (Cyan, Magenta, Yellow, Key) Tuple</td>
<td><input id="page_colorAsCmyk-input" type="text"/></td>
</tr>
<tr>
<td class="fieldLabel">SVG Color Name (hex, if no SVG name)</td>
<td><input id="page_colorAsName-input" type="text"/></td>
</tr>
</table>
</td>
<td class="horizontalSpacer"></td>
<td id="page_colorInfo"></td>
</tr>
</table>
</form>
</div>
<!-- JavaScript code to make the static HTML "come alive" -->
<script type="text/javascript">
Uize.module ({
required:[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Color',
'Uize.Color.xHsv',
'Uize.Color.xCmyk',
'Uize.Color.xSvgColors',
'Uize.Widget.ColorPicker',
'Uize.Widget.ColorInfo',
'Uize.Widget.TextInput',
'Uize.Util.PropertyAdapter'
],
builder:function () {
/*** create the example page widget ***/
var page = window.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 (
'colorPicker',
Uize.Widget.ColorPicker,
{
value:'ee82ee',
built:false,
sliderWidth:40,
sliderHeight:289
}
),
propertyB:page.addChild ('colorInfo',Uize.Widget.ColorInfo)
});
/*** create the color format text input instances ***/
function createColorFormatTextInput (widgetName,colorEncoding) {
Uize.Util.PropertyAdapter ({
propertyA:page.children.colorPicker,
propertyB:page.addChild (widgetName,Uize.Widget.TextInput),
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 ();
}
});
</script>
</body>
</html>