Designing design system for Aunalytics— color fundamentals

TinaDesign
Sep 1, 2018 · 10 min read

The visible spectrum for normal human beings, as you can see from the diagram below, makes up only a small proportion of the entire electromagnetic spectrum. (notes: we do not consider the accessibility in this article)

Cited from “The secret Live of color” by Kassia St. Clair

What?

Color space

color space (color model, color system) is an abstract mathematical model which describes the range of colors as numbers, typically as 3 or 4 values or color components (e.g. RGB, CMYK). Each color in the system is represented by a single dot.

“In nature, light creates the color. In the picture, color creates the light.” — Hans Hofman

So there are two types of colors. One is the light itself, and another one is the light being reflected off the surface of that object and into our eyes. Different things are different colors because they absorb some wavelengths of visible light spectrum, while others bounce off. So the color we perceive an object to be is precisely the color it isn’t: that is, the segment of the spectrum that is being reflected away.

Additive color — a method to create color by mixing a number of different light colors, with shades of red, green, and blue being the most common primary colors used in additive color system.

RGB Colors — red, green and blue. In the RGB model, the overlapping of additive colors (red, green and blue) results in subtractive colors (cyan, magenta and yellow). These are the best colors for digitally displayed assets. The red, green, and blue use 8 bits each, which have integer values from 0 to 255. This makes 256*256*256 = 16777216 possible colors.

Subtractive color — a method where colors are created by subtracting (absorbing) parts of the spectrum of light present in ordinary white light, by means of colored pigments or dyes, such as those in paints, inks, and the three dye layers in typical color photographs on film.

CMYK Colors — Cyan, Magenta, Yellow and Black. In the CMYK model, the overlapping of subtractive colors (cyan, magenta and yellow) results in additive colors (red, green and blue). These are the best colors for prints in additive colors (red, green and blue). These are the best colors for printed assets. The values are represented as cmyk (C%, M%, Y%, K%), where C, M, Y, and K are the percent values for the cyan, magenta, yellow, and black values of the color.
Monitor and digital camera are the additive color mode. Printers are the subtractive color mode. Scanners bring colors from CMYK color scope to RGB color scope.

Color model

RGB

a RGB color value is specified with: rgb (red, green. blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%)

HEX (Hexadecimal)

a hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.

HSL

The HSL color space, also called HLS, stands for:

  • Hue: the color type (such as red, blue, or yellow).

Ranges from 0 to 360 in most applications (each value corresponds to one color: 0 is red, 45 is a shade of orange and 55 is a shade of yellow).

  • Saturation: variation of the color depending on the lightness.

Ranges from 0 to 100%(from the center of the black and white axis).

  • Lightness (also Luminance or Luminosity or Intensity)

Ranges from 0 to 100% (from black to white).

Its common graphic representation us the following image:

HSB / HSV

The HSB (hue, saturation, brightness) HSV(hue, saturation, value) color model defines a color space in terms of three constituent components:

  • Hue: the color type (such as red, blue, or yellow).

Ranges from 0 to 360 in most applications. (each value corresponds to one color:0 is red, 45 is a shade of orange and 55 is a shade of yellow).

  • Saturation: the intensity of the color.

Ranges from 0 to 100% (0 means no color, that is a shade of grey between black and white; 100 means intense color).

Also sometimes called the “purity” by analogy to the colorimetric quantities excitation purity.

  • Brightness (or Value): the brightness of the color.

Ranges from 0 to 100% (0 is always black; depending on the saturation, 100 may be white or a more or less saturated color).

LAB (CIELAB, CIE-L*ab, L*a*b)

It expresses color as three numerical values, Lightness 100 , A(Green — Red +-128), B(Blue — Yellow +-128) color components. CIELAB was designed to be perceptually uniform with respect to human color vision, meaning that the same amount of numerical change in these values corresponds to about the same amount of visually perceived change.

LAB color space top view
LAB color space front view

YUV

The YUV model defines a color space in terms of one luma and two chrominance components and is similar to YPbPr and YCbCr. YUV models human perception of color more closely than the standard RGB model used in computer graphics hardware.

The YUV color space stands for

  • Y, the luma component, or the brightness.

Ranges from 0 to 100% in most applications.

  • U and V are the chrominance components (blue-luminance and red-luminance differences components).

Expressed as factors depending on the YUV version you want to use.

A graphic representation is the following image

CMYK

The CMYK color space, also known as CMJN, stands for:

  • Cyan.Ranges from 0 to 100% in most applications.
  • Magenta.Ranges from 0 to 100% in most applications.
  • Yellow.Ranges from 0 to 100% in most applications.
  • Black.Ranges from 0 to 100% in most applications.

It is a subtractive color model used in color printing. CMYK works on an optical illusion that is based on light absorption.The principle is to superimpose three images; one for cyan, one for magenta and one for yellow; which will reproduce colors.

PANTONE

The pantone color matching system is largely a standardized color reproduction system. By standardizing the colors, different manufacturers in different location can all refer to the Pantone system to make sure colors match without direct contact with one another.

How

Color Modifier

Hue

Is the most basic of color terms and denotes an object’s color. When we say “blue”, “green” or “red”, we’re talking about hue. The hues you use in your design convey important messages to your website’s visitors. Read part 1 of this series 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 added to ot. Conversely, adding white, black, or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.

In design, avoid using hues that have a similar (but not identical) chroma. Opt instead for hues with chromas that are either exactly the same or at least a few steps away from each other.

Saturation

Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.

In design, colors with similar saturation level make for more cohesive looking design. 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. Lighter 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 design.

Brightness / lightness

brightness is the relative lightness or darkness of a particular color, from black (no brightness) to white (full brightness). Lightness is a percentage; 0% is black, 100% is white.

Tint — a tint is a mixing result of an original color where white has been added. A tint is lighter than the original color. Shade — a shade is a mixing result of an original color where black has been added. A shade is darker than the original color. Tone — tone is a result of mixing a pure color with any neutral/grayscale color including the two extremes white and black. A tone is produced either by the mixture of color with gray, or by both tinting and shading.

Conclusion

  • Hue is color (blue, green, red, etc.).
  • Chroma is the purity of a color (a high chroma has no added black, white or gray).
  • Saturation refers to how strong or weak a color is (high saturation being strong)
  • Value refers to how light or dark a color is (light have a high value)
  • Tones are created by adding gray to a color, making it duller than the original
  • Shades are created by adding black to color, making it duller than the original
  • Shades are created by adding black to a color, making it darker than the original
  • Tints are created by adding white to a color, making it lighter than the original.

Combine colors

Primary colors — in the RYB (or subtractive) color model, the primary colors are red, yellow and blue.

Secondary colors — the three secondary colors (green, orange and purple) are created by mixing two primary colors.

Tertiary color — another six tertiary colors are created by mixing primary and secondary colors.

Complementary colors — colors that oppose each other on the color wheel, like red and green

Black and white

If color is solely the way physics describes it, the visible spectrum of light waves, then black and white are outcasts and don’t count as true, physical colors.

Gray

Variation of gray: gray include achromatic grayscale shades, which lie exactly between white and black, and nearby colors with low colorfulness. A selection of a number of these various colors is shown below

Monochromatic

Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create, as they’re all taken from the same hue, making it harder to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).

Monochromatic schemes are easy to create, but can also be boring when done poorly. Adding in a strong neutral like white or black can help keep things interesting.

Analogous (adjacent)

Colors that are next to each other on the color wheel, like blue and purple.

Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Traditionally, analogous color schemes all have the same chroma level, but by using tones, shades, and tints we can add interest to these schemes and adapt them to our needs for designing websites.

Complementary

Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades.

A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be visually jarring (they’ll appear to actually vibrate along their border in the most severe uses). This is best avoided (either by leaving negative space or by adding another, transitional color between them).

Adjacent Triad/ analogous

Analogous colors create a design that is harmonious and easy to look at.

Split colors

Attention grabbing but also pleasant to look at.

Triadic

Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes. They can be difficult to do well, but add a lot of visual interest to a design when they are.

Split-complementary

Split complementary schemes add more complexity than regular complementary schemes. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.

Double-Complementary (Tetradic)

Tetradic color schemes are probably the most difficult schemes to pull off effectively.

Custom

Custom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules. Keep in mind things like chroma, value, and saturation when creating these kinds of color schemes.

Are Gradients the new colors?

A gradient is created by using two or more different colors to paint one element while gradually fading between them. Gradients let designers create something that feels like a new color. A tone which didn’t exist before something that looks unique, modern and refreshing.

Why?

1. Gradients are memorable

2. Gradients are unique

3. Gradients feel realistic

4. Gradients are just more colorful and playful

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade