© 2025 Created by blog.championxperience.com
In the fifth part of our series, we explore Creative Experience: Personalizing Your Designs with Color Picker. We’ll show you how to customize your 3D model with your preferred colors and tones using the Color Picker feature.
2D Color Picker
Create 2D Color Picker
I created a 2D Color Picker by right-clicking on the 2D section in the Project Panel.
2D Color Picker Properties
In the Color Picker Properties Panel, I click on the ‘Add Behavior’ option and then select ‘New Script.’ This selection brings up a screen where we can write a script.
Script: Color Picker
The Color Picker button requires a script to function. I have provided the script for you below. While it is essentially a JavaScript code, it has been customized with specific classes and libraries.
beScript.onStart = function () {
};
beScript.onStop = function () {
};
beScript.execute = function (context) {
};
beScript.onUIValueChange = function (valueChange) {
if (this.componentColor !== null && this.componentColor !== undefined)
var updatedColor = new STU.ColorRGB();
updatedColor.fromColor(this.getActor().color);
this.componentColor.baseColor = updatedColor;
};
I won’t dive into the details of the script here. I will only talk about its general functionality. The first three lines contain the functions used when the script is initialized, stopped, and executed.
beScript.onStart = function () {
};
beScript.onStop = function () {
};
beScript.execute = function (context) {
};
The function below triggers when you make a change using the Color Picker. It retrieves the selected color (this.getActor().color) and updates the linked material’s color (componentColor).
beScript.onUIValueChange = function (valueChange) {
if (this.componentColor !== null && this.componentColor !== undefined)
var updatedColor = new STU.ColorRGB();
updatedColor.fromColor(this.getActor().color);
this.componentColor.baseColor = updatedColor;
};
The componentColor variable stores the new color selected through the Color Picker. To ensure proper functionality, I defined it in the Properties panel.
Steps in the Properties Panel:
- Select Material as the Type.
- In the Value field, choose the material whose color you want to change (e.g., Side Panel).
Note: Ensure that you’ve already assigned the material to a component.
Once I configure these settings, any color I select through the Color Picker will automatically update the linked material’s base color. This setup enables users to interactively modify the material color in real-time.
Conclusion:
By following these steps, you can easily personalize the colors of your 3D models, adding a custom touch to your designs. The Color Picker feature empowers users to dynamically alter colors in real-time, giving them greater control over the aesthetic of their projects. Explore the next blog, where we dive into the art of personalizing light control.
Creative Experience : Illuminate Your Designs with Light Control
Co-Founder at ChampionXperience
I’m a SOLIDWORKS Elite Application Engineer, Co-Founder of ChampionXperience, and a SOLIDWORKS, ENOVIA, and 3DEXPERIENCE Edu Champion.
Latest posts by Rıdvan Polat (see all)
- AI-Powered SOLIDWORKS CPQ: A New Competitor for DriveWorks? - 13 March 2025
- Immersive 3D Revolution: Discover xHighlight’s Experience Media - 11 March 2025
- Bring Your SOLIDWORKS Models into VR with SimLab Composer - 9 March 2025
1 Comment on “Creative Experience: Personalizing Your Designs with Color Picker”