Color Picker using Qt

In this post, you will learn how to make a simple color picker app using Qt creator.

Steps:

1. Open Qt Creator Click on File from the menu and click on New File or Project…(Ctrl +  N).
2. From the left column select Application, from the middle column select Qt Widget Application.
3. Click on Choose.
4. Give a name to the project and set the path where you want to save this project files.
5. Click Next,
6. Default kits will be selected.
7. Click next.
8. Give the class name of your choice. I gave a ColorPicker.
9. Select Baseclass as QMainWindow from the dropdown list.
10. (Generate form box can be unchecked as we are not going to use it, we will be creating UI with code only).
11. Click Next
12. Click on Finish.

main.cpp doesn`t need to be modified.

Open colorpicker.h

and modify it as

#ifndef COLORPICKER_H
#define COLORPICKER_H

#include <QMainWindow>
#include <QPushButton>
#include <QLabel>
#include <QProgressBar>
#include <QSlider>
#include <QDebug>


namespace Ui {
class ColorPicker;
}

class ColorPicker : public QMainWindow
{
    Q_OBJECT
    QLabel *main_bg;
    QSlider *red_slider;
    QSlider *green_slider;
    QSlider *blue_slider;
    QSlider *alpha_slider;

    QLabel *redVal;
    QLabel *greenVal;
    QLabel *blueVal;
    QLabel *hexval;
    QLabel *alphaVal;

public:
    explicit ColorPicker(QWidget *parent = nullptr);
    ~ColorPicker();

private:
    Ui::ColorPicker *ui;

private slots:
    void setValueColor();
    void setAlpha(int);
};

#endif // COLORPICKER_H

Open colorpicker.cpp

and copy-paste below mentioned code.

Download Project files

Video

How to make color picker in Qt

Thank you for reading.