Skip to main content

​
Color Edit

Color editor/picker widgets have a little color square that can be left-clicked to open a picker, and right-clicked to open an option menu.

​
ColorEdit3

bool ImGui::ColorEdit3(const char* label, float col[3], ImGuiColorEditFlags flags = 0)
Edit RGB color (without alpha).
​
label
const char*
Widget label
​
col
float[3]
Array of 3 floats (RGB, 0.0f to 1.0f)
​
flags
ImGuiColorEditFlags
default:"0"
Color edit flags (see ImGuiColorEditFlags_)
​
return
bool
True when color has been modified
// Example
static float color[3] = { 1.0f, 0.0f, 0.0f };
ImGui::ColorEdit3("Color", color);

​
ColorEdit4

bool ImGui::ColorEdit4(const char* label, float col[4], ImGuiColorEditFlags flags = 0)
Edit RGBA color (with alpha).
​
label
const char*
Widget label
​
col
float[4]
Array of 4 floats (RGBA, 0.0f to 1.0f)
​
flags
ImGuiColorEditFlags
default:"0"
Color edit flags
​
return
bool
True when color has been modified
// Example
static float color[4] = { 1.0f, 0.0f, 0.0f, 1.0f };
ImGui::ColorEdit4("Color", color);

​
Color Picker

​
ColorPicker3

bool ImGui::ColorPicker3(const char* label, float col[3], ImGuiColorEditFlags flags = 0)
Color picker widget for RGB.
​
label
const char*
Widget label
​
col
float[3]
Array of 3 floats (RGB)
​
flags
ImGuiColorEditFlags
default:"0"
Color edit flags
​
return
bool
True when color has been modified
// Example
static float color[3] = { 1.0f, 1.0f, 1.0f };
ImGui::ColorPicker3("MyColor", color);

​
ColorPicker4

bool ImGui::ColorPicker4(const char* label, float col[4], ImGuiColorEditFlags flags = 0, const float* ref_col = NULL)
Color picker widget for RGBA.
​
label
const char*
Widget label
​
col
float[4]
Array of 4 floats (RGBA)
​
flags
ImGuiColorEditFlags
default:"0"
Color edit flags
​
ref_col
const float*
default:"NULL"
Optional reference color to display for comparison
​
return
bool
True when color has been modified
// Example
static float color[4] = { 1.0f, 1.0f, 1.0f, 1.0f };
ImGui::ColorPicker4("MyColor##4", color);

// With reference color
float ref_color[4] = { 0.5f, 0.5f, 0.5f, 1.0f };
ImGui::ColorPicker4("MyColor##5", color, 0, ref_color);

​
Color Button

​
ColorButton

bool ImGui::ColorButton(const char* desc_id, const ImVec4& col, ImGuiColorEditFlags flags = 0, const ImVec2& size = ImVec2(0, 0))
Display a color square/button. Hover for details, return true when pressed.
​
desc_id
const char*
Unique identifier
​
col
const ImVec4&
RGBA color
​
flags
ImGuiColorEditFlags
default:"0"
Color edit flags
​
size
const ImVec2&
default:"ImVec2(0, 0)"
Button size (0 = default size)
​
return
bool
True when clicked
// Example
ImVec4 color = ImVec4(1.0f, 0.0f, 0.0f, 1.0f);
if (ImGui::ColorButton("MyColorBtn", color)) {
    // Button was clicked
}

​
SetColorEditOptions

void ImGui::SetColorEditOptions(ImGuiColorEditFlags flags)
Initialize current options (generally on application startup) if you want to select a default format, picker type, etc. User will be able to change many settings, unless you pass the _NoOptions flag to your calls.
​
flags
ImGuiColorEditFlags
Default color edit flags
// Example
ImGui::SetColorEditOptions(ImGuiColorEditFlags_Float | ImGuiColorEditFlags_HDR | ImGuiColorEditFlags_PickerHueWheel);

​
Color Edit Flags

​
ImGuiColorEditFlags_

Flags for ColorEdit3(), ColorEdit4(), ColorPicker3(), ColorPicker4(), ColorButton().

​
Main Options

FlagDescription
ImGuiColorEditFlags_NoneDefault
ImGuiColorEditFlags_NoAlphaIgnore Alpha component (read only 3 components)
ImGuiColorEditFlags_NoPickerDisable picker when clicking on color square
ImGuiColorEditFlags_NoOptionsDisable toggling options menu when right-clicking
ImGuiColorEditFlags_NoSmallPreviewDisable color square preview next to inputs
ImGuiColorEditFlags_NoInputsDisable inputs sliders/text widgets
ImGuiColorEditFlags_NoTooltipDisable tooltip when hovering the preview
ImGuiColorEditFlags_NoLabelDisable display of inline text label
ImGuiColorEditFlags_NoSidePreviewDisable bigger color preview on right side
ImGuiColorEditFlags_NoDragDropDisable drag and drop target
ImGuiColorEditFlags_NoBorderDisable border (which is enforced by default)
ImGuiColorEditFlags_NoColorMarkersDisable rendering R/G/B/A color markers

​
Alpha Display

FlagDescription
ImGuiColorEditFlags_AlphaOpaqueDisplay alpha as opaque in preview
ImGuiColorEditFlags_AlphaNoBgDisable checkerboard background behind transparent color
ImGuiColorEditFlags_AlphaPreviewHalfDisplay half opaque / half transparent preview

​
User Options

FlagDescription
ImGuiColorEditFlags_AlphaBarShow vertical alpha bar/gradient in picker
ImGuiColorEditFlags_HDRDisable 0.0f to 1.0f limits
ImGuiColorEditFlags_DisplayRGBOverride display type: RGB
ImGuiColorEditFlags_DisplayHSVOverride display type: HSV
ImGuiColorEditFlags_DisplayHexOverride display type: Hex
ImGuiColorEditFlags_Uint8Display values formatted as 0..255
ImGuiColorEditFlags_FloatDisplay values formatted as 0.0f..1.0f floats
ImGuiColorEditFlags_PickerHueBarPicker: bar for Hue, rectangle for Sat/Value
ImGuiColorEditFlags_PickerHueWheelPicker: wheel for Hue, triangle for Sat/Value
ImGuiColorEditFlags_InputRGBInput and output data in RGB format
ImGuiColorEditFlags_InputHSVInput and output data in HSV format

​
Examples

// No alpha channel
static float color_rgb[3] = { 1.0f, 0.0f, 0.0f };
ImGui::ColorEdit3("Color", color_rgb, ImGuiColorEditFlags_NoAlpha);

// Float display format
static float color[4] = { 1.0f, 0.5f, 0.0f, 1.0f };
ImGui::ColorEdit4("Float", color, ImGuiColorEditFlags_Float);

// HSV input
ImGui::ColorEdit4("HSV", color, ImGuiColorEditFlags_DisplayHSV | ImGuiColorEditFlags_InputHSV);

// HDR color
static float hdr_color[4] = { 2.5f, 1.0f, 0.5f, 1.0f };
ImGui::ColorEdit4("HDR", hdr_color, ImGuiColorEditFlags_HDR | ImGuiColorEditFlags_Float);

// Picker with hue wheel
ImGui::ColorPicker4("Wheel Picker", color, ImGuiColorEditFlags_PickerHueWheel | ImGuiColorEditFlags_AlphaBar);

// No options menu
ImGui::ColorEdit4("No Options", color, ImGuiColorEditFlags_NoOptions);

Build docs developers (and LLMs) love

Get started for freeTalk to us