color palette
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../../_static/js/dojo/dojo.js'></script>
<body class="claro">
<div id="palette"></div>
</body>
CSS
<link rel="stylesheet" href="../../_static/js/dojo/../dijit/themes/claro/claro.css">
JavaScript
require([
"dojo/_base/array",
"dojo/dom-construct",
"dojox/color/Palette"
], function(array, domConstruct, Palette){
var tbl = domConstruct.create('table', {
style: { borderSpacing: '0 3px' }
}, 'palette');
for (palette in Palette.generators) {
var tr = domConstruct.create('tr', null, tbl);
var p = Palette.generate("#A62F00", palette);
domConstruct.create('td', {
innerHTML: palette,
style: {
verticalAlign: 'middle',
paddingRight: '4px'
}
}, tr);
array.forEach(p.colors, function(color) {
domConstruct.create('td', {
style: {
height: '24px',
width: '18px',
border: '1px solid black',
backgroundColor: color.toHex()
}
}, tr);
});
}
});