Change chromatic/full colors to a more harmonious palette

Description

As you might have already noticed, the chromatic or full colors (i.e. non-grayscale colors) used throughout GitLab's user interface are:

not harmonious with the brand colors (the most obvious example is the pinkish-red or amaranth)
look inconsistent as a whole

To tackle these two problems and contribute to a more polished UI (see UI polish), I redefined the existing color palette by extending the brand colors. The color palette was also tweaked manually to at least pass the Web Content Accessibility Guidelines (WCAG) AA level for large text (even when used with small text). This work was inspired by Vidget's article on extending a color palette beyond brand colors:

while there’s some science to it (found in basic color theory), there’s also an art to manipulating the rules to discover just the right color combination.

Using the tools found in the Links / references section below:

Generated a color wheel from the three brand colors and the primary purple used at about.gitlab.com, tweaking some of the colors manually. The color wheel provides us with the most harmonious collection of hues (i.e. the color values without any regards to lightness or colorfulness/vividness).
Color schemes of varying brightness were then generated for some of these hues: green, blue, purple, red and orange. They were generated by an algorithm and then tweaked manually. The dark orange colors are a good example of manual tweaking as they looked very “muddy” initially.

Considerations

I'm aware that these changes may seem minimal, especially in the light of everything we're doing for GitLab. Still, lack of UI consistency is one of the common negative points referred by the wider community.

The first step of this issue is to put the proposal out there and gather feedback. After that, if the proposal has “green light”, actions points will be laid out.

Proposal

In the following images, almost all of the proposed text–background color combinations for buttons, badges, and alerts pass at least WCAG AA level for small text. However, the white text over green and white text over orange combinations don't pass WCAG AA for small text. To solve this, a text shadow was added to all white text over colored backgrounds, this increases accessibility and those combinations pass AA for large text.