Skip to main content
Known Participant
January 19, 2011
Answered

get swatches in dropdown list with color preview...

  • January 19, 2011
  • 4 replies
  • 18103 views

Hi experts,

I am creating one gui for swatches related automation task in CS4 using javascript. Is it possible to get swatches in dropdown list with its color preview? Same like colors in Swatches palette.

Your help will be much appreciated. Thanks in advance.

Thiyagu

This topic has been closed for replies.
Correct answer Laubender

Could you please share the fixed solution? I would be very interested, too 🙂


Hi  Mathias,

see Marc's original code at his own website:

 

InDesign Scripting Forum: 25 ‘sticky’ posts [roundup]
Marc Autret, March 07, 2011
Get Swatches in DropDownList with Color Preview

https://www.indiscripts.com/post/2011/03/indesign-scripting-forum-25-sticky-posts#hd4sb1

 

Regards,
Uwe Laubender

( ACP )

4 replies

Colin Flashman
Community Expert
Community Expert
December 4, 2015

Love the way this works. Please excuse my ignorance, but if I want to apply the value selected from the dropdown field to a task at hand (e.g. changing the color of a QR code), how do I call this value in?

A typical QR code line looks like this:

myPageItem.createHyperlinkQRCode("http://www.adobe.com", "Magenta");


I've swapped out the web address for a variable I'm calling in, but I can't seem to get the syntax right to replace the color:


myPageItem.createHyperlinkQRCode(myURL, ddl.selection);


Can anyone please let me know where my syntax is going wrong? Thank you.

If the answer wasn't in my post, perhaps it might be on my blog at colecandoo!
Kasyan Servetsky
Legend
January 15, 2022

Hi Colin,

Recently I wrote a script using this feature.

It’s not as simple as it seems at the start: some swatches may produce an error. For example, this one:

 

On this line

color.space = RGB; 

it produces an error: Cannot edit this color property.

 To work around this issue, I enclosed Marc’s function into a try-catch block and my function which returns either the colors array if everything is ok, or null.

 

function GetColors() {
	try { 
// Marc's code here
	}
	catch(err) {
		$.writeln(err.message + ", line: " + err.line);
		colors = null;
	}
 
	return colors;
}

 

 

Then in the dialog box, in an error occurred (colors == null), the swatches are not displayed: only their names instead. Otherwise, they are processed like so:

 

w.g1.pl.ddl = w.g1.pl.add("dropdownlist", undefined, ((colors == null) ? allSwatchNames : undefined));
if (colors != null) {
	var n = colors.length;
	for (i = 0 ; i < n ; ++i) {
		 (w.g1.pl.ddl.add("item", "\xa0"+colors[i].name)).image = colors[i].png; 
	}
}
w.g1.pl.ddl.selection = set.oddSwatchColor[0];

 

In the beginning, I get the array of swatches like this:

 

for (var s = 0; s < doc.swatches.length; s++) {
	allSwatches.push(doc.swatches[s]);
	allSwatchNames.push(doc.swatches[s].name);
}

 

And apply the selected swatch to a paragraph like so:

par.paragraphShadingColor = allSwatches[set.oddSwatchColor[0]];

where set.oddSwatchColor[0] is drop down list's selection.index.

Hope it helps!

If it's not clear, let me know and I'll share the whole script.

— Kas

 

 

 

 

Marc Autret
Legend
January 25, 2011

Here is an improved version of my original draft.

This one should support most of the Swatch types including Spot colors (Mixed Inks and Gradients remain in the todo list).

Also, it offers a localisation feature for special color names (None, Paper, Black, Registration).

/**********************************************************/
/*                                                        */
/*     See Your Swatches in ScriptUI | v.1.1 (beta)       */
/*                                                        */
/**********************************************************/

// PNG-String Generator (=> 13X13 pixels)
//----------------------------------------------------------
var pngSwatch = (function()
{
     // Table of CRCs of 8-bit messages
     var CRC_256 = [0, 0x77073096, 0xee0e612c, 0x990951ba, 0x76dc419, 0x706af48f, 0xe963a535, 0x9e6495a3, 0xedb8832, 0x79dcb8a4, 0xe0d5e91e, 0x97d2d988, 0x9b64c2b, 0x7eb17cbd, 0xe7b82d07, 0x90bf1d91, 0x1db71064, 0x6ab020f2, 0xf3b97148, 0x84be41de, 0x1adad47d, 0x6ddde4eb, 0xf4d4b551, 0x83d385c7, 0x136c9856, 0x646ba8c0, 0xfd62f97a, 0x8a65c9ec, 0x14015c4f, 0x63066cd9, 0xfa0f3d63, 0x8d080df5, 0x3b6e20c8, 0x4c69105e, 0xd56041e4, 0xa2677172, 0x3c03e4d1, 0x4b04d447, 0xd20d85fd, 0xa50ab56b, 0x35b5a8fa, 0x42b2986c, 0xdbbbc9d6, 0xacbcf940, 0x32d86ce3, 0x45df5c75, 0xdcd60dcf, 0xabd13d59, 0x26d930ac, 0x51de003a, 0xc8d75180, 0xbfd06116, 0x21b4f4b5, 0x56b3c423, 0xcfba9599, 0xb8bda50f, 0x2802b89e, 0x5f058808, 0xc60cd9b2, 0xb10be924, 0x2f6f7c87, 0x58684c11, 0xc1611dab, 0xb6662d3d, 0x76dc4190, 0x1db7106, 0x98d220bc, 0xefd5102a, 0x71b18589, 0x6b6b51f, 0x9fbfe4a5, 0xe8b8d433, 0x7807c9a2, 0xf00f934, 0x9609a88e, 0xe10e9818, 0x7f6a0dbb, 0x86d3d2d, 0x91646c97, 0xe6635c01, 0x6b6b51f4, 0x1c6c6162, 0x856530d8, 0xf262004e, 0x6c0695ed, 0x1b01a57b, 0x8208f4c1, 0xf50fc457, 0x65b0d9c6, 0x12b7e950, 0x8bbeb8ea, 0xfcb9887c, 0x62dd1ddf, 0x15da2d49, 0x8cd37cf3, 0xfbd44c65, 0x4db26158, 0x3ab551ce, 0xa3bc0074, 0xd4bb30e2, 0x4adfa541, 0x3dd895d7, 0xa4d1c46d, 0xd3d6f4fb, 0x4369e96a, 0x346ed9fc, 0xad678846, 0xda60b8d0, 0x44042d73, 0x33031de5, 0xaa0a4c5f, 0xdd0d7cc9, 0x5005713c, 0x270241aa, 0xbe0b1010, 0xc90c2086, 0x5768b525, 0x206f85b3, 0xb966d409, 0xce61e49f, 0x5edef90e, 0x29d9c998, 0xb0d09822, 0xc7d7a8b4, 0x59b33d17, 0x2eb40d81, 0xb7bd5c3b, 0xc0ba6cad, 0xedb88320, 0x9abfb3b6, 0x3b6e20c, 0x74b1d29a, 0xead54739, 0x9dd277af, 0x4db2615, 0x73dc1683, 0xe3630b12, 0x94643b84, 0xd6d6a3e, 0x7a6a5aa8, 0xe40ecf0b, 0x9309ff9d, 0xa00ae27, 0x7d079eb1, 0xf00f9344, 0x8708a3d2, 0x1e01f268, 0x6906c2fe, 0xf762575d, 0x806567cb, 0x196c3671, 0x6e6b06e7, 0xfed41b76, 0x89d32be0, 0x10da7a5a, 0x67dd4acc, 0xf9b9df6f, 0x8ebeeff9, 0x17b7be43, 0x60b08ed5, 0xd6d6a3e8, 0xa1d1937e, 0x38d8c2c4, 0x4fdff252, 0xd1bb67f1, 0xa6bc5767, 0x3fb506dd, 0x48b2364b, 0xd80d2bda, 0xaf0a1b4c, 0x36034af6, 0x41047a60, 0xdf60efc3, 0xa867df55, 0x316e8eef, 0x4669be79, 0xcb61b38c, 0xbc66831a, 0x256fd2a0, 0x5268e236, 0xcc0c7795, 0xbb0b4703, 0x220216b9, 0x5505262f, 0xc5ba3bbe, 0xb2bd0b28, 0x2bb45a92, 0x5cb36a04, 0xc2d7ffa7, 0xb5d0cf31, 0x2cd99e8b, 0x5bdeae1d, 0x9b64c2b0, 0xec63f226, 0x756aa39c, 0x26d930a, 0x9c0906a9, 0xeb0e363f, 0x72076785, 0x5005713, 0x95bf4a82, 0xe2b87a14, 0x7bb12bae, 0xcb61b38, 0x92d28e9b, 0xe5d5be0d, 0x7cdcefb7, 0xbdbdf21, 0x86d3d2d4, 0xf1d4e242, 0x68ddb3f8, 0x1fda836e, 0x81be16cd, 0xf6b9265b, 0x6fb077e1, 0x18b74777, 0x88085ae6, 0xff0f6a70, 0x66063bca, 0x11010b5c, 0x8f659eff, 0xf862ae69, 0x616bffd3, 0x166ccf45, 0xa00ae278, 0xd70dd2ee, 0x4e048354, 0x3903b3c2, 0xa7672661, 0xd06016f7, 0x4969474d, 0x3e6e77db, 0xaed16a4a, 0xd9d65adc, 0x40df0b66, 0x37d83bf0, 0xa9bcae53, 0xdebb9ec5, 0x47b2cf7f, 0x30b5ffe9, 0xbdbdf21c, 0xcabac28a, 0x53b39330, 0x24b4a3a6, 0xbad03605, 0xcdd70693, 0x54de5729, 0x23d967bf, 0xb3667a2e, 0xc4614ab8, 0x5d681b02, 0x2a6f2b94, 0xb40bbe37, 0xc30c8ea1, 0x5a05df1b, 0x2d02ef8d];
     
     // PNG Cyclic Redundancy Code algorithm -- http://www.w3.org/TR/PNG/#D-CRCAppendix
     var crc32 = function(/*uint[]*/buf)
          {
          var c = 0xffffffff >>> 0,
               n = buf.length >>> 0,
               i;
          for( i=0 ; i < n ; ++i )
               c = CRC_256[( ( c>>>0 ) ^ buf) & 0xff] ^ (c >>> 8);
     
          return (c ^ 0xffffffff)>>>0;
          };

     var PNG_PROLOG = "\x89PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00\x00\x00\r\x00\x00\x00\r\b\x03\x00\x00\x00E5\x14N\x00\x00\x00\x06",
          PNG_EPILOG = "\x00\x00\x00\x16IDATx\xDAb`D\x06\f\x8C\f\b0\xC8x\xC8\x00 \xC0\x00\x11\xC6\x001{U\x93\xB6\x00\x00\x00\x00IEND\xAEB`\x82";

     return function(/*uint[3]*/rgb)
          {
          var buf = [0x50,0x4C,0x54,0x45, rgb[0], rgb[1], rgb[2], 0, 0, 0],
               crc = crc32(buf),
               i, r;
          
          buf = buf.concat([ (crc>>>24)&0xFF, (crc>>>16)&0xFF, (crc>>>8)&0xFF, (crc>>>0)&0xFF ]);
          i = buf.length;
          while( i-- )
               buf = String.fromCharCode(buf);
          
          r = PNG_PROLOG + buf.join('') + PNG_EPILOG;
          
          buf.length = 0;
          buf = null;
          return r;
          };
})();

var PNG_NONE = "\x89PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00\x00\x00\r\x00\x00\x00\r\b\x03\x00\x00\x00E5\x14N\x00\x00\x00\fPLTE\xFF\xFF\xFF\x00\x00\x00\xFF\xBC\xBC\xFF\x00\x00 C\x89[\x00\x00\x002IDATx\xDAL\xC7\xC9\x01\x000\b\x020\xD4\xFDwn\xF1\xC2\xFC\x02\xBB`\x18\x1Eg\x1E\xAE\xFD`\xC7\xEC2\xB3J\xAFS\x9B\xE46\x9C\xC2)\xDC\xF5\x04\x18\x00+\xB9\x00z\xA7\xBDj\x1B\x00\x00\x00\x00IEND\xAEB`\x82";

var localeColor = function(/*str*/name)
{
     return '['+app.translateKeyString('$ID/'+name)+']';
};

// Parse the app|doc Swatches
//----------------------------------------------------------
var RGB = ColorSpace.RGB,
     SPOT = ColorModel.SPOT,
     REGISTRATION = ColorModel.REGISTRATION,
     MIXEDINK = ColorModel.MIXEDINKMODEL;

var     target = (app.documents.length&&app.activeDocument)||app,
     swatches = target.swatches.everyItem().getElements(),
     n = swatches.length,
     color, rgbValues,
     colors = [],
     sp, md, nm,
     i, t;

for( i=n-1 ; i>=0 ; i-- )
     {
     color = swatches;

     if( !(color instanceof Color) ) continue;
     
     color = color.getElements()[0];
     sp = color.space;
     md = color.model;
     nm = color.name;

     if( MIXEDINK==md ) continue;     // TODO
     

     switch( -(REGISTRATION==md||"Black" == nm) || +(RGB==sp) )
          {
          case -1:
               rgbValues = [0,0,0];
               nm = localeColor(nm);
               break;
          case 1:
               rgbValues = color.colorValue;
               break;
          default:
               // backup the color value
               t = color.colorValue;
               // convert to rgb
               color.space = RGB;
               rgbValues = color.colorValue;
               // revert to the color space
               color.space = sp;
               color.colorValue = t;
          }

     if( nm=="Paper" ) nm = localeColor(nm);

     colors.unshift({
          name:nm,
          png: pngSwatch(rgbValues),
          id:color.id
          });
     }

colors.unshift({
     name:localeColor("None"),
     png: PNG_NONE,
     id:target.swatches.itemByName('None').id
     });

// UI
//----------------------------------------------------------
var w = new Window("dialog", "See Your Swatches!"),
     ddl = w.add("dropdownlist");
n = colors.length;
for( i=0 ; i < n ; ++i )
     (ddl.add('item', "\xa0"+colors.name)).image = colors.png;
ddl.selection = 0;
w.show();

Hope this works in other platforms/contexts...

@+

Marc

Inspiring
January 26, 2011

Marc, this is an awesome find. If you can find Javascript implementations of Freetype and zlib, you can even add font previews to dialogs!

Some more fun, using 3 different images -- for CMYK, RGB, and "other":

Now I think I could make that Space Invaders script I was dreamin' about ...

Inspiring
January 26, 2011

.. Here is a slightly easier to change PNG class. It adds one parameter to pngSwatch: the size of the new image.

var pngSwatch = (function()
{
     // Table of CRCs of 8-bit messages
     var CRC_256 = [0, 0x77073096, 0xee0e612c, 0x990951ba, 0x76dc419, 0x706af48f, 0xe963a535, 0x9e6495a3, 0xedb8832, 0x79dcb8a4, 0xe0d5e91e, 0x97d2d988, 0x9b64c2b, 0x7eb17cbd, 0xe7b82d07, 0x90bf1d91, 0x1db71064, 0x6ab020f2, 0xf3b97148, 0x84be41de, 0x1adad47d, 0x6ddde4eb, 0xf4d4b551, 0x83d385c7, 0x136c9856, 0x646ba8c0, 0xfd62f97a, 0x8a65c9ec, 0x14015c4f, 0x63066cd9, 0xfa0f3d63, 0x8d080df5, 0x3b6e20c8, 0x4c69105e, 0xd56041e4, 0xa2677172, 0x3c03e4d1, 0x4b04d447, 0xd20d85fd, 0xa50ab56b, 0x35b5a8fa, 0x42b2986c, 0xdbbbc9d6, 0xacbcf940, 0x32d86ce3, 0x45df5c75, 0xdcd60dcf, 0xabd13d59, 0x26d930ac, 0x51de003a, 0xc8d75180, 0xbfd06116, 0x21b4f4b5, 0x56b3c423, 0xcfba9599, 0xb8bda50f, 0x2802b89e, 0x5f058808, 0xc60cd9b2, 0xb10be924, 0x2f6f7c87, 0x58684c11, 0xc1611dab, 0xb6662d3d, 0x76dc4190, 0x1db7106, 0x98d220bc, 0xefd5102a, 0x71b18589, 0x6b6b51f, 0x9fbfe4a5, 0xe8b8d433, 0x7807c9a2, 0xf00f934, 0x9609a88e, 0xe10e9818, 0x7f6a0dbb, 0x86d3d2d, 0x91646c97, 0xe6635c01, 0x6b6b51f4, 0x1c6c6162, 0x856530d8, 0xf262004e, 0x6c0695ed, 0x1b01a57b, 0x8208f4c1, 0xf50fc457, 0x65b0d9c6, 0x12b7e950, 0x8bbeb8ea, 0xfcb9887c, 0x62dd1ddf, 0x15da2d49, 0x8cd37cf3, 0xfbd44c65, 0x4db26158, 0x3ab551ce, 0xa3bc0074, 0xd4bb30e2, 0x4adfa541, 0x3dd895d7, 0xa4d1c46d, 0xd3d6f4fb, 0x4369e96a, 0x346ed9fc, 0xad678846, 0xda60b8d0, 0x44042d73, 0x33031de5, 0xaa0a4c5f, 0xdd0d7cc9, 0x5005713c, 0x270241aa, 0xbe0b1010, 0xc90c2086, 0x5768b525, 0x206f85b3, 0xb966d409, 0xce61e49f, 0x5edef90e, 0x29d9c998, 0xb0d09822, 0xc7d7a8b4, 0x59b33d17, 0x2eb40d81, 0xb7bd5c3b, 0xc0ba6cad, 0xedb88320, 0x9abfb3b6, 0x3b6e20c, 0x74b1d29a, 0xead54739, 0x9dd277af, 0x4db2615, 0x73dc1683, 0xe3630b12, 0x94643b84, 0xd6d6a3e, 0x7a6a5aa8, 0xe40ecf0b, 0x9309ff9d, 0xa00ae27, 0x7d079eb1, 0xf00f9344, 0x8708a3d2, 0x1e01f268, 0x6906c2fe, 0xf762575d, 0x806567cb, 0x196c3671, 0x6e6b06e7, 0xfed41b76, 0x89d32be0, 0x10da7a5a, 0x67dd4acc, 0xf9b9df6f, 0x8ebeeff9, 0x17b7be43, 0x60b08ed5, 0xd6d6a3e8, 0xa1d1937e, 0x38d8c2c4, 0x4fdff252, 0xd1bb67f1, 0xa6bc5767, 0x3fb506dd, 0x48b2364b, 0xd80d2bda, 0xaf0a1b4c, 0x36034af6, 0x41047a60, 0xdf60efc3, 0xa867df55, 0x316e8eef, 0x4669be79, 0xcb61b38c, 0xbc66831a, 0x256fd2a0, 0x5268e236, 0xcc0c7795, 0xbb0b4703, 0x220216b9, 0x5505262f, 0xc5ba3bbe, 0xb2bd0b28, 0x2bb45a92, 0x5cb36a04, 0xc2d7ffa7, 0xb5d0cf31, 0x2cd99e8b, 0x5bdeae1d, 0x9b64c2b0, 0xec63f226, 0x756aa39c, 0x26d930a, 0x9c0906a9, 0xeb0e363f, 0x72076785, 0x5005713, 0x95bf4a82, 0xe2b87a14, 0x7bb12bae, 0xcb61b38, 0x92d28e9b, 0xe5d5be0d, 0x7cdcefb7, 0xbdbdf21, 0x86d3d2d4, 0xf1d4e242, 0x68ddb3f8, 0x1fda836e, 0x81be16cd, 0xf6b9265b, 0x6fb077e1, 0x18b74777, 0x88085ae6, 0xff0f6a70, 0x66063bca, 0x11010b5c, 0x8f659eff, 0xf862ae69, 0x616bffd3, 0x166ccf45, 0xa00ae278, 0xd70dd2ee, 0x4e048354, 0x3903b3c2, 0xa7672661, 0xd06016f7, 0x4969474d, 0x3e6e77db, 0xaed16a4a, 0xd9d65adc, 0x40df0b66, 0x37d83bf0, 0xa9bcae53, 0xdebb9ec5, 0x47b2cf7f, 0x30b5ffe9, 0xbdbdf21c, 0xcabac28a, 0x53b39330, 0x24b4a3a6, 0xbad03605, 0xcdd70693, 0x54de5729, 0x23d967bf, 0xb3667a2e, 0xc4614ab8, 0x5d681b02, 0x2a6f2b94, 0xb40bbe37, 0xc30c8ea1, 0x5a05df1b, 0x2d02ef8d];

     // PNG Cyclic Redundancy Code algorithm -- http://www.w3.org/TR/PNG/#D-CRCAppendix
     var crc32s = function(/*uint[]*/buf)
          {
          var c = 0xffffffff >>> 0,
               n = buf.length >>> 0,
               i;
          for( i=0 ; i < n ; ++i )
               c = CRC_256[( ( c>>>0 ) ^ buf.charCodeAt(i)) & 0xff] ^ (c >>> 8);

          return (c ^ 0xffffffff)>>>0;
          };


var header = function ()
{
  return "\x89PNG\x0D\x0A\x1A\x0A";
};
var i2s = function (/*int32*/i)
{
  return String.fromCharCode(i>>>24) + String.fromCharCode(i>>>16) + String.fromCharCode(i>>>8) + String.fromCharCode(i);
}
var chunk = function (/*4 Char PNG code*/chunkType, /*data*/data)
{
  var buf = String.fromCharCode((data.length >>> 24) & 0xff) + String.fromCharCode((data.length >>> 16) & 0xff) + String.fromCharCode((data.length >>> 8) & 0xff) + String.fromCharCode(data.length & 0xff)
   + chunkType + data;
  var crc = crc32s(buf);
  buf += i2s (crc);
  return buf;
};

var adler32 = function (/*string*/buf)
{
  var i,a = 0, b = buf.length, c = b;
  for (i=0; i<c; i++)
  {
   a += buf.charCodeAt(i);
   b += (c-i)*buf.charCodeAt(i);
  }
  return ((b % 65521)<<16)+(a % 65521);
}
return function(/*uint[3]*/rgb, /*int*/ size)
{
  var t, u,v, bits = '';
  for (u=0; u<size; u++)
  {
   bits += "\x00\x00";
   for (v=2; v<size; v++)
    bits += (u==0 || u==size-1) ? "\x00" : "\x01";
   bits += "\x00";
  }
  t = bits.length;
  bits += i2s (adler32(bits));
  var r = header() + chunk ('IHDR', i2s (size)+i2s(size)+"\x08\x03\x00\x00\x00");
  r += chunk ('PLTE', '\x00\x00\x00'+String.fromCharCode(rgb[0])+String.fromCharCode(rgb[1])+String.fromCharCode(rgb[2]));
  r += chunk ('IDAT', "\x78\x9c\x01"+ String.fromCharCode (t & 0xff)+String.fromCharCode(t>>>8)+String.fromCharCode ((~t) & 0xff)+String.fromCharCode((~(t>>>8)) & 0xff)+bits) + 'IEND';

  return r;
};
})();

January 20, 2011

I think what you want is possible, but very complicated to achieve.

You can add ScriptIUIImages to the ListItems in the dropdown menu.

It might be possible to generate ScriptUIImages at run time from the swatches, but I suspect that would be quite complicated to do.

Another possibility is to have the swatch colour as the background of the listItem with ScriptUIBrush.

You will need find out how to extract the RGB values from the swatches. That is not straightforward.

dhishokAuthor
Known Participant
January 24, 2011

Hi,

Thanks for your comments.

Is this only possible through plug-ins? Or we can create this type of dropdownlist through script dialog also?

Thanks in advance

Thiyagu

Harbs.
Legend
January 25, 2011

You can use IDRC directly in ScriptUI, but finding them is little hard job because folder structure is different on Mac and PC platform. Do you maybe have a solution?

--

tomaxxi


Yes. IDRC files are png files.

Maybe I'm reading too much into it, but I'm assuming that the third type is not a file, but rather an internal reference. IDRC files are loaded into InDesign, and can be addressed by plugins directly (not necessarily by accessing the files). Maybe there's some way to use the built-in IDRC references (by specifying a valid resource name?)...

I'll see what I can find out...

Harbs

Inspiring
January 20, 2011

Dear Thiyagu

for droplist thy this code

var w = new Window ("dialog");

var swatches=app.swatches.everyItem().name;

var preset_list = w.add ("dropdownlist", undefined, swatches);

w.orientation = "row";

w.add ("button", undefined, "OK");

w.add ("button", undefined, "Cancel");

w.show ();

Mi_D

dhishokAuthor
Known Participant
January 24, 2011

Hi Mi_D,

Thanks for your reply.

I am able to create the dropdownlist with the swatch names.

But I want the swatches name in the dropdownlist along with its color preview as displayed below.

Thanks in advance.

Thiyagu