one of Yaru’s next goals is to clearly define a color palette, in the same way Adwaita and elementary OS did.
Yaru has borrowed its palette from Unity8 at the beginning, but then we diverged for many reasons. The goal is to expose this palette for App developers to pick them if needed, instead that hardcoding them into the app, looking then out of place when changing theme.
I’d like to merge the work done so far, officially introducing some colors and, if possible, come closer to the work already done by Ubuntu design team.
Ubuntu touch color palette
In order of appearance:
Porcelain. Recommended for foregrounds.
Silk. Recommended for neutral action buttons and secondary text.
Ash. Recommended for subtitles and other tertiary content.
Graphite. Recommended for coloring dark themes’ background.
Slate. Recommended for text and action icons.
Inkstone. Recommended for foreground colors in dark themes.
Jet. Recommended for content coloring.
Orange. Recommended for branded elements, display progress and intensity, textual links on light backgrounds.
Purple. Recommended for proper nouns in list items.
Red. Recommended for negative and irreversible action buttons, errors and alerts.
Green. Recommended for positive action buttons.
Blue. Recommended for text selection and text cursor.
Let us use one of them as base and then build on it. Either Ubuntu Palette or Adwaita, which is upstream. Since we are changing colours from upstream, I think it will be better to start with Adwaita and then add/remove colours to it.
I’d start with our current palette and try to converge towards Ubuntu web ones, more than adwaita’s one
EDIT:
Adwaita and Elementary as a reference for the number of colors, in term of different color and tones of the same color, more than the actual colors used.
There isn’t a clear definition of a full palette, this is the goal of this step, however we started from Ubuntu touch color palette (see link in the first post)
EDIT: updated first post with the link to current Yaru specific colors
In terms of icons, I generally pipette colours from the palette graphic in Sam Hewitt’s Suru guidelines: https://snwh.org/suru/guidelines
When I need a dark grey (not included) I generally use the one from the Terminal icon. I’ve also pipetted colours from other original Suru icons. There may be a couple of elements here and there which use random shades and I think we did the folders by eye, rather than using an existing colour (I pipetted them from a mockup by @madsrh).
If the Suru palette + Terminal grey + folder oranges could be included in our official palette, that would cover the icons.
I have experience in UI design for games, but I’ve never contributed to anything like this, so apologizes if I misunderstood the meaning of this.
Given the current color pallet of Ubuntu, with prominent oranges and violets, what about having other secondary colors as the pallet for apps, rather than standard “red, blue, yellow, etc.”?
One “problem” is the number of color we all are going to propose. It seems that a number between 5 and 7 for each one, so I am still investigating what is the best range, before proposing any palette. Also the best contrast possible must be into account when putting colors together (contrast between foreground and background).
Thanks @jaggers, I forgot about it, added now to the first post.
This is great anyway, thanks a lot. As said above, before generating the palette, I’d like to better understand what could be the optimal variation between colors (e.g. 10% lighter, 20%? How about the other changes like hue, saturation, …?), but it’s great to have someone able to generate palettes
Agreed. I was just trying to start the discussion in a creative manner. As for variants, we can use 4 darker and 4 lighter on both sides of the base colour. There are some tools which can compare a set of colours with each other. Most of them are free as well.
3 or 2 on both sides then. If we want to go on our own palette route and include Suru palette ( which is wide enough ), will it be easy ? When we have only 5/7 shades per colour, Suru palette itself make our range full.