Color Pickers are commonly used in RIA’s , the day by day web is evolving u have used color pickers but most of u don’t know the logic behind, so now we are dive into the building process of color picker.
Hope u will enjoy…
To build Color-Picker we have to work over following things:
- Building primary color bar
- Building single color shade palette
- Building a draggable handle for color shade palette and primary color bar
Primary Color Bar
Primary color Bar has almost all basic colors. If u look at the image below u will get the flow of Red, Green and Blue channels for color, Basically in color picker if we start from left we have following situation
- Red to Yellow
- Yellow to Green
- Green to SkyBlue
- SkyBlue to DarkBlue
- DarkBlue to Pink
- Pink to Red
We can get the complete color bar with primary colors by mixing colors in following order.
Method CreatePallete in class CtrlColorPicker will render primary color bar.
Building single color shade palette
We can get a single color from primary color palette now to get the selected color’s darker and brighter shades of this color, to implment it we have three rectangles with same width & height 256 x 256 and in following order.
- Selected Color Rectangle — Primary Color
- White Gradient (From full white to transparent white — Left to Right) — Bright Light
- Black Gradient (From full black to transparent black — Bottom to Top) — Dark Light
By combing these rectangle in a single grid control u will notice that all of the shades of selected color are now available, so what we have to do next is to change Primary color rectangle’s fill dynamically from Primary Color Bar.
Method SetColorFromColorBar in class CtrlColorPicker will show u how to get selected color from Primary color bar while user dragging.
how to build a draggable handle for color shade palette and primary color bar will available in project i don’t want to explain this dragging feature, i know u already know it…
My Project is completely open source u guys can download it .
Good post basit. (Y)