Color picker demo

This is a demo of a simple JavaFX color picker. It uses the Color.hsb(hue, saturation, brightness) method to create a full palette of colors to choose from. For more information on JavaFX colors see: Color.


Demo

Click on the color palette to choose a color.



Source Code

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.Group;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.input.MouseEvent;
 
/**
 * @author code-better.com
 */
 
var color = Color.WHITE;
 
Stage {
    title: "Color Palette"
    scene: Scene {
        width: 360
        height: 300
        content: [
            // Background Rectangle displaying selected color
            Rectangle {
                width:360  height:300
                fill: bind color
            }
            // Group of LinearGradients forming the palette
            Group{
                content : for( hue in [0..179]){
                    Rectangle{
                        height: 150  // Height of the palette
                        fill: LinearGradient {
                            endX: 0.0
                            proportional: true
                            stops: [
                                Stop {
                                    offset: 0.0
                                    color: Color.WHITE
                                }
                                Stop {
                                    offset: .5
                                    color: Color.hsb(hue*2,1,1)
                                }
                                Stop {
                                    offset: 1.0
                                    color: Color.BLACK
                                }
                            ]
                        }
                        translateX: hue*2
                        width: 2
                    }
                }
                onMousePressed: function(me:MouseEvent){
                    // Calculate the hue saturation and brightness
                    // based on the coordinates of the click
                    def subHeight = me.node.boundsInLocal.height / 2;
                    var sat = 1.0;
                    var brt = 1.0;
                    if (me.y < subHeight) then {
                        sat = me.y / subHeight;
                    } else {
                        brt = (me.node.boundsInLocal.height - me.y) / subHeight;
                    }
                    color = Color.hsb(me.x, sat, brt);
                }
            }
            // Text displaying RGB values of current color
            Text {
                x: 30   y: 200
                font: Font { size: 16 }
                // Set text color so that it is always visible
                fill: bind Color.rgb((1 - color.red) * 255,(1 - color.green) * 255,(1 - color.blue) * 255)
                content: bind "R: {color.red*255 as Integer}nG: {color.green*255 as Integer}nB: {color.blue*255 as Integer}"
            }
        ]
    }
}

For performance reasons the hue is being displayed at a resolution of 2 degrees. By not displaying all 360 hue values, the number of LinearGradient nodes is cut in half with very little noticeable difference. To further adjust the displayed hue resolution change the following lines:

    ...
    content : for( hue in [0..179]){   // Change range to [0 to 360/<resolution> -1]
    ...
    Stop {
        offset: .5
        color: Color.hsb(hue*2,1,1)   // Change hue parameter to hue*<resolution>
    }
    ...
    translateX: hue*2   // Change x translation to hue*<resolution>
    width: 2            // Change width to <resolution>
    ...