It is hard to make a good palette

The other day I spent a good hour trying to create a colour palette that looked good.

The first pain point is that exactly what primary through quaternary controls is a bit ambiguous.

I understand that you can only explain so much in text but in practice the only real way to know what the colors will change is to do a hard refresh every time. This also made it pretty time consuming.

The second pain point is that the single “primary” and “secondary” colours secretly computes a whole series of other colors that are used like --primary-low and --primary high, etc. I’ve noticed that using a colour like #2b2b2b gives a very different result than a similar dark color with a bit more blue, because the generated palette ends up being very different. It just feels like a shot in the dark every time I try a new color because the resulting colours end up being unpredictable. I appreciate the simplicity of having basically three variables control the entire palette but the result ends up feeling very stochastic

Finally, I have a lot of problems with contrast. I find that with the colors I was picking, it was a tradeoff between the contrast of the text to the background, the contrast of the horizontal rule to the background and the contrast of the reply/edit buttons and the background. Ex. Increasing the contrast of the text made the rule hard to see and vice versa.

I am not really asking for anything to be done here though. I guess a solution would be to increase the size of the palette to enable more flexibility. But I understand the benefits of keeping it simple. Some sort of real-time preview would be helpful but I also understand that this would be a low priority request

I just wanted to document my experience. Ultimately I was able to create a palette but was not completely satisfied with it. Curious if others faced similar challenges, or maybe the problem lies with me? Advice appreciated

2 Likes

Yeah the original intention was to make the admin dashboard options a simplified way to set colors, basically an “easy mode.” I agree that it is limiting and contrast isn’t great for some color combinations.

The good news is that remote themes can override all the automatically generated colors, see Override values for auto-generated color variables

We’ve also been taking a closer look at how our colors work lately, with the hopes of making it easier to work with color schemes and light/dark modes for both admins and users, so hopefully we can make some helpful refinements.

6 Likes

not to take away from your technical point, but maybe you’ll find this useful?

2 Likes

I didn’t know this was possible, this might be the solution I will have to settle with :slight_smile:

1 Like

Would it help to create a palette starting from a high-contrast palette (WCAG) that offers a bit more color fields?

I don’t know if WCAG palettes have different automatically generated color calculations that could be unwanted though.

1 Like

Yeah they come with some additional CSS (discourse/app/assets/stylesheets/wcag.scss at main · discourse/discourse · GitHub), so there could be some unwanted additions

1 Like