Vendor style initiative - color palette

[c-lobrano]

Hey

as part of the upstream vendor style initiative (see gnome discourse link and Exchange hardcoded colours with exported colours in gtk apps)

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.

Here the current ubuntu color definitions in Yaru: https://github.com/ubuntu/yaru/blob/master/gtk/src/default/gtk-3.20/_ubuntu-colors.scss
while here the Suru icon palette https://snwh.org/suru/guidelines

Below some reference links:

• https://design.ubuntu.com/brand/colour-palette/
• https://www.w3.org/WAI/standards-guidelines/wcag/
• 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.

/cc @mpt, @didrocks (if still have time after ZFS ), @madsrh, @jaggers, and anyone who wants to contribute

[c-lobrano]

Adding @Wimpress as new Ubuntu desktop director

(congrats also here btw )

[meetdilip]

What is the first step ? Identifying/defining colours ? Where to look for them ?

I see that there are 4 palettes listed.

design.ubuntu
Ubuntu touch
Adwaita
Elementary OS

What to do ? Put them all together ?

[c-lobrano]

I think the first step is a brainstorming of all above.

I’d add also this https://www.w3.org/WAI/standards-guidelines/wcag/

[meetdilip]

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.

[c-lobrano]

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.

[meetdilip]

I’d start with our current palette

Where can we find that ?

[c-lobrano]

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

[meetdilip]

How can we find the hex colours equivalent to colours like this

$terminal_base_color: lighten($terminal_bg_color, 5%);

[c-lobrano]

We need to get creative here :D, my best reply is http://scg.ar-ch.org

[meetdilip]

I got most of them. But how about this one ?

mix($headerbar_fg_color, $headerbar_bg_color, 50%);

I converted all others to hex code. Only these 4 evades me

 $headerbar_insensitive_color: mix(#F7F7F7, #323030, 50%);
//
$backdrop_headerbar_fg_color: mix(#F7F7F7, #323030, 70%);
$backdrop_headerbar_text_color: mix(#CCC, #323030, 70%);
$backdrop_headerbar_insensitive_color: mix(#F7F7F7, #323030, 70%);

[meetdilip]

I recently worked with Bootstrap for an Inkscape palette. I used this as reference

https://getbootstrap.com/docs/4.0/getting-started/theming/

They choose a few base colours and their shades as $red-100 to $red-900

Looks like all we have to do is to choose the base colours and then add those shades to it.

[meetdilip]

Based on _ubuntu-colors.scss I created basic palette shades for distinct colours. I haven’t accommodated blacks and whites though.

These are Yaru palette colours and derived shades

[jaggers]

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.

[rekkert]

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.”?

[meetdilip]

I have perfected the palette further. You can now see more shades and hex code

This is based on Utility colours in Yaru.

[c-lobrano]

Looks like all we have to do is to choose the base colours and then add those shades to it.

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).

In terms of icons, I generally pipette colours from the palette graphic in Sam Hewitt’s Suru guidelines: https://snwh.org/suru/guidelines

Thanks @jaggers, I forgot about it, added now to the first post.

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.

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

[meetdilip]

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.

[c-lobrano]

As for variants, we can use 4 darker and 4 lighter on both sides of the base colour.

Currently, both Adwaita and Elementary provides at most 7 variants, usually only 5.

[meetdilip]

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.