DMXzone Colorpicker

DMXzone Colorpicker is a simple component, which lets you select any color online the way you do it in Photoshop and fine tune them for your website! Integrate this amazing colorpicker on your page and you can get any color shade, build custom swatches, add animations and easing or choose one of the supplied skins.

You can choose only the parts for the colorpicker that you need, the way it will be navigated and even which options will be available for your users. It can be easily bind other DMXzone extensions like Sliding Panels, Sliding Bilboard or Ajax Datagrid.

Overview

Features Highlights:

• 24 designs - There are 24 different designs to choose from so the colorpicker fits your website design. You can also create your own custom design by editing the CSS.
  
• Fully customizable colorpicker appearance - You can choose only the parts for the colorpicker that you need.
• Entry or inline appearance - Display the colorpicker as entry or inline.
• Default and Custom swatches - Customize your inspirational colors in color swatches with names.
  
• Alternative element - Change a CSS style property of an element, which can be background color, border color, color and outline color. 
• Initial colorpicker color - Add a default color which will appear once the colorpicker is opened. Also it can be dynamically generated.
• Animation effects - Add awesome animation effects to your colorpicker when opens or closes.
• Full Support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions like Sliding Panels and Sliding Bilboard to your DMXzone Colorpicker.

*For complete Features overview press the Features in Detail

Interior Design Studio Demo

For this demo we animated (Advanced CSS Animator) a panel that slides out upon click on the customize button. It contains colorpickers for all 3 boxes that change their background and font colors (DMXzone Colorpicker). As a full screen background we used the DMXzone Supersized extension.

Changing Background Color with Swatches Demo

For this demo we changed the background color property of the DIV container that wraps up the image using the DMXzone Colorpicker. There are only few colors available for the background color, which are created as custom swatches.

T-shirt Store Demo

For this demo we used an inline colorpicker that changes the t-shirt color, the t-shirt image has a transparent background for easy fill.

 

Features

• 24 designs - There are 24 different designs to choose from so the colorpicker fits your website design. You can also create your own custom design by editing the CSS. 

• Fully customizable colorpicker appearance - You can choose only the parts for the colorpicker that you need.
  

• Colorpicker appearance - Set the colorpicker to open on focus, on button, or both.

  
  
  

• Custom appearance - You can customize the way your colorpicker will be navigated and which options will be available for your users.
  
  

  
  
  
• Entry or inline appearance - Display the colorpicker as entry or inline.

• Default and Custom swatches - Customize your inspirational colors in color swatches with names. 

• Alternative element - Change a CSS style property of an element, which can be background color, border color, color and outline color. 
  
  
  
  
  
  
• Colorpicker inputs appearance - Select the inputs that will be available for selection. 

• Colorpicker buttons appearance - You can choose which buttons to be available in your colorpicker (cancel, none and close buttons).
  
  

• Custom colorpicker name - Name your colorpicker your choice when the header is shown.
  

• Initial colorpicker color - Add a default color which will appear once the colorpicker is opened. Also it can be dynamically generated.
  

• 6 color formats - Select from 6 different color formats for your colorpicker.

• 6 supported languages - You can choose between 6 different languages for the colorpicker interface.

• Animation effects - Add awesome animation effects to your colorpicker when opens or closes.

• An inline property inspector -  The property inspector enables you to change several options after you’ve created the DMXzone Colorpicker.
  

• Fully cross-browser compatible - Runs perfectly on any up-to-date desktop browser as well as mobile devices.
  

Showcases

Interior Design Studio Demo

For this demo we animated (Advanced CSS Animator) a panel that slides out upon click on the customize button. It contains colorpickers for all 3 boxes that change their background and font colors (DMXzone Colorpicker). As a full screen background we used the DMXzone Supersized extension.

Changing Background Color with Swatches Demo

For this demo we changed the background color property of the DIV container that wraps up the image using the DMXzone Colorpicker. There are only few colors available for the background color, which are created as custom swatches.

T-shirt Store Demo

For this demo we used an inline colorpicker that changes the t-shirt color, the t-shirt image has a transparent background for easy fill.

• 

  Custom Swatches with DMXzone Colorpicker

  For this showcase we used DMXzone Supersized for our full-screen images and DMXzone Colorpicker Swatches for the available colors that your users can change in order to view the template in different ...

• 

  T-shirt Store Showcase

  For this showcase we used an inline colorpicker that changes the t-shirt color, the t-shirt image has a transparent background for easy fill.

• 

  Interior Design Studio Showcase

  For this showcase we animated (Advanced CSS Animator) a panel that slides out upon click on the customize button. It contains colorpickers for all 3 boxes that change their background and font ...

• 

  Changing the background colors with Swatches

  For this showcase we changed the background color property of the DIV container that wraps up the image using the DMXzone Colorpicker. There are only few colors available for the background color, ...

Videos

Using DMXzone Colorpicker
With this movie we will show you the main features packed in DMXzone Colorpicker and how to use it.

Changing Background Colors with DMXzone Colorpicker
With this movie we will show you how to change a CSS Style Property of an element on your page using DMXzone Colorpicker.

Creating Custom Color Swatches
With this movie we will show you how to use Custom Color Swatches with DMXzone Colorpicker.

Watch the movie

Using DMXzone Colorpicker Behaviors
With this movie we will show you how to filter Ajax Datagrid by color using DMxzone Colorpicker Behaviors.

Requirements

History

Version 1.1.1

• Included updated jQuery UI to 1.10.1 for more speed, power and greater user experience
• Included updated jQuery to 1.8.3 that includes the unbelievable 13 versions
• Updated jQuery UI Themes
• Improved support for new addition styling themes, like the DMXzone Metro UI Theme Pack
• Improved style picker dialog to pick up automatically new available styles