Color

Primary colors

Amino's primary color palette consists of vibrant shades of orange, red, purple, blue, and green. The colors are inspired by the Amino logo, and the green is added to complete the set and support product UI needs.

If you need a shade that isn't shown here, interpolate thoughtfully between the two closest ones. Try doing so in a variety of color spaces (RGB, HSL, and HSB) and pick the one that works best. Here's an example:

• Say you need a color between purple-200 and purple-300
• In HSB, those colors are (287, 80, 75) and (279, 100, 60), respectively
• Interpolating equally between the two in HSB, we get (285, 90, 68), or #8611AD

Tables are provided in the appendix with copyable hex, RGB, and HSL values.

Grays

There are eight gray values plus pure black and white, making 10 grayscale colors. The grays are distributed between black and white using the modular scale multiplier. For text colors, use black or white with alpha transparency (via rgba() or hsla()). See [Typography]({{ path '/docs/typography' }}) for more.

Gradients

Gradients fall into two families: monochromatic and polychromatic. The monochromatic gradients maintain a single hue, while the polychromatic ones transition between adjacent hues, like orange to red. Don't make arbitrary gradients between nonadjacent brand colors (e.g. green to red).

Use gradients sparingly, if at all. Gradients tend to look best when applied to very thin strips or large areas with a moderate aspect ratio (e.g. squares, circles, and squarish rectangles) where they appear to simulate pleasant lighting.

For large areas of gradient fill, pin the lighter color to the top-right corner and the darker color to the bottom-left corner, simulating a consistent soft light source.

On elements that appear as strips, slabs, or bars, don't apply gradients “against the grain,” which creates a dated-looking rounded or beveled effect. For thin strips, apply the gradient in parallel with the long edge of the strip, and go from one end to the other. It's generally best to avoid gradients for slabs and bars, as they tend to distract and yank the eye.

Appendix

macOS color scheme file ← Download this file and put it in ~/Library/Colors. It will show up in the system color picker that Keynote and other Mac apps use.