{"id":1053,"date":"2024-04-23T07:30:27","date_gmt":"2024-04-23T11:30:27","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=1053"},"modified":"2026-01-30T11:52:51","modified_gmt":"2026-01-30T16:52:51","slug":"introducing-the-color-picker-component","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/04\/23\/introducing-the-color-picker-component\/","title":{"rendered":"Introducing the Color Picker Component"},"content":{"rendered":"\n\n\n
\"\"<\/td>\nGuest Writer: Kristen Amaddio<\/a>
\n<\/strong><\/p>\n
\n
\n
Kristen Amaddio is the Senior Team Lead for the MATLAB UI Components team. She first joined MathWorks as part of the Engineering Development Group (EDG) in 2016, which gave her valuable exposure to customer workflows in the MATLAB Graphics and App Building space. Since becoming a developer in 2018, Kristen has made many contributions to the UI components area, including enhancements to the uitable, uicontextmenu, and uigridlayout. She has also made improvements to component interactions and accessibility. When she is not developing software, Kristen enjoys hiking and playing piano.<\/div>\n<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\n
\n

\"Open<\/a><\/p>\n<\/div>\n

Starting in R2024a, you can now add and configure color picker components in your apps. In App Designer, you can drag a color picker component from the Component Library onto the canvas. You can also use the uicolorpicker<\/span><\/a> function to programmatically place a color picker into a uifigure.<\/div>\n
The color picker provides an interactive interface that allows app users to set colors impacting the app. For example, you can configure the color picker to allow your users to change the colors of graphics objects within a chart, or to change the background color and font color of other UI components such as a button or table.<\/div>\n
\"\"<\/div>\n
An app author can use the Icon<\/span> and Value<\/span> properties and the ValueChangedFcn<\/span> callback to customize the appearance and interactivity of the color picker.<\/div>\n