Color picker demo

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}"
            }
        ]
    }
}

    ...
    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>
    ...