Visualizing RGB & CMYK

A demo to visualize how RGB and CMYK work to create additive or subtractive color.

RGB (Red, Green, Blue) is an additive color model - meaning that combining the colors "add" to their light spectrum. This model is carried through light and has uses in monitors,lighting, photography, etc. When you combine red, green, and blue equally, you will produce white.

CMYK (Cyan, Magenta, Yellow, Key) is a subtractive color model - meaning that combining the colors "subtract" from the their light spectrum. This model has uses in ink printing. Since printing in black is very common, the additional color "Key" is black to produce a deep black without having to waste ink on combining colors. When you combine cyan, magenta, and yellow equally, you will produce black.

Created with only CSS (using SCSS) for mix-blend-mode and animation.

See the Pen Visualizing RGB and CMYK Colors by Rob DiMarzo (@robdimarzo) on CodePen.