color systems beginner's course



This is a basic overview of Color Systems, a part of color theory in Graphic Design, what I think is a requireed skill for Web Design.

a color is a point inside these shapes.

photo editors like Photoshop and Paint Shop Pro and GIMP flatten and show slices of these shapes as workable FLAT palettes (since we have a 2D screen).

there are conversions between these different color systems.

visit the CIE Image Gallery for visuals on additive and subtractive color, the CIE Chromacity Diagram on which our color systems are based.


Y'IQ is the color system used in NTSC composite video.


Y'UV is the color system used in PAL and SECAM composite video. not to beconfused with the format used for component video.


YCbCr is the color system used in component video for HDTV.


CMYK: The true shape (represent all the colors) of CMYK is a hypercube (4D cube), 1 color each axis, C for x axis, M for y axis, Y for z axis, and K for w axis. CMYK is used for Print and is based on subtractive colors, and is used for paints, and inks in printing.

  • (C)yan (x axis, 1st parameter)
  • (M)agenta (y axis, 2nd parameter)
  • (Y)ellow (z axis, 3rd parameter)
  • Blac(K) (w axis, 4th parameter)


The true shape (represent all the colors) of RGB is a 3D cube, 1 color each axis, R for x axis, G for y axis, and B for z axis. for RGB at least, let's say R, ranges from black on one side of the axis to full on Red at the other side of the axis. RGB is additive colors and is used for light, such as for monitors where light is generated by the monitor.

  • (R)ed (x axis, 1st parameter in rgb() and rgba() with values 0..255 or 0%..100% or # hexadecimal color values in the range 0..f or 00..ff per color axis when used with # like #fca or #ffccaa)
  • (G)reen (y axis, 2nd parameter in rgb() and rgba() with values 0..255 or 0%..100% or # hexadecimal color values in the range 0..f or 00..ff per color axis when used with # like #fca or #ffccaa)
  • (B)lue (z axis, 3rd parameter in rgb() and rgba() with values 0..255 or 0%..100% or # hexadecimal color values in the range 0..f or 00..ff per color axis when used with # like #fca or #ffccaa)


HLS/HSV/HSB are hard to describe. examine the Wikipedia article or an encyclopedia. they can be plotted in different shapes depending on what you are aming for. chroma is 2 cones glued together at the base to form a diamond 'spinning top' shape. the other shape is a cylinder. the range from top to bottom is (L)ightness or (B)rightness. (V)alue is like a black level and goes upward. (S)aturation in HSL goes from center outward. (H)ue is expressed as an angle around the circle. uses additive colors, and is light-based.

  • (H)ue
  • (S)aturation
  • (V)Value
  • (H)ue
  • (S)aturation
  • (B)rightness


  • (A)lpha (opacity, as in how opaque or non-transparent)


Pantone is one such color system for "Color Correctness" and includes monitor calibration tools. Pantone is used in Fasion, Home, andother industries and I think is used by Marketing as well.

Xerox Color

Xerox has their own color matching system for their laser and wax printers. wax isn't used so much anymore, lasers are used more than wax, but both are available. Xerox printers are workgroup printers and are used by Marketing and Enterprise-level companies or Real Estate where color correctness (good imaging) is required. wax and toner both have their +'s and -'s. and is waterproof and with the newer printers, printouts handles sun


  • wax becomes part of the paper
  • probably sun-proof
  • waterproof
  • great for Real Estate and taking between buildings
  • vinyl-binder-proof
  • sun-proof
  • fast even for dense pages


  • electricity cost (has a heater)
  • delay to 1st page


  • waterproof
  • OK for Real Estate
  • fast even for dense pages


  • not sun-proof
  • not vinyl-binder-proof
  • electricity cost (has a heater) - 26W..90W standby, 600W..800W printing
  • delay to 1st page


  • HP 940 and HP 950/951 series ink waterproof except on plastic inkjet labels (HP Officejet Pro).
  • Great for small Real Estate Offices
  • sun-proof
  • vinyl-binder-proof
  • almost NIL power costs!


  • all other inkjet printers have non-waterproof ink to my knowledge
  • high cartridge costs except for Kodak printer, high ink costs
  • high cost per page EXCEPT HP OfficeJet Pro with XL cartridges and Kodak consumer printers
  • no color matching software

Cinema color

final cut pro merged with apple color, 2K, 3K, 4K is used in Cinema. I am not entirely understanding about 2K, 3K, and 4K, but I think they are not only a color system, but a size format as well. I could be wrong. you can see more about these foprmats when you investigate the Red One cimena cameras. Cinema color grading applications are typically 3rd-party programs.

About Color System Conversions

Conversions can be done from subtractive colors to additive colors and back, but they are not in all cases sucessful depending on what color in the color space is chosen,such as a corner in CMYK for which there is no conversion to RGB (or HLS, or HSV).

Cinema color has a much wider dynamic range than regular desktop monitors.

we are JUST starting to see UHD 3.8K 3840x2160 31.5" monitors in the $3500 price range, by ASUS. I the resolution is kind of cine, but the aspect ratio is 16:9@139.867dpi. analysis based on resolution and diagonal inches. it IS labeled as a 4K monitor.


Alpha [channel]
opposite-of-transparency opaqueness channel right along R,G,B, you find A for RGBA. not sure, but might work the opposite of opacity found as a property in layers. a value of 0.0 is transparent and a value of 1.0 is opaque.
the organization that either makes the standards for or helps make or collects the standards for colorimetry. photons which light is made up of is light radiation (not bad for you unless it's too bright or is x-ray, but this deals with the VISIBLE color spectrum).