Colorboard

What are the different color systems?

Color Systems

  • Colors produced by Light
  • Colors used when Printing
  • Colors used when Painting

Primary Colors

Primary colors are the main colors in a given color system.

The primary colors for light are Red, Green, and Blue: (RGB)

The primary colors for print are Cyan, Magenta, and Yellow: (CMY)

The primary colors for paint are Red, Yellow, and Blue: (RYB)

Secondary Colors

Secondary colors are made by mixing two primary colors in a color system.

The Secondary colors for light are Yellow, Cyan Magenta.

+
=
+
=
+
=

The Secondary colors for print are Blue, Red, Green.

+
=
+
=
+
=

The Secondary colors for paint are Orange, Green, Purple.

+
=
+
=
+
=

What are the different color wheels?

Color Wheels

  • Red, Green, Blue (RGB)
  • Cyan, Magenta, Yellow (CMY)
  • Red, Yellow, Blue (RYB)

Main Colors

The 12 main colors for (RGB) are:

The 12 main colors for (CMY) are:

The 12 main colors for (RYB) are:

What are the commonly used color formats?

Color Formats

  • Red, Green, Blue (HEX)
  • Red, Green, Blue (RGB)
  • Cyan, Magenta, Yellow (CMY)
  • Red, Yellow, Blue (HSL)
  • Red, Yellow, Blue (HWB)

HEX Colors

Where rr (red), gg (green) and bb (blue) are hexadecimal integers between 00 and ff, specifying the intensity of the color.

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.

Hexadecimal color values are supported in all browsers.

RGB Colors

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

RGB color values are supported in all browsers.

CMYK Colors

CMYK colors is a combination of CYAN, MAGENTA, YELLOW , and BLACK.

Computer screens display colors using RGB color values. Printers often presents colors using CMYK color values.

CMYK is not supported in HTML, but it is suggested as a new standard in CSS4.

HSL Colors

HSL color values are supported in Edge, Chrome, Firefox, Safari, Opera 10+, and in IE9+.

HSL stands for Hue, Saturation, and Lightness.

HSL color values are specified with: hsl(hue, saturation, lightness)

HSL color values are supported in all major browsers.

HWB Colors

HWB is not supported in HTML (yet), but it is suggested as a new standard in CSS4.

What are the different color schemes?

Color Schemes

  • Monochromatic color schemes
  • Complementary color schemes
  • Analogous color schemes
  • Split Complementary color schemes
  • Triadic color schemes
  • Tetradic color schemes

Monochromatic Colors

Monochromatic color schemes are easy to create because they use only one color.

Monochromatic schemes use different tones from the same angle on the color wheel (the same hue).

Complementary Colors

Complementary schemes are created by combining colors from opposite sides of the color wheel.

Analogous Colors

Three colors that are side by side on the color wheel. This color combination is versatile, but can be overwhelming. To balance an analogous color scheme, choose one dominant color, and use the others as accents.

Split Colors

Primary color with two analogous colors in the color wheel. This combination has strong contrast as the complementary color.

Triadic Colors

Three colors that are evenly spaced on the color wheel. This provides a high contrast color scheme, but less so than the complementary color combination — making it more versatile. This combination creates bold, vibrant color palettes.

Tetradic Colors

Four colors that are evenly spaced on the color wheel. Tetradic color schemes are bold and work best if you let one color be dominant, and use the others as accents. The more colors you have in your palette, the more difficult it is to balance,

What is color psychology?

Color Psychology

  • Colors can influence human behavior.
  • Colors can influence human perceptions.
  • Colors can influence attractiveness.

Red

Energy Power Strength Excitement Danger Fire Blood Urgency Traffic Stop Passion Appetite Emotion Love

Green

Nature Fertility Freshness New Growth Safety Good Health Healing Power Free Traffic Harmony Peace Easiness Calmness

Blue

Sea Water Ocean Depth Wealth Quality Stability Conservatism Productivity Wisdom Intelligence Sky Truth Peace Heaven

Yellow

Sunshine Light Clarity Energy Warmth Optimism Happiness Positivity Cheerfulness Youngfulness

Black

Authority Power Elegance Formality Mystery Evil Fear Death

Gray

Security Reliability Classic Knowledge Professional Wisdom

White

Cleanliness Neutrality Goodness Innocence

loading..