3D Color Picker (HSL)

The concept behind the 3D color picker is the visual representation of 3D "colorspace." While we also have a full 24-bit color picker available here, many people will likely find the HSL color picker more intuitive, making it worth the trade-off in terms of the number of distinct colors. The RBG color scheme, while robust, can be counter-intuitive to use. For instance, all colors with a particular "R" value will not look equally red to the human eye. By contrast, what we perceive as a family of colors is represented on the HSL palette by a single axis: H (Hue). This often makes finding a desired color using an HSL palette much faster than finding the same color on an RGB palette. The HSL color picker takes each of the three component values that comprise an HSL color and plots it as its own axis. The result is a 3D shape whose dimensions correspond to the the range of possible HSL values (i.e. 360 x 100 x 100).

 

How to Use the Color Picker

  • The color picker below works on most modern browsers. Note that while it does not work on Internet Explorer 11, it does work on IE Edge.
  • Use your mouse or finger to rotate the shape freely along any axis. Pressing the button will reactivate the cursor tool after using the slicing tools.
  • You can use the buttons to activate a slicing tool that will allow you to slice the shape along any axis. Simply press the relevant button and then use your cursor to pick the point on the shape where you would like to slice. If you are on a desktop, you will see a dotted guide-line when you mouse over the shape.
  • To select any color, simply click it. The selected color's RGB and HSL values will be displayed below the control buttons. The rest of the shape will turn gray, to allow you to focus on the location of the color that you picked.
  • Press the button to reset the shape to its original (360 x 100 x 100) dimensions after slicing it. The button will also clear out a color selection, if one has been made.

Integration Into Qlik Sense

The 3D color picker, built on the d3 JavaScript library, is a powerful example of the advanced type of data visualizations that Infinity Insight's dedicated extension development team can create! To see the tool in action in a Qlik Sense application, and/or to integrate it into your own application, simply:

  1. Download the following archive: 3DColorPicker_HSL.zip
  2. Extract the files to your Qlik Sense working directory (by default %userprofile%\Documents\Qlik\Sense for Qlik Sense Desktop)
  3. Open the HSL Color Picker application from Qlik Sense
  4. The color picker can optionally be used to set a Qlik Sense variable with the RGB value of the colors you select. You can define the name of this variable in the Output Variable section of the object settings: