ColorPicker

A ColorPicker lets the user choose a color visually, and your controller can respond to the selection. Let’s make a long, interactive example.

1️⃣ FXML: ColorPicker + Label + Button

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.ColorPicker?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox spacing="20" alignment="CENTER" xmlns="http://javafx.com/javafx/17"
      xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.ColorPickerController">

    <Label text="Choose a color:"/>
    
    <ColorPicker fx:id="colorPicker" onAction="#handleColorPickerAction"/>
    
    <Button text="Apply Color to Background" onAction="#applyColor"/>
    
    <Label fx:id="infoLabel" text="Selected color will appear here."/>
    
</VBox>

Explanation:

• fx:id="colorPicker" → gives the controller access to the ColorPicker.
• onAction="#handleColorPickerAction" → triggered whenever the user picks a color.
• Button allows applying the color to something (like background).
• infoLabel shows the selected color info.

2️⃣ Controller: Handle ColorPicker

package org.example.demo;

import javafx.fxml.FXML;
import javafx.scene.control.ColorPicker;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;


public class HelloController {
    @FXML
    private ColorPicker colorPicker;

    @FXML
    private Label infoLabel;

    @FXML
    private VBox rootVBox; // Reference to the VBox for background change

    // Called when user picks a color
    @FXML
    private void handleColorPickerAction() {
        Color selectedColor = colorPicker.getValue();
        infoLabel.setText("Selected color: " + selectedColor.toString());
    }

    // Called when button is clicked to apply color
    @FXML
    private void applyColor() {
        Color color = colorPicker.getValue();
        rootVBox.setStyle("-fx-background-color: #" + colorToHex(color) + ";");
    }

    // Convert Color to hex string
    private String colorToHex(Color color) {
        int r = (int) (color.getRed() * 255);
        int g = (int) (color.getGreen() * 255);
        int b = (int) (color.getBlue() * 255);
        return String.format("%02X%02X%02X", r, g, b);
    }
}

Explanation:

1. colorPicker.getValue() → gets the selected color as a Color object.
2. handleColorPickerAction() → shows the selected color in the label.
3. applyColor() → changes the background color of the VBox.
4. colorToHex() → converts a Color object to a hex string usable in CSS.

3️⃣ Main Class: Load FXML

package com.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MainApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("colorpicker_layout.fxml"));
        Scene scene = new Scene(loader.load(), 400, 300);
        stage.setScene(scene);
        stage.setTitle("ColorPicker Example");
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

✅ Key Points About ColorPicker:

1. Returns a Color object, which has red, green, blue, opacity values.
2. Can be used with -fx-background-color in CSS to dynamically update UI.
3. You can combine it with Buttons, Labels, or other controls for interactive effects.
4. Works great for themes, previews, or color customization features in apps.