Skip to content

Instantly share code, notes, and snippets.

@filipelinhares
Created October 15, 2016 13:13
Show Gist options
  • Save filipelinhares/b23b26e70e84c81cc0bf59b56f28907b to your computer and use it in GitHub Desktop.
Save filipelinhares/b23b26e70e84c81cc0bf59b56f28907b to your computer and use it in GitHub Desktop.
Colors

Colors

Theory

Hue

Hue is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read part 1 of this article for the meanings conveyed by various hues.

Chroma

Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray present in a color that has high chroma. These colors will appear very vivid and well, ... pure.

Saturation

Related to chromaticity, saturation tells us how a color looks under certain lighting conditions.

In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.

Value

Value could also be called “lightness.” It refers to how light or dark a color is. Ligher colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest. When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.

For a fresh and energetic brand, go for one of the lighter, brighter blues (one of the top five options). For something a bit more corporate and serious, the bottom five should be a better fit.

Tints

A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint. Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.

Shades

A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black. In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.

Tones

Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues. Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.

Chosing a color

  • Use what you have.
  • Eliminate your competitors’ colors.
  • Think about your target audience.
  • But don’t default to stereotypes.
  • Play a word game.

Most palettes have way more colors than you’d ever need, especially considering that we need to add an average of three neutral colors to every scheme:

  • white,
  • dark gray,
  • light gray (optional).
  • a base color.
  • an accent color.

Finding our accent

http://paletton.com

Adding the gray

The dark is usually used for text, and the light for when you need subtle differentiation against all that white (usually for backgrounds). Intensity (alpha)

Crafiting harmonic colors

Overlay and opacity with hight saturation

Final note

You can be happy with our 5 colors but you can add more a yellow green and red.

Get it right in black and white

In data vis - http://www.scribblelive.com/blog/2013/06/25/building-effective-color-scales/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment