Mar 30 2010
uiColorPicker: Customizing The Colors Palette
In this post, we look at how the colors palette/swatch of the uiColorPicker control can be customized.
By default, the component uses the following set of colors:
We can define an alternative colors array for the popup palette:
private static const COLORS_CONTINUOUS_TONE:Array = [ 0xCCFFFF, 0xCCCCFF, 0xCC99FF, 0xCC66FF, 0xCC33FF, 0xCC00FF, 0xFF00FF, 0xFF33FF, 0xFF66FF, 0xFF99FF, 0xFFCCFF, 0xFFFFFF, 0xCCFFCC, 0xCCCCCC, 0xCC99CC, 0xCC66CC, 0xCC33CC, 0xCC00CC, 0xFF00CC, 0xFF33CC, 0xFF66CC, 0xFF99CC, 0xFFCCCC, 0xFFFFCC, 0xCCFF99, 0xCCCC99, 0xCC9999, 0xCC6699, 0xCC3399, 0xCC0099, 0xFF0099, 0xFF3399, 0xFF6699, 0xFF9999, 0xFFCC99, 0xFFFF99, 0xCCFF66, 0xCCCC66, 0xCC9966, 0xCC6666, 0xCC3366, 0xCC0066, 0xFF0066, 0xFF3366, 0xFF6666, 0xFF9966, 0xFFCC66, 0xFFFF66, 0xCCFF33, 0xCCCC33, 0xCC9933, 0xCC6633, 0xCC3333, 0xCC0033, 0xFF0033, 0xFF3333, 0xFF6633, 0xFF9933, 0xFFCC33, 0xFFFF33, 0xCCFF00, 0xCCCC00, 0xCC9900, 0xCC6600, 0xCC3300, 0xCC0000, 0xFF0000, 0xFF3300, 0xFF6600, 0xFF9900, 0xFFCC00, 0xFFFF00, 0x66FF00, 0x66CC00, 0x669900, 0x666600, 0x663300, 0x660000, 0x990000, 0x993300, 0x996600, 0x999900, 0x99CC00, 0x99FF00, 0x66FF33, 0x66CC33, 0x669933, 0x666633, 0x663333, 0x660033, 0x990033, 0x993333, 0x996633, 0x999933, 0x99CC33, 0x99FF33, 0x66FF66, 0x66CC66, 0x669966, 0x666666, 0x663366, 0x660066, 0x990066, 0x993366, 0x996666, 0x999966, 0x99CC66, 0x99FF66, 0x66FF99, 0x66CC99, 0x669999, 0x666699, 0x663399, 0x660099, 0x990099, 0x993399, 0x996699, 0x999999, 0x99CC99, 0x99FF99, 0x66FFCC, 0x66CCCC, 0x6699CC, 0x6666CC, 0x6633CC, 0x6600CC, 0x9900CC, 0x9933CC, 0x9966CC, 0x9999CC, 0x99CCCC, 0x99FFCC, 0x66FFFF, 0x66CCFF, 0x6699FF, 0x6666FF, 0x6633FF, 0x6600FF, 0x9900FF, 0x9933FF, 0x9966FF, 0x9999FF, 0x99CCFF, 0x99FFFF, 0x00FFFF, 0x00CCFF, 0x0099FF, 0x0066FF, 0x0033FF, 0x0000FF, 0x3300FF, 0x3333FF, 0x3366FF, 0x3399FF, 0x33CCFF, 0x33FFFF, 0x00FFCC, 0x00CCCC, 0x0099CC, 0x0066CC, 0x0033CC, 0x0000CC, 0x3300CC, 0x3333CC, 0x3366CC, 0x3399CC, 0x33CCCC, 0x33FFCC, 0x00FF99, 0x00CC99, 0x009999, 0x006699, 0x003399, 0x000099, 0x330099, 0x333399, 0x336699, 0x339999, 0x33CC99, 0x33FF99, 0x00FF33, 0x00CC33, 0x009933, 0x006633, 0x003333, 0x000033, 0x330033, 0x333333, 0x336633, 0x339933, 0x33CC33, 0x33FF33, 0x00FF00, 0x00CC00, 0x009900, 0x006600, 0x003300, 0x000000, 0x330000, 0x333300, 0x336600, 0x339900, 0x33CC00, 0x33FF00, ];
And then assign the colors array as follows:
var myColorPicker:uiColorPicker = new uiColorPicker(); myColorPicker.colors = COLORS_CONTINUOUS_TONE;
Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management.
This is a pure AS3 library with no dependency on the Flex framework.
For more information, please click here.
You may experiment with the various features by downloading the trial version.
Other Posts You Might Enjoy:
- uiColorPicker: Adding Drop Shadow To Popup Palette
- Aspire UI Components Update v1.4
- uiModel: Using External XML As Data Source During Run-Time
- Using uiWindow: Setting the color and transparency level of the background overlay of modal windows
- uiImage: Using Embedded And/Or Dynamically Generated BitmapData
Very bright colors. I really want to learn how to manipulate uiColorPicker. I’ll experiment with the trial version.
Know a days i am working on that and i got alot help from this even coding as well for my project.Let see it works or not.Thanks
You are right, Sunny, the task of skinning using PNG files is a lot easier having tried it on the trial version.
Is there a chart that is linked to the table of colors that makes it easy to pick a color and see the corresponding #hex code?
Or is this what the uiColorPicker does?
Sorry little confused.
@Thomas: One of the advantages of this customization is that can choose the colors in the palette.
Your colour palette is so much easier to find the appropriate colour on than the defaut one! I am having some software developed now and wanted to limit the colours they could use, but not the shades of those colours (so there is personal variation, but people can’t use colours that clash with the software colour scheme) and this will be perfect – thanks!
My biggest problem is being able to match colors when doing any sort of design. Any sort of feature that can help pure amateurs do that would be very welcome indeed.
This is a very handy tool. I work with different shades of the same color. This has allowed me to be more creative with my shading.