Understanding Color Palettes

I’m trying to build a better understanding of color palettes and how to leverage them.

I find them very hard to create as I don’t seem to be able to easily enter a color value. When I have a very specific color I want to create from a HEX value I never seem to be able to get the palette to use the correct color. I enter the color but it ends up being a different value when entered.

But the biggest problem I have is with custom palettes. If I create one and use it throughout my project, then at a later date decide I’d like to change the name of the palette. All of the colors I had selected from the palette are reset and I have to manually go through all the places the palette was used and reselect the color. This is extremely inconvenient. Am I doing something wrong or is this a bug. I would have thought changing the name would not affect the select colors.

I also tried creating two custom palettes, one for the general colors of the site and another for the brand. First, I created the general palette and selected all of my colors correctly. I then created the second palette and all of a sudden all of the colors I had selected took on the color values from the newly created palette. Which is not what I would have expected. Surely a color should only be used from any given palette if I select it. Or is there some notion of a default palette in the theme studio and by creating the second only it automatically became the default.

The whole concept of colors as a palette of variations on a color is also inflexible in my mind. I have some very specific colors that I need to store and with global access to them. This is not something that is possible in the theme studio as all color palettes are only variations on a color. Is there a way to create a palette that is a mix of colors and not variations on a single color.

Of course it is entirely possible that I have no idea how I should be using the feature, which is why I’m asking for clarification.

I’d also like to see an example of how I specify a color palette from a very specific color value as I don’t seem to be able to get this to work.

Also I’d like to understand what the HEX values below each of the colors represent. Here is a screenshot of a color selected from my palette.

And here is that color displayed in the Apple color Picker and as can be seen the HEX colors values do not match. Hence my confusion. Or are these not RGB colors but something else, hencce the different values.

I think I’m hopelessly confused by all this color stuff so I hope someone can shed some light on how it is intended to be used and what the best practices are for using the features of the theme studio colors.

One last thing I think it would be really convenient if the name of the color palette from which a color has been selected were displayed in the property inspector so that I can tell at a glance whether the color is from one of my palettes or not.

1 Like

Maybe this will all make sense when we are able to create our own themes.

If you used the built-in macOS colour picker you’ll often find it gives different results, this is known problem on macOS and effects many graphics apps. And yes, it’s to do with different colorspaces.

The #numbers you see in the Theme Studio are the hex value. If you type those into a different graphics app you’ll get the same colour.

If you need a set of colours, just create them in the theme studio, the shades either side of it can be seen as a useful side effect (and often come in handy). Create as many colours as you need, there is no limit.

We have the colour palettes set up like this as this is the way Tailwind CSS handles them, you can learn more about Tailwind Colours Palettes here.

Sounds reasonable. But what I’m most concerned about is the problems I encountered when I decided to change the name of a palette. Having to reselect all of the colors throughout my project seems like a bug. I would have thought the app would leave the colors alone when a name is changed, or am I missing something.

It’s a slight bug. The page needs to refresh. If you switch to another page, and back again, your renamed colour should be visible in the editor.

We’ll get this properly fixed!

You are right I tested refreshing the page and the colors do return, phew.

Mahalo.