In this tutorial, we will create a Color Picker Tool in Java using Swing.
The tool will allow users to select a color from a color palette, display the selected color, and show its RGB (Red, Green, Blue) values and Hexadecimal color code.
This is a fun and interactive way to explore colors and learn how they are represented in Java.
Table of Contents
Features:
Allows users to pick a color using the JColorChooser component.
Displays the selected color in a panel.
Shows the RGB values and Hexadecimal color code of the selected color.
Provides a Copy to Clipboard feature for the hex color code.
Complete Code
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.datatransfer.StringSelection;
public class ColorPickerTool extends JFrame {
private JPanel colorDisplayPanel; // Panel to show the selected color
private JLabel rgbLabel; // Label to display RGB values
private JLabel hexLabel; // Label to display Hex code
private JButton pickColorButton, copyHexButton;
// Constructor to set up the GUI
public ColorPickerTool() {
setTitle("Color Picker Tool");
setSize(400, 200);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null); // Center the window on the screen
// Initialize components
colorDisplayPanel = new JPanel();
colorDisplayPanel.setBackground(Color.WHITE); // Default color is white
colorDisplayPanel.setPreferredSize(new Dimension(100, 100));
rgbLabel = new JLabel("RGB: ");
hexLabel = new JLabel("Hex: ");
pickColorButton = new JButton("Pick a Color");
copyHexButton = new JButton("Copy Hex Code");
// Set up layout
JPanel infoPanel = new JPanel(new GridLayout(2, 1));
infoPanel.add(rgbLabel);
infoPanel.add(hexLabel);
JPanel buttonPanel = new JPanel();
buttonPanel.add(pickColorButton);
buttonPanel.add(copyHexButton);
setLayout(new BorderLayout());
add(colorDisplayPanel, BorderLayout.WEST);
add(infoPanel, BorderLayout.CENTER);
add(buttonPanel, BorderLayout.SOUTH);
// Add action listeners
pickColorButton.addActionListener(new PickColorButtonListener());
copyHexButton.addActionListener(new CopyHexButtonListener());
setVisible(true);
}
// Method to convert a Color object to Hex string
private String getHexColor(Color color) {
return String.format("#%02x%02x%02x", color.getRed(), color.getGreen(), color.getBlue());
}
// Action listener for the Pick Color button
private class PickColorButtonListener implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
// Show color chooser dialog
Color selectedColor = JColorChooser.showDialog(null, "Pick a Color", colorDisplayPanel.getBackground());
// If a color is selected
if (selectedColor != null) {
// Update the color display panel
colorDisplayPanel.setBackground(selectedColor);
// Update RGB and Hex labels
String rgbText = "RGB: " + selectedColor.getRed() + ", " + selectedColor.getGreen() + ", " + selectedColor.getBlue();
rgbLabel.setText(rgbText);
String hexText = "Hex: " + getHexColor(selectedColor);
hexLabel.setText(hexText);
}
}
}
// Action listener for the Copy Hex button
private class CopyHexButtonListener implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
// Copy the hex value to clipboard
String hexText = hexLabel.getText().replace("Hex: ", "").trim();
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(new StringSelection(hexText), null);
JOptionPane.showMessageDialog(null, "Hex code copied to clipboard!");
}
}
// Main method to run the app
public static void main(String[] args) {
SwingUtilities.invokeLater(() -> new ColorPickerTool());
}
}
Explanation of the Code
1. Import Statements
import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.datatransfer.StringSelection; javax.swing.*: Provides Swing components like JFrame, JButton, JPanel, and JLabel for creating the GUI. java.awt.*: Provides layout and graphical utilities like Color, Dimension, BorderLayout. java.awt.datatransfer.*: Provides clipboard functionalities for copying the hex color code to the clipboard.
2. Class Declaration and Instance Variables
public class ColorPickerTool extends JFrame {
private JPanel colorDisplayPanel; // Panel to show the selected color
private JLabel rgbLabel; // Label to display RGB values
private JLabel hexLabel; // Label to display Hex code
private JButton pickColorButton, copyHexButton;
}
JPanel colorDisplayPanel: A panel that will display the selected color.
JLabel rgbLabel, hexLabel: Labels to show the RGB values and Hexadecimal code of the selected color.
JButton pickColorButton, copyHexButton: Buttons for selecting a color and copying the hex code.
3. Constructor
public ColorPickerTool() {
setTitle("Color Picker Tool");
setSize(400, 200);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null); // Center the window on the screen
// Initialize components
colorDisplayPanel = new JPanel();
colorDisplayPanel.setBackground(Color.WHITE); // Default color is white
colorDisplayPanel.setPreferredSize(new Dimension(100, 100));
rgbLabel = new JLabel("RGB: ");
hexLabel = new JLabel("Hex: ");
pickColorButton = new JButton("Pick a Color");
copyHexButton = new JButton("Copy Hex Code");
// Set up layout
JPanel infoPanel = new JPanel(new GridLayout(2, 1));
infoPanel.add(rgbLabel);
infoPanel.add(hexLabel);
JPanel buttonPanel = new JPanel();
buttonPanel.add(pickColorButton);
buttonPanel.add(copyHexButton);
setLayout(new BorderLayout());
add(colorDisplayPanel, BorderLayout.WEST);
add(infoPanel, BorderLayout.CENTER);
add(buttonPanel, BorderLayout.SOUTH);
// Add action listeners
pickColorButton.addActionListener(new PickColorButtonListener());
copyHexButton.addActionListener(new CopyHexButtonListener());
setVisible(true);
}
Frame Setup:
setTitle(“Color Picker Tool”): Sets the title of the window.
setSize(400, 200): Sets the window size.
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE): Ensures that the app exits when the window is closed.
setLocationRelativeTo(null): Centers the window on the screen.
Component Initialization:
colorDisplayPanel: Displays the selected color with a default background color of white.
rgbLabel and hexLabel: Show the RGB values and Hexadecimal code of the selected color.
pickColorButton: A button to open the JColorChooser and allow the user to pick a color.
copyHexButton: A button to copy the hex code of the selected color to the clipboard.
Layout Setup:
infoPanel: A panel to hold the labels (rgbLabel, hexLabel) in a grid layout.
buttonPanel: A panel to hold the buttons (pickColorButton, copyHexButton).
setLayout(new BorderLayout()): Uses a border layout to position the components. The color display panel is placed on the left, the information panel in the center, and the buttons at the bottom.
4. getHexColor() Method
private String getHexColor(Color color) {
return String.format("#%02x%02x%02x", color.getRed(), color.getGreen(), color.getBlue());
}
This method converts a Color object to a Hexadecimal string (e.g., #FF5733).
String.format(): The %02x format ensures that the red, green, and blue values are converted to two-digit hexadecimal numbers.
5. Action Listener for the Pick Color Button
private class PickColorButtonListener implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
// Show color chooser dialog
Color selectedColor = JColorChooser.showDialog(null, "Pick a Color", colorDisplayPanel.getBackground());
// If a color is selected
if (selectedColor != null) {
// Update the color display panel
colorDisplayPanel.setBackground(selectedColor);
// Update RGB and Hex labels
String rgbText = "RGB: " + selectedColor.getRed() + ", " + selectedColor.getGreen() + ", " + selectedColor.getBlue();
rgbLabel.setText(rgbText);
String hexText = "Hex: " + getHexColor(selectedColor);
hexLabel.setText(hexText);
}
}
}
JColorChooser.showDialog(): Opens a color picker dialog that allows the user to select a color.
if (selectedColor != null): Ensures that the user has selected a valid color.
Update Components:
colorDisplayPanel.setBackground(selectedColor): Updates the background color of the panel to the selected color.
rgbLabel.setText(rgbText): Displays the RGB values of the selected color.
hexLabel.setText(hexText): Displays the hexadecimal code of the selected color.
6. Action Listener for the Copy Hex Button
private class CopyHexButtonListener implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
// Copy the hex value to clipboard
String hexText = hexLabel.getText().replace("Hex: ", "").trim();
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(new StringSelection(hexText), null);
JOptionPane.showMessageDialog(null, "Hex code copied to clipboard!");
}
}
Copy Hex to Clipboard:
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(): Copies the hex code to the system clipboard.
JOptionPane.showMessageDialog(): Displays a confirmation dialog that the hex code has been copied.
7. Main Method
public static void main(String[] args) {
SwingUtilities.invokeLater(() -> new ColorPickerTool());
}
SwingUtilities.invokeLater(): Ensures that the GUI is created and updated on the Event Dispatch Thread (EDT), which is necessary for Swing applications.
new ColorPickerTool(): Creates and launches the color picker tool.
Customization Ideas
1. Allow Users to Copy RGB Values
Add a feature to copy the RGB values to the clipboard along with the hex code.
2. Add Color History
Add a panel to display the last few colors picked by the user, so they can revisit recently selected colors.
3. Improve the User Interface
Change the fonts, colors, and layout to make the tool more visually appealing.
Add tooltips to the buttons for better usability.
Conclusion
This Color Picker Tool in Java using Swing allows users to select colors from a palette, view their RGB and Hexadecimal values, and copy the hex code to the clipboard. It demonstrates:
Using JColorChooser to create a color picker dialog.
Displaying RGB and Hex values dynamically as the user selects a color.
Handling clipboard operations to allow the user to copy the hex code for later use.
Feel free to expand the functionality of this tool with additional features!