The Umbraco Palette Picker Package

The Umbraco Palette Picker Package

We have been working on a new Umbraco package and we have finally released it.

The package is called Palette Picker, and it allows editors to select a specific colour palette that can be applied to any specific page.

If you are interested, you can find more information in our Package Page and our Documentation Page.

Besides introducing the package itself, we would also like to talk a bit about the whole process behind it. We found the actual development was only one part of this process, while the writing of the documentation and info pages was another big part of it. It was exciting and demanding at the same time, as we wanted it to be a finished product, not just for ourselves but for the Umbraco community.

The idea

It is quite common for us developers to write custom Umbraco code for a project that requires a new specific data type. In our case, this was how the original package started, as a custom Umbraco data type. It was required by the client to be able to select different colour layouts for a myriad of pages on their site. So we looked for a simple approach where the client would be able to pick a colour layout (or palette) among a set of predefined ones, making it easy and intuitive for them while restricting the freedom of the editors at choosing the actual colours of the page. Thus, we built a custom data type that looked good, was simple, and our client loved it.

Palette Picker

The package

As both we and our client liked the new data type so much, we thought it would be nice to make it a package available for the community. Although it covered a very specific need, that doesn't mean others might find it interesting and useful. We didn't start working on it immediately, as we didn't really find the time to put it all together. A while later, we decided it was about time to build the package. Alas, our data type was built for Umbraco 7 and Umbraco 8 was just out in the streets.

We polished the existing version and created a new one fit for Umbraco 8. Our intention was to keep and release both versions. As most of the code was already there, it was pretty straight forward to create the two versions of the package.

The documentation

When we started writing the documentation for the package, we found out this part was even harder than the proper development of the package. We wrote the documentation and made it available in GitHub, trying to make it easy to read and understandable, while keeping in line with Vizioz image.

Once there, we thought we could go the extra mile and create a little interactive snippet within the documentation to see how Palette Picker actually works. It lets readers to pick a colour palette as if in the Umbraco backoffice and immediately check the output for themselves.

As part of the documentation process, we also produced a design logo for the package and added an information page to our site.

The future

With a great package comes great maintenance. Not that we are saying that this package is great, but we are proud of it, and we are aware that we need to maintain and update. As a matter of fact, we are already planning the first update to make it more versatile.


Definitely a very fascinating trip. Many packages out there are born from a custom data type or a custom section that a client requires. On the other hand, many of them remain as such and never see the light as a package. I would recommend everyone that ever wrote some custom code for Umbraco to try and build a package from it. It doesn't need to involve much time or effort to build it, and I assure you that you will really enjoy it.


Miguel Lopez

Miguel is a web developer and Umbraco Master. He enjoys both technology and a good old fashioned book. He moved to the UK from Spain in 2015 and has been fully committed to Vizioz since.

comments powered by Disqus