Designing design system for Aunalytics— color fundamentals
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)
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.
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.
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.
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.
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
