3D Color Picker (RGB)

The concept behind the 3D color picker is the visual representation of 3D "colorspace." Any 24-bit color can be represented as an RGB (255 x 255 x 255 = 16,777,216 total colors) value. The RGB color picker takes each of these three values and plots it as its own axis. The result is a cube that is 255 colors long on each side and contains within it every possible 24-bit color.

 

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 cube 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 cube along any axis. Simply press the relevant button and then use your cursor to pick the point on the cube where you would like to slice. If you are on a desktop, you will see a dotted guide-line when you mouse over the cube.
  • To select any color, simply click it. The selected color's RGB value will be displayed below the control buttons. The rest of the cube will turn gray, to allow you to focus on the location of the color that you picked.
  • Press the button to reset the cube to its original (255 x 255 x 255) dimensions after slicing it. The button will also clear out a color selection, if one has been made.

RGB vs HSL

While RGB can represent any 24-bit color, some might find the RGB scheme itself non-intuitive. For instance, slicing along a particular value of the "R" axis will not produce a cross-section that is equally red to the human eye. Although it can represent fewer colors (3,492,722 total colors), our HSL Color Picker provides a more intuitive way to zero in on a desired color. Take a look!

 

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_RGB.zip
  2. Extract the files to your Qlik Sense working directory (by default %userprofile%\Documents\Qlik\Sense for Qlik Sense Desktop)
  3. Open the RBG 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: