Color Conversion

By Ben Whisman

PAGE UPDATED: ;

Awaiting Revision.

About using color on computrs.

Color Model Conversion Formulas

[1] RGB to CMYK:
RGB(r%, g%, b%) => CMYK(100 - r%, 100 - g%, 100 - b%, 0);
[2] CMYK to RGB:
CMYK(c%, m%, y%, k%) => RGB(100% - c%, 100% - m%, 100% - y%);

Note these are no longer the conversions used by either Adobe or Macromedia software.

Color Models

RGB: Red, Green, Blue (additive).

Used for on-screen or other light sources. Native color model for HTML and CSS. Each component is added to shine from its source and make pure white light. Components are usually represented as unsigned bytes [0..255] in either decimal (base-10) or hexadecimal (base-16) numbers, and sometimes as percentages [0..100%]. Colors are represented in web pages as three- or six-digit hex strings, such as "#RGB" and "#RRGGBB". For example, "#930", "#ABCDEF", or "#FC9630". Web-safe or browser-safe colors use 20% increments from 0 to 100% red, green, or blue.

Web-Safe Color Values

See the Index at ./rainbow/index.html for tables listing web-safe color values, color number format conversions, and other resources.

CMYK: Cyan, Magenta, Yellow, and Black (subtractive).

Used for in-print four-color process printing. Each component absorbs (subtracts) the light that shines on it and reflects only that component’s color (yellow, for example). Together they reflect the total color your eye sees. Black results when all light is absorbed and none is reflected. The professional printing industry and even your own inkjet printer uses this model. Process color printing separates percentages of color into overlaid halftone dot screens. Halftones are also used for black-and-white photos.

HSL: Hue, Saturation, and Lightness

Note: Other names for this model are Hue, Saturation, and Brightness; or Hue, Saturation, and Value. Adobe, Macromedia, and the web standards (HTML5, CSS3, SVG 1.1) currently use different conversions, which makes using this model problematic.

Hue is a number in degrees [0..360]. Saturation is a percentage [0..100]. Lightness, Brightness, or Value is a percentage [0..100]. Hue is how we think of color, as red (0°), orange (30°), yellow (60°), green (120°), cyan (180°), blue (240°), purple or violet (270°), magenta (300°), and so on. Lightness, brightness, or value is how light a tint, or how dark a shade, that the hue is, such as pale, light, medium, dark, or deep blue, measured from 0% totally dark, to 100% totally light. Saturation is how strong or weak a hue is, from 0% totally gray, to 100% totally saturated. For example, from a weak, neutral bluegray to a strong, intense blue. This model produces non-unique colors (it forms a cylinder), so colors are not often stored using this model. That is to say, Black or White are themselves, no matter what number is used for the hue (although 0 degrees is used by convention).