Color Picker

Category: Widgets
Subcategory: Input widgets


This widget allows users to select a color easily. We support various selector styles to match your application - Render using different modes;. Button, Input box, or Inline - Execute an action after color change: microflow or nanoflow - Support color format of hex, rgb or rgba


Build Status Dependency Status Dev Dependency Status codecov badge


Select and adjust a color value


  • Render using different modes i.e. Button, Input box, or Inline
  • Execute an action after color change: microflow or nanoflow
  • Add a label and label width
  • Support color format of hex, rgb or rgba

Supported color pickers

Based on the color picker library


  • Sketch
  • Chrome
  • Block
  • Github
  • Twitter
  • Circle
  • Hue
  • Slider
  • Compact
  • Material
  • Swatches


  • Mendix 7.14.1

Development test project

Basic configuration


  • Create an entity with a string attribute, to store the color value
  • Place the widget in data form within the context of the entity
  • Select the attribtue for the color
  • Optional change the rendering and appearance properties to your need.

Issues, suggestions and feature requests

We are actively maintaining this widget, please report any issues or suggestion for improvement at

Development and contribution

Prerequisite: Install git, node package manager, webpack CLI, grunt CLI, Karma CLI

To contribute, fork and clone.

> git clone

The code is in typescript. Use a typescript IDE of your choice, like Visual Studio Code or WebStorm.

To set up the development environment, run:

> npm install

Create a folder named dist in the project root.

Create a Mendix test project in the dist folder and rename its root folder to dist/MxTestProject. Changes to the widget code shall be automatically pushed to this test project. Or get the test project from

To automatically compile, bundle and push code changes to the running test project, run:

> npm start

To run the project unit tests with code coverage, results can be found at dist/testresults/coverage/index.html, run:

> npm run test:unit

Run the unit test continuously during development:

> npm run test:dev

Run the end to end test during development:

> npm run test:e2e:dev


While developing, you will probably rely mostly on npm start; however, there are additional scripts at your disposal:

npm run