QUICK DEV TIP #36 UE4 / UE5 - Saving Colours

As a colourblind person, I find today’s Quick Dev Tip super useful but it can also come in handy for non- colourblind people too!

Did you know anytime you see the colour picker in Unreal you can save colours to use again later on?

If you would prefer to watch the video version, check it out here

In my example below I want to copy the colours from the top to the bottom squares.

QDT36_Blog01.JPG
 

There are multiple ways we can do this. Firstly, copy pasting the brush colour property as you can see below:

QDT36_Blog02_GIF.gif
 

Alternatively, we can go into the colour, grab the HEX value and copy it into the target squares colour.

QDT36_Blog03_GIF.gif
 

These methods are both perfectly valid ways of doing this. However, if you are going to be using a colour more than once then it is worth using Unreals colour saving system. This can be used anytime you see the colour picker wheel.

QDT36_Blog04.JPG
 

The saving system is located towards the top of the tool.

QDT36_Blog05.JPG
 

First off by clicking the drop down above we gain access to the ability to create groups. We can create new colour groups, duplicate and rename current ones, as well as delete ones we no longer want. In my example I renamed the default group to UI Theme. As I wanted this to be colours that I would use across my UI.

QDT36_Blog06.JPG
 

With the group created, next up we need to save the actual colour, which is super simple. All you need to do is grab the “new” colour and drag it to the top area of the colour picker where it says “Drag & drop colors here to save”.

QDT36_Blog07_GIF.gif
 

We can add multiple colours to our group in the same way.

QDT36_Blog08.JPG
 

Now we have the colours it is just as easy to use them. If we go to our white square that we want to colour and open up the colour picker, all we need to do is click on one of our saved colours at the top to apply it.

QDT36_Blog09_GIF.gif
 

I’m colourblind and I find this really useful when I am working with colours. But it is also useful for non-colourblind people to help keep colours consistent across a project. An example of this is in my UI I want all my bold fonts a certain colour and all my regular fonts a different colour. I can use the saved colour system to quickly and consistently set my colours without having to go copy-paste values from other elements and risk having slight variances.

QDT36_Blog10_GIF.gif
 

An interesting thing to know is that this works anywhere you have a colour picker. In my example below I made a linear colour variable in one of my blueprints. When we go to set the default we can choose from our saved colours.

QDT36_Blog11_GIF.gif
 

I tested this in the Early Access version of Unreal 5 and it works exactly the same way.

QDT36_Blog12.JPG

Like I said before this is great for colourblind and non-colourblind people alike and is super useful for helping keep your UIs consistent, something which is super important for creating a professional-looking UI!

If you want more quick tips & tricks FOLLOW ME ON TWITTER @cbGameDev

Also, check out the parkour game I'm solo developing called Freerunners. Give it a wishlist if you like the way it looks!: https://store.steampowered.com/app/1430330/Freerunners/