Introducing the New Color Picker

Assumptions we made as developers can differ from the reality. Users often tend to use your products in ways we never imagined. Or want things we never even thought of.

But that wasn't the case in choosing our color picker. The color picker we used until recently was one from an open source project online. It worked, but we always knew did not exactly fit our needs, nor those of our users. Its support of transparency made it better than a lot of the others, but it did not really fit into our editor. The basic styling was a little off, usage was sometimes a little awkward and support for some of the editors features was simply not available.

A while back our designers made a new design for the colorpicker and last week, there was time in the development team to build it. A task which I gladly took upon me! After a good week of coding, there now is a new version of the color picker. The most notable differences are the following:

• Support for placeholders/preset styles
  Ever set a preset style and noticed your colorpicker did not show the current color? The new color picker will actually show you the color of the preset in it's button and inputfields!
• Swatches
  We finally have support for swatches! Save the colors you often use and select them easily without the need to remember each colors RGB or hex value!
• Named color support
  Ok, this will probably not be used that often, but as more of a gimmick, support for the defined HTML colors was added. If you enter color names like 'magenta' or 'lightgreen' into the color value input, the corresponding RGB value will be entered.
• Real color picker
  The old colorpicker used an overlay image to generate the colorpicker. A solid color was overlayed with two elements both set to a gradient from black or white to transparent. This was a pretty good approximation of the actual color, but it never really was the actual color. The new picker is build using an HTML5 canvas element, making sure the pixel you click is also the color you select. It also allows for a more visible alpha channel selector, as the current version show you the current color in different alpha states!
• NumberInput support
  In numeric inputs, our balloons have had support for using the arrow keys to increase or decrease it's value. That support is now also incorporated into the color picker. Using this, you could step through the different colors or transparency values by using the arrow keys, allowing you to focus on the changing element instead of the balloon!
• Better drag support
  The old colorpicker closed once you dragged the marker outside the picker. When that happened, or when the user forgot to click 'choose', the original color was put back. No longer! The color now updates automatically, and you can release your cursor anywhere you want while dragging. The picker won't close and you won't lose your color selection.

We hope you enjoy the new color picker, I really enjoyed building it!

What's next?

The H5mag Editor is a product that will always be altered and updated. If there's anything you would like to see differently in the editor, or something you think really should be added, please let us know on our forum!

Want to know more? Take a look at h5mag.com for more information or contact us at info@h5mag.com!